Transcript 5_CSS
.
.
.
Mai 2013 / Mars 2014
Lexique Sommaire
•CSS3 resize box sizing
•keyframes, animation
Réfs
•media queries
•Positionnement
Techs
•Flex Box & Holly Grail & unités
Langages & Documents
Chap V CSS "Cascading Style Sheets"
CSS 2: Règles, Sélecteurs, Propriétes
.
CSS: Méthodologie
.
.
CSS 2: Références
LESS
CSS 3: Survol, extensions Mozila
Foundation
CSS 3: @keyframes, animations
JQuery UI
CSS 3: Media Queries
Responsive design
Paul Franchi
SI 4
2014-15
CSS 3: Boites flexibles Mozilla
13/04/2015
Transparent - 1
Lexique Sommaire
Sommaire du Cours
Réfs
.
.
.
.
.
Chap I - Documents: Historique, Modèles, Standards et Références
Chap II - HTML: voir le cours CIP1-CMD & HTML5
Chap III - XML: "eXtensible Markup Language", les Bases
Chap IV - DTD: "Document Type Definition"
Chap V - CSS: Feuilles de Styles en Cascades& CSS3
Chap VI - DOM, DHTML: "Domain Object Model "& Programmation
Dynamique en HTML & SPRY & JQuery
Chap VII - XSD: Schémas XML
Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink
Chap IX - XSLT: Transformations XML
Chap X - RDF: "Resource Description Framework"
Chap IX - AJAX: "Asynchronous JavaScript And XML"
Savoir-Faire: Know Hows
HTML
.
XHTML CSS JS+DOM
Techs
MATHML XPATH XLINK XSLT
Etat de l'art:
HTML5
CSS3
SPRY
SVG
RDF AJAX
13/04/2015
XUL
Transparent 2
Lexique Sommaire
Some Références
.
.
.
Réfs
Web
EPU courses (in French)
Création & Manipulltion de Document
http://www.polytech.unice.fr/~pfz/cmd.html
Introduction to Internet http://rainbow.i3s.unice.fr/iai/
Langages & Documents
http:www.polytech.unice;fr/~pfz/document.html
Techs
W3C tutorial : http://www.w3schools.com/
Mozilla Development Center
http://developer.mozilla.org/en/docs/Main_Page
.
W3C, http://www.w3.org/
Web Developer's Bookmarks http://antriksh.com/resources/
.
Biblio:
many issues at EPU's lib
.
13/04/2015
Transparent 3
Lexique Sommaire
Documentation et Manuels
.
Techs
Documents du web
liste de balises HTML
code des couleurs RVB
.
liste des extensions de fichiers
(formats)
Expressions Rationnelles
.
.
Manuels.
Expressions régulières sous
Emacs
Recherche et remplacement
sous Emacs
Tutoriaux du Web
W3C : http://www.w3schools.com/
code HTML des caractères ISO
.
Réfs
CSS Play : http://www.cssplay.co.uk/index
Zen Garden :
http://www.csszengarden.com/tr/francais/
CSS in10 steps :
http://www.barelyfitz.com/screencast/htmltraining/css/positioning/
10 steps to better CSS:
http://shapeshed.com/journal/10_steps_to_bette
r_css/
compléments Emacs
.
grep sous Unix
13/04/2015
Transparent 4
Lexique Sommaire
.
Références Web
Réfs
Techs
.
.
.
.
.
13/04/2015
Transparent 5
Lexique
.
.
.
.
.
.
API – Application Programming Interface
ANSI – American National Standards Institute
ASCII – American Standard Code for Information Interchange (128 car.)
AJAX – Asynchronous JavaScript & XML
CSS – Cascading Style Sheets
DHTML – Dynamic HTML
DOM – Document Object Model
DTD – Document Type Definition
HTML – HyperText Markup Language
HTTP – HyperText Transfer Protocol
ISO - International Standards Organization
Mozilla - Fondation (global community for free and open Internet software))
MVC - Model View Controler
RDF - Resource Description Framework
REST - Representational State Transfer
RIA - Rich Internet Application
RSS - Really Simple Syndication
SGML - Standard Generalized Markup Language
SOAP - Simple Access Object Protocol
SPRY - Extensions JS pour HTML - Adobe Lab.
SVG - Scalable Vector Graphics
UNICODE – World wide Code (16 bits)
UTF-8 – Unicode version 8 bits
URL / URI – Uniform Resource Locator / Identifier
XML – eXtensible Markup Language
XBL – XML Binding Language (Mozilla)
XForms – XML Forms
XHTML – HTML 4 en XML
XLink – XML Linking Language
XPath – XML Path Language
XPointer – XML Pointer Language
XSL - eXtensible Stylesheet Language
XSLT – XSL Transformations
XSL-FO – XSL Formatting Objects
XSD – XML Schémas Définition Language
XUL – XML User Language (Mozilla)
W3C – World Wide Web Consortium
Web2.0 – Web dit "sémantique"
WHATWG - Web Hypertext Application Technology Working Group
WSDL - Web Service Description Language
13/04/2015
Lexique Sommaire
Réfs
Techs
Transparent 6
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
Chap V -
CSS "Cascading Style Sheets"
.
.
CSS 2: Règles, Sélecteurs, Propriétes
.
La balise <style> en HTML
.
Feuilles de style séparées en HTML
Paul Franchi
SI 4
2014-15
Feuilles de style en XML
LESS
.
13/04/2015
Transparent - 7
Lexique Sommaire
CSS: les feuilles de style
Cascading Style
Sheets
Réfs
Techs
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 8
Lexique Sommaire
CSS: Cascading Style Sheets
Cascading Style
Sheets
Syntaxe
les Sélecteurs
Réfs
Techs
Un langage pour définir les styles
de balises HTML ou XML
des éléments d’une DTD
class vs #id
Méthodologie
le modèle de
boites
CSS -2 (1998)
CSS 3: ( >1999, en cours: www.css3.info )
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS -1 (1996)
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
Principes
Règles de style associées à la structure des documents
Feuilles multiples
Types de média
Attachements alternatifs aux documents
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 9
Lexique Sommaire
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
Réfs
CSS: Tutoriaux, Versions et Navigateurs
Techs
CSS -1 (1996)
supporté par Netscape et IE version 4.
CSS -2 (1998)
supporté par FF1.5 (complet) et IE 6 (partiel)
CSS -3 (>1999, http://www.css3.info/ )
Opera, Safari, FF 3.0 (partiel) et IE 9 ?
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS sur le Web
W3Schools - CSS Tutorial
http://www.cssplay.co.uk/
http://www.csszengarden.com/
compatibilité avec les Navigateurs
CSS 3 implementation
Learn CSS on HTML.net
Learn CSS Tutorial
CSS Positionning in 10 steps
CSS in 10 sites
10 top Tips in CSS
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 10
Lexique Sommaire
CSS: les feuilles de style en cascade
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Techs
Feuille CSS
Collection de Règles
Une règle CSS
Sélecteur (balise HTML XML,, élément de
DTD)
propriétés (paramètres de style)
Méthodologie
le modèle de
boites
XML et CSS
Réfs
Modularité
Importation
Héritage
Masquage
Cascade
Résolution des "surcharge"
par la règle la plus spécifique
Conception CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 11
Lexique Sommaire
CSS: Syntaxe (1)
Cascading Style
Sheets
Syntaxe
( ascendance >? ) * element ( [ attr ( = val )? ] ) * {
( prop : val ; ) *
class vs #id
})
Méthodologie
le modèle de
boites
Techs
Les Règles
(
les Sélecteurs
Réfs
*
Exemples HTML & XML
envaleur {
font-style: italic ; font-weight: bold ;
}
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
/* CSS pour Xml */
/* CSS pour Html */
body {
font-style: italic ;
color: black ;}
p{
text-align: center ;
font-family: arial ;}
livre > titre {font-size: 24pt ;}
chapitre > titre {font-size: 20pt ;}
section theoreme {font-color: blue ;}
message [priorite = "haute"] {
font-size: 18pt ; font-color: red ; }
13/04/2015
Transparent 12
Lexique Sommaire
CSS: Syntaxe (2)
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
Réfs
}
Les Commentaires : /* blabla */
XML et CSS
les Styles Multiples
en XML
Techs
Groupes de Règles
selecteur (, selecteur )* {
( prop : val ; ) *
/* CSS pour Xml */
livre>titre, chapitre>titre
{
font-size: 24pt ;
font-color: blue;
}
Exemples HTML & XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
/* CSS pour Html */
p+h3 {
text-align: left ;
}
/* CSS pour Html */
h1, h2, h3 {
text-align: center ;
color: red;
}
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 13
Lexique Sommaire
CSS: Norme lexicale
Cascading Style
Sheets
Syntaxe
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Techs
Tokenization (unités lexicales)
ident
name
nmstart
nonascii
unicode
escape
nmchar
num
string
string1
string2
nl
les Sélecteurs
Réfs
[-]?{nmstart}{nmchar}*
{nmchar}+
[_a-z]|{nonascii}|{escape}
[^\0-\237]
\\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
{unicode}|\\[^\n\r\f0-9a-f]
[_a-z0-9-]|{nonascii}|{escape}
[0-9]+|[0-9]*\.[0-9]+
{string1}|{string2}
\"([^\n\r\f\\"]|\\{nl}|{escape})*\"
\'([^\n\r\f\\']|\\{nl}|{escape})*\'
\n|\r\n|\r|\f
Opérateurs, Séparateurs, Commentaires, etc.
13/04/2015
Transparent 14
Lexique Sommaire
CSS: Norme syntaxique
Cascading Style
Sheets
Syntaxe
class vs #id
Techs
At Rule:
les Sélecteurs
Réfs
@import ….. ;
@font-face { prop: "val"; ... ; }
@media { selecteur {prop: "val";} }
Méthodologie
le modèle de
boites
Rule: Sélecteur, Bloc
sélecteur (, sélecteur )* { ( propriété : valeur ; ) * }
Sélecteur
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
universel: *
type: tagName
class (.) et id(#)
attribute matching: [ ] = ~= |=
13/04/2015
child (>)
descendant (' ')
sibling (+)
pseudo (:)
precedence (~)
Transparent 15
Lexique Sommaire
CSS: Norme syntaxique
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
XML et CSS
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
identificateur
entier et réel
mesures et pourcentages
relative units:
le modèle de
boites
les Styles Multiples
en XML
Techs
Propriété, Valeur
em: the 'font-size' of the parent font
ex: the 'x-height' of the relevant font
rem: the 'font-size' of the html font
absolute units:
Réfs
URL et URI
strings
couleurs
compteurs
body {
font-size: 12px;
text-indent: 3em;
/* i.e., 36px */
}
in: inches — 1in is equal to 2.54cm.
cm: centimeters
mm: millimeters
pt: points — 1pt is equal to 1/72nd of 1in.
pc: picas — 1pc is equal to 12pt.
px: pixel units — 1px is equal to 0.75pt.
13/04/2015
Transparent 16
Lexique Sommaire
CSS: Sélecteurs Class & Id en HTML
Réfs
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
Classe (s)
Techs
permet d'associer un (ou plusieurs) style(s) à un élément HTML
sélectionné(s) par la valeur de (ou des) l'attribut(s) "class"
Id
idem, mais sélectionné par la valeur
de l'attribut "id" (unique)
<!-- HTML -->
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
<p id= "grand"> en 20pt</p>
<p id= "central"> centré en rouge </p>
<h1 class="center red">
titre au centre et en rouge </h1>
<p class="left"> à gauche </p>
/* CSS pour
HTML*/
#grand {font-size : 20pt; }
p#central {
text-align : center;
color: red;}
p.red {color: red; }
CSS 3 implementation
p.left {text-align: left; }
CSS 3 -moz
.center {text-align: center; }
CSS 3 Tutoriaux
13/04/2015
Transparent 17
Lexique Sommaire
CSS: les Sélecteurs
El
Tous les <E1
Parent El
les <E1> descendant d’un <Parent>
Parent > El
les <E1> fils d’un <Parent>
El + Ef
les <Ef> précédés immédiatement d’un <El>
El ~ Ef
les <Ef> précédés d’un <El>
El[att]
Tous les <E1 att = “xxx“ >
le modèle de
boites
El[att = “val“]
les <E1 att = “val“ >
XML et CSS
El[att~=“val“]
les <E1 att = “val1 val val2“ >
El[att |= “val“]
les <E1 att = “val-xxx“ >
El#nom
les <E1 xxx = “nom“ > où xxx est un attribut de type ID
El:link
les <E1> de type link non encore visités
CSS2 Références
des propriétés
El:visited :hover :active
Idem dèja visités, etc.
CSS 3 norme
E1:lang (fr)
les <E1 xml:lang= “ fr “ >
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
les Styles Multiples
en XML
importation de
styles W3C.org
Réfs
>
Techs
:focus :disabled :enabled :first-letter :first-line :root :hover :empty
:first-child :last-child :nth-child(n) :nth-of-type(n) :before :after :not()
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
*
Tous les élements
13/04/2015
Transparent 18
Lexique Sommaire
CSS en HTML: .class vs #id
Cascading Style
Sheets
Techs
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Réfs
Un attribut "class" permet de définir une classe de style
qui peut peut être partagée par plusieurs éléments
(balises) du document
L'attribut "id" définit une dénomination unique pour un
élément (balise) du document
<html>
<head> <style>
.center { }
#navBar { }
</style> </head>
<body>
<div class="center">
<div id="navBar">
<p class="center"> à centrer </p>
<div id="navBar" class="center" >
</body>
</html>
13/04/2015
</div>
</div>
</div>
Transparent 19
Lexique Sommaire
CSS: les Propriétés
Cascading Style
Sheets
margin
l
padding
e
f
t
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
top
border
content
Polices de caractère
bottom
Techs
r
i
g
h
t
font-family -style -weight -size
Textes
text-align -indent -decoration word-spacing
Couleurs et Fonds
color background
CSS2 Références
des propriétés
CSS 3 norme
Mis en Page ("Box")
Réfs
Listes
List-style-position
-image
Tableaux
Médias
13/04/2015
Transparent 20
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
Chap V CSS Méthodologie
.
.
.
Style inline
.
Style interne (<style>)
Style externe (séparé)
Paul Franchi
SI 4
2014-15
Styles alternatifs
Styles multiples
.
Importation de styles
13/04/2015
Transparent - 21
Lexique Sommaire
Cascading Style
Sheets
Syntaxe
Réfs
Evolution 0: les attributs de style Html
Techs
<html>
les Sélecteurs
class vs #id
<body color: black ; font-family: arial >
Méthodologie
le modèle de
boites
XML et CSS
<p text-align: center; color: red; >
texte centré en arial (par héritage) en rouge (par masquage)
les Styles Multiples
en XML
</p>
importation de
styles W3C.org
</body>
CSS2 Références
des propriétés
CSS 3 norme
HTML, comme il ne faut plus l'écrire !
car pas évolutif !
</html>
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 22
Lexique Sommaire
Evolution 1: les attributs de style Html
Cascading Style
Sheets
Syntaxe
les Sélecteurs
Techs
<body>
<div style="
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
</div>
</body>
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Réfs
position: absolute; width: 500px; height: 52px;
z-index:1; left: 100px; top: 24px;
layer-background-color: #00FFFF;
border: 5px solid #00FF00;
text-align: center; color:red;
text-transform: uppercase;
font-size: xx-large; font-weight: bold;
">
Grand Titre 1
<div style="
text-transform: capitalize;
font-size: x-large; font-weight: normal
">
sous titre 1 </div>
HTML, peu évolutif !
13/04/2015
Transparent 23
Lexique Sommaire
Evolution 2 : la balise <style> en Html
Cascading Style
Sheets
Réfs
Techs
<head> <style>
Syntaxe
div#Titre {
les Sélecteurs
position: absolute; width: 60%; left: 100px; top: 124px;
background-color: #CCFFFF; border: 5px; solid #00FF00;
class vs #id
text-align: center; color: red;
Méthodologie
text-transform: uppercase; font-size: xx-large;font-weight: bold;
le modèle de
}
boites
div#sousTitre {
XML et CSS
text-transform: capitalize; font-size: x-large; font-weight: normal;
les Styles Multiples
en XML
}
</style> </head>
importation de
styles W3C.org
<body>
CSS2 Références
des propriétés
<div id="Titre"> Grand Titre
<div id="sousTitre">sous titre avec l'attribut "id" </div>
CSS 3 norme
</div>
CSS 3 implementation
</body>
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 24
Lexique Sommaire
Evolution 2: les attributs de style Html
Réfs
Cascading Style
Sheets
Techs
<html><head> <style>
p {text-align: center; color: red;}
Syntaxe
p.right {text-align: right}
les Sélecteurs
p.center {text-align: center}
class vs #id
.center {text-align: center}
Méthodologie
#green {color: green}
le modèle de
p#para1{ text-align: left; color: pink}
boites
</style> </head>
XML et CSS
<body >
les Styles Multiples
<p> This paragraph will be center-aligned and red-colored. </p>
en XML
<p class="right"> This paragraph will be right-aligned and also red. </p>
importation de
styles W3C.org
<p class="center"> This paragraph will be center-aligned and also red. </p>
<h1 class="center"> This heading will be center-aligned but black. </h1>
CSS2 Références
des propriétés
<p class="center"> This paragraph will also be center-aligned and red.</p>
CSS 3 norme
<h2 id="green" class="center" >Subtitle centered in green.</h2>
CSS 3 implementation
<p id="para1"> This paragraph will be left-aligned and pink-colored.</p>
</body> </html>
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 25
Lexique Sommaire
Les attributs de style Liens en Html
Cascading Style
Sheets
<!-- http://www.w3schools.com/css/css_pseudo_classes.asp -->
Réfs
Techs
Syntaxe
<html> <head>
les Sélecteurs
<style type="text/css">
class vs #id
a:link {color: #FF0000}
Méthodologie
a:visited {color: #00FF00}
le modèle de
a:hover {color: #FF00FF}
boites
a:active {color: #0000FF}
XML et CSS
</style></head> <body>
les Styles Multiples
en XML
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
importation de
styles W3C.org
<p><b>Note:</b> a:hover MUST come after a:link and a:visited
CSS2 Références
in the CSS definition in order to be effective!!</p>
des propriétés
<p><b>Note:</b> a:active MUST come after a:hover
CSS 3 norme
in the CSS definition in order to be effective!!</p>
CSS 3 implementation
</body></html>
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 26
Lexique Sommaire
Evolution 3: les feuilles de style séparées
Cascading Style
Sheets
Réfs
Techs
Le(s) lien(s) vers le style CSS dans HTML
..\XML_CSS\leftnav.html
..\XML_CSS\rightnav.htm
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
ici 2 styles alternatifs
<html>
le modèle de
<head>
boites
<link rel="stylesheet" href="leftNav.css" type="text/css"
media="screen" />
XML et CSS
<link rel="stylesheet" href="printNav.css" type="text/css"
les Styles Multiples
media="print" />
en XML
</head>
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
<body>
<div id="masthead"> <!-- texte de l'entête --> </div>
<div id="navBar"> <!-- texte de la barre de navigation-->
</div>
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
</body>
</html>
13/04/2015
Transparent 27
Lexique Sommaire
Evolution 3: les feuilles de style séparées
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Réfs
Techs
2 feuilles de style CCS (alternatives)
..\XML_CSS\rightNav.css
..\XML_CSS\leftNav.css
#masthead {
padding: 10px 0px 0px 0px;
Méthodologie
border-bottom: 1px solid #cccccc;
le modèle de
width: 100%;
boites
}
#masthead {
padding: 10px 0px 0px 0px;
XML et CSS
#navBar {
border-bottom: 1px solid #cccccc;
les Styles Multiples
float: right; width: 20%;
width: 100%;
en XML
margin: 0px; padding: 0px;
}
importation de
background-color: #eeeeee;
styles W3C.org
border-right: 1px solid #cccccc;
#navBar {
border-bottom: 1px solid #cccccc; float: left; width: 20%;
CSS2 Références
des propriétés
}
margin: 0px; padding: 0px;
background-color: #eeeeee;
CSS 3 norme
border-right: 1px solid #cccccc;
CSS 3 implementation
border-bottom: 1px solid #cccccc;
}
•css
•css
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 28
Lexique Sommaire
XML et CSS
Réfs
Le style CSS dans XML
cd_catalog.xml
<?xml
version="1.0" encoding="ISO-8859-1"?>
Cascading Style
Sheets
Syntaxe
Techs
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<COUNTRY>USA</COUNTRY>
<PRICE>10.90</PRICE>
</CD>
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
<ARTIST>Bob Dylan</ARTIST>
<COMPANY>Columbia</COMPANY>
<YEAR>1985</YEAR>
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
la feuille de style CCS cd_catalog.css
CATALOG {background-color: #ffffff; width: 100%;}
CSS2 Références
CD
des propriétés
CSS 3 norme
•css
{display: block; margin-bottom: 30pt; margin-left: 0;}
TITLE {color: #FF0000; font-size: 20pt;}
CSS 3 implementation
ARTIST {color: #0000FF; font-size: 20pt;}
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 29
Lexique Sommaire
XML et CSS
Réfs
Le style "Table" CSS dans XML
Cascading Style
Sheets
Syntaxe
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="tableCatalog.css"?>
<CATALOG>
<Titre> Mon Tableau de CDs </Titre>
<CD> … </CD>
</CATALOG>
les Sélecteurs
class vs #id
Méthodologie
Techs
le modèle de
boites
CATALOG {
display: table; width: 80%;
les Styles Multiples
margin-left: 30px; border: 2px solid;
en XML
padding: 20px 30px 30px 20px;
importation de
}
styles W3C.org
CD {
CSS2 Références display: table-cell; background-color: #00FFFF;
des propriétés
border: 2px solid; padding: 20px 30px 30px 20px;
}
CSS 3 norme
Titre {
CSS 3 implementation display: table-caption; font-size:36px; text-align:center;
}
XML et CSS
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 30
Lexique Sommaire
CSS: les Styles Multiples en HTML
Réfs
Cascading Style
Sheets
Résolution des styles multiples
Techs
<html>
<head>
les Sélecteurs
<link rel="stylesheet" href="Style1.css" />
<link rel="stylesheet" href="Style2.css" />
class vs #id
<style>
Méthodologie
@import "Fontes.css" ; @import "Tables.css" ;
le modèle de
.centre{}
boites
style prédéfini des
.urgent {color:red !important }
XML et CSS
balises dans Navigateur
#navBar {color:blue }
les Styles Multiples </style>
CSS par @import
en XML
</head>
CSS par "stylesheet"
importation de
<body
style='color:black'>
styles W3C.org
ordre dans "stylesheet"
<div class="urgent centre"
CSS2 Références
balise <style>
id="navBar">
des propriétés
ordre des propriétés
...
CSS 3 norme
</div>
class et
#id
CSS 3 implementation </body>
style par attributs
</html>
CSS 3 -moz
sauf !important
Syntaxe
CSS 3 Tutoriaux
13/04/2015
Transparent 31
Lexique Sommaire
CSS: les Styles Multiples en XML
Cascading Style
Sheets
Styles multiples (cascading)
Réfs
Techs
Syntaxe
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="monStyle1.css"?>
class vs #id
<?xml-stylesheet type="text/css" href="monStyle2.css"?>
Méthodologie
<racine>
le modèle de
<titre> Styles en XHTML et XML</titre>
boites
<html xmlns = " http://www.w3.org/1999/xhtml " >
XML et CSS
<body>
les Styles Multiples
en XML
<h1> Liens sous XHTML</h1>
importation de
<a href=" http://www.essi.fr/~pfz ">
styles W3C.org
Chez Moi
CSS2 Références
styles prédéfinis par
des propriétés
</a>
xmlns: html, xhtml, etc.
CSS 3 norme
</body>
</html>
CSS 3 implementation
CSS par xml-stylesheet
</racine>
les Sélecteurs
(ordonnées)
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 32
Lexique Sommaire
Les feuilles de style alternatives
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
ici 2 styles au choix dans le Navigateur
(FF>Affichage>Style de la page>)
Réfs
Techs
<html>
<head>
<link title="àGauche" rel="stylesheet"
href="leftNav.css" type="text/css" />
<link title="àDroite" rel="alternate stylesheet"
href="rightNav.css" type="text/css" />
</head>
<body>
<div id="masthead"> <!-- texte de l'entête --> </div>
<div id="navBar">
<!-- texte de la barre de navigation-->
</div>
</body>
</html>
13/04/2015
Transparent 33
Lexique Sommaire
XML et CSS
Réfs
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
Le style CSS dans XML cd_catalog.xml
Techs
•xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
la feuille de style CCS cd_catalog.css
CATALOG {background-color: #ffffff; width: 100%;}
CD {display: block; margin-bottom: 30pt; margin-left: 0;}
CATALOG {background-color: #ffffff; width: 100%;}
TITLE {color: #FF0000; font-size: 20pt;}
CSS 3 norme
CD {display: block; margin-bottom: 30pt; margin-left: 0;}
ARTIST {color: #0000FF; font-size: 20pt;}
CSS 3 implementation
TITLE {color: #FF0000; font-size: 20pt;}
CSS2 Références
des propriétés
CSS 3 -moz
CSS 3 Tutoriaux
ARTIST {color: #0000FF; font-size: 20pt;}
13/04/2015
Transparent 34
Lexique Sommaire
XML & CSS multiples
Cascading Style
Sheets
Syntaxe
Réfs
Techs
<?xml version="1.0" encoding="ISO-8859-1"?>
les Sélecteurs
class vs #id
<?xml-stylesheet title="Style de base"
href="cd_catalog.css" type="text/css"?>
Méthodologie
le modèle de
boites
<?xml-stylesheet title="Planche" rel="alternate"
href="cd_catalog_2.css" type="text/css"?>
XML et CSS
les Styles Multiples
en XML
<?xml-stylesheet title="Spirale" rel="alternate"
href="cd_catalog_3.css" type="text/css"?>
importation de
styles W3C.org
<CATALOG>
... / ...
</CATALOG>
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 35
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
Chap V .
CSS2 Références des propriétés
.
.
Boites (Box)
Textes
Positionnement
Tables
Pseudo éléments
Compléments
.
Paul Franchi
SI 4
2014-15
.
13/04/2015
Transparent - 36
Lexique Sommaire
CSS: Propriétés des Boîtes
Réfs
Cascading Style
Sheets
Syntaxe
Boîtes: Dimensions & graphiques
width
max-width
height max- height
les Sélecteurs
class vs #id
le modèle depadding
boites
Techs
min-width
"largeur" % auto inherit
min- height
"hauteur" % auto
"largeur" %
margin margin-top margin-bottom
margin-left
Méthodologie
valeurs
margin-right
padding-top padding-bottom
"largeur" %
padding-left padding-right
XML et CSS
"largeur" thin medium thick
border-width
les Styles Multiples
en XML
-top-width -bottom-width -left-width -right-width
importation de
styles W3C.org
"couleur" transparent
border-color
-top-color -bottom-color -left-color -rightcolor
CSS2 Références
des propriétés
CSS 3 norme
none hidden
CSS 3 implementation
-top-style -bottom-style -left-style -right-style dotted dashed solid
CSS 3 -moz
border-style
border
CSS 3 Tutoriaux
-top
-bottom
-left
-right
13/04/2015
none hidden
dotted dashed solid
Transparent 37
Lexique Sommaire
CSS: Propriétés des Textes
Réfs
Cascading Style
Sheets
valeurs
Textes
Syntaxe
text-indent
indentation %
les Sélecteurs
text-align
left right center justify inherit chaine
class vs #id
text-decoration
underline overline line-through blink none
inherit
le modèle de
boites
text-shadow
couleur distance1 distance2 distance3
none inherit
XML et CSS
letter-spacing
normal distance inherit
Méthodologie
les Styles Multiples
en XML
importation de
styles W3C.org
word-spacing
normal distance inherit
text-transform
capitalize uppercase lowercase none
inherit
CSS2 Références
des propriétés
CSS 3 norme
direction
ltr rtl
white-space
normal pre nowrap inherit
Techs
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 38
Lexique Sommaire
CSS: Propriétés ("positionning")
Cascading Style
Sheets
Techs
Syntaxe
les Sélecteurs
valeurs
Boîtes: Positions
display
block
none
inline list-item compact
table table-row table-col table-cell …
position
static relative absolute fixed
class vs #id
Méthodologie
le modèle de
boites
Réfs
XML et CSS
top
les Styles Multiples
en XML
importation de
styles W3C.org
bottom
right "longueur" % auto inherit
float
left right none inherit
clear
left right none both inherit
overflow
visible hidden scroll auto
clip
rect(,,,,) auto
visibility
visible hidden collapse inherit
CSS2 Références
des propriétés
CSS 3 norme
left
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 39
Lexique Sommaire
CSS : positionnement/dimensionnement
Réfs
Cascading Style
Sheets
Syntaxe
les Sélecteurs
Box Model: margin, border, padding, content
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Techs
width, height, box-sizing: content vs border
vertical-align: & text-align:
display: block vs inline vs box vs none
"Container"
position: static
// normal flow
position: relative
top, right, bottom, left // position en flow normal
float: & clear:
position: absolute
Le "container " d’un
top, right, bottom, left // container
élément en position
position: fixed
absolue est l’ancêtre
top, right, bottom, left // window
le plus proche qui est
en position absolue,
"stack order"
relative ou fixe.
z-index: :hover
13/04/2015
Transparent 40
CSS: Positionnement (1)
Lexique Sommaire
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Réfs
Cascading Style "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Techs
Sheets
<html xmlns="http://www.w3.org/1999/xhtml">
Syntaxe
<head> <style type="text/css">
les Sélecteurs
h2.static { position: static; left: 113;}
class vs #id
h2.decGauche { position: relative; left: -20px;}
Méthodologie
h2.courante { position: relative; left: 113;}
le modèle de
h2.centre { position: absolute; top: 50%; left:50%;}
boites
h2.fixe { position: fixed ; top: 100; left: 200;}
XML et CSS
</style></head>
les Styles Multiples
<body style="color:#FF0000">
en XML
<h2 class="static"> Titre en position STATIC dans le "layout"</h2>
importation de
styles W3C.org
<h2 class="courante"> Titre à sa position COURANTE dans le "layout"</h2>
CSS2 Références
<h2 class="decGauche"> Titre DéCALé à gauche de sa position normale</h2>
des propriétés
<h2 class="centre"> Titre CENTRé par rapport au père </h2>
CSS 3 norme
<h2 class="fixe"> Titre FIXE dans la page (noScroll)</h2>
CSS 3 implementation
</body></html>
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 41
Lexique Sommaire
CSS: Z-Index
Réfs
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
Techs
<html>
<head> <style type="text/css">
img{position:absolute;}
img.x1{left:100px; top:100px; z-index:-1}
img.x2{left:50px; top:50px; z-index:-2}
img.x3{left:0px; top:0px; z-index:-3}
</style></head>
<body>
<h1>This is a Heading</h1>
<img class="x1" src="BandeauVerticalPPT.gif" width="112" height="380">
<img class="x2" src="BandeauVerticalPPT.gif" width="112" height="380">
<img class="x3" src="BandeauVerticalPPT.gif" width="112" height="380">
<p>Default z-index is 0. z-index -1 has lower priority.</p>
</body> </html>
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 42
Lexique Sommaire
CSS: Z-Index avec "iframe"
Cascading Style
Sheets
Réfs
Techs
Syntaxe
les Sélecteurs
<html>
<body>
Méthodologie
<iframe style="width:75%;
le modèle de
boites
height:300px;
background-color: #FFFF99"
XML et CSS
les Styles Multiples name="view"
en XML
src="CSSzIndex.html">
importation de
</iframe>
styles W3C.org
CSS2 Références </body>
des propriétés
</html>
class vs #id
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 43
Lexique Sommaire
CSS:float & clear
Réfs
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
<html><head> <style type="text/css">
img.droite{float: right ; padding-left:20px;}
img.gauche{float: left ; padding-right:20px;}
.break { clear: both ;}
</style></head><body>
<p>
PARAGRAPHE 1 <br/>
<img class="droite" src="xpath.gif" width="112" height="84" />
This is some text. This is some text. This is some text. ….
</p><p>
PARAGRAPHE 2 <br/>
<img class="gauche" src="xpath.gif" width="112" height="84" />
This is some text. ……
</p><p class="break">
PARAGRAPHE 3 <br/>
This is some text. This is some text. This is some text. …..
</body> </html>
13/04/2015
Techs
Transparent 44
CSS: modèle de page Web
zones fixes, relatives & absolues
Lexique Sommaire
<body>
Cascading Style
<div id="HH">
Sheets
<div id="G"><img src="LOGOEPU.gif" width="120" height="40"></div>
Syntaxe
<div id="M"> <p> BANDEAU FIXE HORIZONTAL (HH)</p></div>
les Sélecteurs
<div id="D"><p><a href="mailto:one@somewhere"> email </a> </p></div>
class vs #id </div> <!-- fin HH -->
Méthodologie <div id="VG"> <p> "fixed" V G </p>
<div id="RUBRIQUE"> ..... </div>
le modèle de
boites
<div id="RUBRIQUE"> ..... </div>
XML et CSS
</div> <!-- fin VG -->
les Styles Multiples
<div id="GRDTITRE"><p> Grand Titre </p></div>
en XML
<div id="PRINCIPAL">
importation de
styles W3C.org
<p> CADRE PRINCIPAL "absolute" </p>
CSS2 Références <div id="SECTION">
des propriétés
<p> SECTION 1 "relative" </p>
CSS 3 norme
</div> <!-- fin SECTION -->
CSS 3 implementation
</div> <!-- fin PRINCIPAL -->
CSS 3 -moz
</body>
CSS 3 Tutoriaux
13/04/2015
Réfs
Techs
Transparent 45
CSS: unités, pseudo-éléments opacité
Lexique Sommaire
Réfs
CATALOG {display: block; background-color: #cccccc; width: 100%; }
Cascading Style
Techs
CATALOG:before {
Sheets
content: "Ma Liste de CDs"; font-size: 36px; color: #0000FF; text-align: center; }
Syntaxe
CD {
les Sélecteurs
display: inline-block; background-image: url(../IMAGES/cd.gif);
class vs #id
margin-bottom: 10px; margin-left: 5px; height: 130px; width: 129px; font-size: 6pt;
Méthodologie
border: cyan 5px ridge; -moz-border-radius: 50%; }
le modèle de
CD:hover {
boites
background-image: url(../IMAGES/cd.png); background-position: 0px 4px;
XML et CSS
height: 248px; width: 246px; font-size: 11pt; }
les Styles Multiples
en XML
CD>ARTIST, CD>TITLE {
importation de display:block ; margin-top: 1em; margin-left: auto; margin-right: auto;
styles W3C.org
padding: 0.5em; background-color: #FFFFFF; font-weight: bold; font-size: 130%; }
CSS2 Références
des propriétés
CD>TITLE {
CSS 3 norme
width: 50%; height:2em; overflow: auto ; -moz-border-radius: 30px;
color: #00FFFF;font-style:italic; text-align:center ;
CSS 3 implementation
filter:alpha(opacity=80); opacity:0.8; }
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 46
Lexique Sommaire
CSS: Propriétés des Tables
Cascading Style
Sheets
Syntaxe
les Sélecteurs
Techs
display
table inline-table
table-row-group table-column-group
table-header-group table-footer-group
table-caption
table-row table-cell
caption-side
top bottm left right inherit
table-layout
auto fixed inherit
bordercollapse
collapse separate inherit
borderspacing
dist-horiz dist-vertic inherit
empty-cells
show hide inherit
Méthodologie
le modèle de
boites
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
valeurs
Tables
class vs #id
XML et CSS
Réfs
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 47
Lexique Sommaire
CSS: des Tables sans la balise <table> (v1)
Réfs
Cascading Style
Sheets
Techs
<html> <head> <style type="text/css">
.grdMere{display: table;}
les Sélecteurs
.mere{display: table-row;}
class vs #id
.fille{display: table-cell;}
Méthodologie
</style></head>
le modèle de <body>
boites
<div class="grdMere">
XML et CSS
<div class="mere">
les Styles Multiples
en XML
<p class="fille"> F11</p> <p class="fille"> F12</p><p class="fille"> F13</p>
importation de </div>
styles W3C.org
<div class="mere">
CSS2 Références
des propriétés
<p class="fille"> F21</p> <p class="fille"> F22</p>
</div>
CSS 3 norme
</div>
CSS 3 implementation
</body></html>
Syntaxe
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 48
Lexique Sommaire
CSS: des Tables sans la balise <table> (v2)
Cascading Style
Sheets
Réfs
Techs
<html> <head> <style type="text/css">
.grdMere{display: table;}
les Sélecteurs
.grdMere>div{display: table-row;}
class vs #id
.grdMere>div>p{display: table-cell;}
Méthodologie </style></head>
le modèle de <body>
boites
<div class="grdMere">
XML et CSS
<div>
les Styles Multiples
<p> F11</p> <p > F12</p><p> F13</p>
en XML
</div>
importation de
styles W3C.org
<div>
CSS2 Références
<p > F21</p> <p > F22</p>
des propriétés
</div>
CSS 3 norme
</div>
CSS 3 implementation
</body></html>
Syntaxe
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 49
Exemple: Bibliographie
Lexique Sommaire
Réfs
Cascading Style
Sheets
Syntaxe
placement sans <table> avec display: ou
float:
<html>
Techs
<head>
body > h1 { text-align: center; }
les Sélecteurs <link rel="stylesheet"
href="bib.css" type="text/css" />
class vs #id
Livre {
</head>
display: inline-block;
Méthodologie <body>
width: 22%;
<h1>
le modèle de
Bibliographie "Documents"
background-color: #99FFFF;
boites
</h1>
border: #0000FF medium ridge;
XML et CSS
<div class="Livre" > Comprendre XSLT
margin: 10px ; }
<img src="../../BIBLIO/HTML2841771571.jpg"
les Styles Multiples
width="54" height="90">
en XML
Livre ul {
<ul> <em> Auteurs:</em>
importation de
<li> <a href="">Bernard Amann</a></li>
padding-left: 0px;
styles W3C.org
<li> <a href="">Philippe Rigaux</a></li>
text-align: center; }
CSS2 Références</ul>
des propriétés
<span>2002</span>
Livre li { list-style: none; }
<span>Ed: O'REILLY</span>
CSS 3 norme
</div>
CSS 3 implementation
</body>
img { float: right ; }
</html>
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 50
Lexique Sommaire
CSS: divers compléments
Réfs
Cascading Style
Sheets
contenu
Techs
{content:"string" attr(A) url(" ") counter(C);}
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
Exercice[ref]:before {content: "Exercice - " attr(ref);}
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
pseudo-élements :before :after
textes :first-line :first-letter white-space
Paragraph:first-line {font-style:"italic";}
Paragraph:first-letter {font-size:+200%;}
SourceLP {white-space:pre;}
compteurs
Chapitre {counter(chapnum); counter-increment:chapnum;
counter-reset:sectnum;}
13/04/2015
Transparent 51
CSS: divers compléments
Lexique Sommaire
Réfs
Cascading Style
Sheets
opacité (chacun sa version !)
zone
Syntaxe
class vs #id
Méthodologie
}
le modèle de
boites
les Styles Multiples
en XML
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 Tutoriaux
media
@media print {
#footer , #menu {display: none;}
#container {
width: 92%;
opacity:1.0; /* obligatoire pour imprimer */
}
}
importation de
styles W3C.org
CSS 3 -moz
{
filter: alpha(opacity=100);
filter: progid:
DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.00;
opacity:1;
les Sélecteurs
XML et CSS
Techs
pagination
Chapitre { page-break-after: always; }
Exemple { page-break-inside: avoid ;}
13/04/2015
Transparent 52
Lexique Sommaire
CSS : importation de styles W3C.org
Cascading Style
Sheets
Réfs
Techs
<link rel="alternate stylesheet" title="Ultramarine"
href="http://www.w3.org/StyleSheets/Core/Ultramarine">
Syntaxe
<link rel="alternate stylesheet" title="Chocolate"
les Sélecteurs
href="http://www.w3.org/StyleSheets/Core/Chocolate">
<link rel="alternate stylesheet" title="Midnight"
class vs #id
href="http://www.w3.org/StyleSheets/Core/Midnight">
Méthodologie
<link rel="alternate stylesheet" title="Oldstyle"
href="http://www.w3.org/StyleSheets/Core/Oldstyle">
le modèle de
boites
<link rel="alternate stylesheet" title="Modernist"
href="http://www.w3.org/StyleSheets/Core/Modernist">
XML et CSS
<link rel="alternate stylesheet" title="Swiss"
les Styles Multiples
href="http://www.w3.org/StyleSheets/Core/Swiss">
en XML
<link rel="alternate stylesheet" title="Traditional"
importation de
href="http://www.w3.org/StyleSheets/Core/Traditional">
styles W3C.org
<link rel="alternate stylesheet" title="Steely"
CSS2 Références
href="http://www.w3.org/StyleSheets/Core/Steely">
des propriétés
<link rel="alternate stylesheet" title="Forest (by David Baron)"
CSS 3 norme
href="http://dbaron.org/style/forest">
<link rel="stylesheet" title="Plain (by David Baron)"
CSS 3 implementation
href="http://dbaron.org/style/plain">
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 53
Lexique Sommaire
Réfs
CSS: Incompatibilités, Bugs & Hacks sous IE6 & 7
Cascading Style
Sheets
transitional
< !DOCTYPE html PUBLIC
strict
Syntaxe
les Sélecteurs
class vs #id
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
Méthodologie
XML et CSS
les Styles Multiples
en XML
margin: 9px !important;
-margin: 5px;
/* FF only */
non supportés
/margin: 7px;
:hover
display: table
CSS2 Références
des propriétés
CSS 3 norme
bugs récurrents
margin, padding
div float
border
background
etc…
le modèle de
boites
importation de
styles W3C.org
Techs
doctype en 1ère ligne
/* IE7 only */
/* IE6 only */
hacks CSS
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 54
Lexique Sommaire
HTML - Commentaires Conditionnels IE
Réfs
Cascading Style
Sheets
Syntaxe
Techs
Syntaxe d'un commentaire conditionnel positif:
<!--[if condition]> HTML, XHTML, CSS ou Script <![endif]-->
Syntaxe d'un commentaire conditionnel négatif:
<!--[if condition]><![IGNORE[--><![IGNORE[]]> HTML <!-<![endif]-->
version non valide pour XHTML et XML
Conditions:
IE : Toutes versions d'IE
lt IE version: Versions d'IE inférieures à version
lte IE version: Versions d'IE inférieures ou égales à version
IE version: La version version d'IE
gte IE version: Versions d'IE supérieures ou égales à version
gt IE version: Versions d'IE supérieures à version
version: IE 5, 5.5, 6 ou 7.
Utile pour adapter les styles CSS aux versions IE
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 55
Lexique Sommaire
Ilot XML dans HTML
Cascading Style
Sheets
Réfs
Techs
Syntaxe
les Sélecteurs
class vs #id
<html>
<body>
<xml id="MonIlotXML" src="data.xml"></xml>
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
<table border="1" datasrc="#MonIlotXML">
<tr>
<td><span datafld="NOM"></span></td>
<td><span datafld="PRENOM"></span></td>
</tr>
</table>
</body>
</html>
CSS 3 implementation
CSS 3 norme
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 56
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
Chap V .
CSS 3
.
.
Support des Navigateurs
.
Survol, extensions Mozila
@keyframes, animations
Paul Franchi
SI 4
2014-15
Media Queries
Boites flexibles Mozilla
.
13/04/2015
Transparent - 57
Lexique Sommaire
CSS : Overview & Web support (2011)
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
Réfs
Techs
CSS 2.1 features
Units
Importance
At-rules
Basic selectors
Pseudo-classes
Pseudo-elements
Basic properties
Print properties
Conformance
CSS 3 features
Units
At-rules
Basic selectors
Pseudo-classes
Pseudo-elements
Basic properties
Print properties
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 58
Lexique Sommaire
CSS 3: normalisation en cours (modules)
Cascading Style
Sheets
Syntaxe
CSS Level 2
CSS Level 1
Selectors
CSS Color
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Completed work
High Priority
CSS Level 2
Revision 1
CSS
Namespaces
CSS
Backgrounds
CSS Borders
CSS Multicolumn Layout
Media Queries
Réfs
Techs
Medium Priority
Medium Priority
CSS Fonts
CSS Snapshot
2007
CSS Basic Box Model
CSS Template Layout CSS Snapshot
2010
CSS Speech
CSS Mobile
CSS Basic User
Profile 2.0
Interface
CSS Marquee
CSS Scoping
CSS Paged Media
CSS Grid Positioning
CSS Print Profile
CSS Grid Layout
CSS Values and
CSS Regions
Units
CSS Flexible Box
CSS Cascading
Layout
and Inheritance
CSS Image Values
CSS Text
CSS 2D
CSS Writing Modes
Transformations
CSS Line Grid
CSS 3D
CSS Ruby
Transformations
CSS Generated
CSS Transitions
Content for Paged
CSS Animations
Media
13/04/2015
Transparent 59
Lexique Sommaire
CSS 3: propriétés en fonction
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
Réfs
Techs
.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
}
bordures:
arrondies,
dégradées,
ombrées
.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
}
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
effets de texte:
ombre, fontes, etc.
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
}
(re)
dimensionnement:
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}
Transparent 60
Lexique Sommaire
CSS 3: propriétés en fonction
Cascading Style
Sheets
Syntaxe
les Sélecteurs
backgrounds:
size, position,
multiples
multi-colonnes:
span, gap, rule
class vs #id
Méthodologie
.backgroundsize {
background: url(logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
}
Réfs
Techs
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
.multiplecolumns {
-moz-column-width: 130px;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 61
Lexique Sommaire
CSS 3: normalisation en cours
Cascading Style
Sheets
Syntaxe
transform:
rotate,
translate,
skew, scale
transition:
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
Réfs
.top {
Techs
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
div.polaroid:hover {
/* FF SAFARI OPERA CHROME */
-webkit-transform: rotate(0deg) scale(1.25) ;
-moz-transform: rotate(0deg) scale(1.25);
transform: rotate(0deg) scale(1.05);
}
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
div.pub {
/* OK ss SAFARI, mais en attente de FF 3.7 */
-webkit-transition: -webkit-transform 3s ease-in;
-moz-transition: -moz-transform 3s ease-in;
-webkit-border-radius: 3em;
}
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 62
Lexique Sommaire
CSS 3: normalisation en cours
Cascading Style
Sheets
Syntaxe
les Sélecteurs
@keyframes
animation
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
delay
direction
duration
iteration-count
name
play-state
timing-function
fill-mode
h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from { margin-left: 100%; width: 300% }
to { margin-left: 0%; width: 100%;}
}
@-webkit-keyframes slidein {
from { margin-left: 100%; width: 300% }
to { margin-left: 0%; width: 100%;}
}
Réfs
Techs
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
resize
box-sizing
border content padding-
/* support Firefox, WebKit, Opera and IE8+ */
.example {
resize: both;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
13/04/2015
Transparent 63
Lexique Sommaire
CSS 3: Media Queries
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Réfs
Techs
«A media query consists of a media type and at least one
expression that limits the style sheets' scope by using media
features, such as width, height, and color. Media queries, added in
CSS3, let the presentation of content be tailored to a specific range
of output devices without having to change the content itself.»
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
@media
@media print {
#menu, #footer, aside { display:none; }
body { font-size:120%; color:black; }
}
print
screen
projection
tv
braille
aural
all
logical
and
not
only
@media screen and (max-width: 640px) {
.bloc { display:block; clear:both; }
}
media features
min- maxwidth height color aspect-ratio resolution
13/04/2015
Transparent 64
Lexique Sommaire
CSS 3: Boites flexibles (Mozilla/XUL)
Réfs
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
« Le modèle de boite flexible CSS3 permet de déterminer la façon
dont des boites sont distribuées au sein d'autres boites
(horizontalement ou verticalement) et comment elles se répartissent
l'espace disponible entre elles.
Ce modèle de boite est utilisé par XUL (le langage de définition
d'interface des produits Mozilla). Des mécanismes similaires sont
utilisés par de nombreux autres langages de description d'interface
comme XAML ou GladeXML . »
display: flex | inline-flex
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
flex-directionflex-direction: row | row-reverse |
column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
order: integer
justify-content: flex-start | flex-end | center | spacebetween | space-around
align-items: flex-start | flex-end | center | baseline |
stretch
align-content: flex-start | flex-end | center | spacebetween
13/04/2015
Techs
#main {
min-height: 800px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
Transparent 65
Lexique Sommaire
CSS 3: Boites flexibles ("Holly Grail")
Cascading Style
Sheets
Réfs
Techs
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
@media all and (max-width: 640px) {
#main, #page {
-webkit-flex-flow: column; flex-flow: column; flex-direction: column; }
CSS 3 norme
#main > article, #main > nav, #main > aside { /* Return document order */
CSS 3 implementation
-webkit-order: 0; order: 0; }
}
CSS 3 -moz
CSS2 Références
des propriétés
CSS 3 Tutoriaux
13/04/2015
Transparent 66
Lexique Sommaire
CSS 3: Mozilla Extensions
Cascading Style
-moz-background-clip
Sheets
-moz-background-inlinepolicy
Syntaxe
-moz-binding
-moz-border-bottom-colors
les Sélecteurs
-moz-border-left-colors
class vs #id-moz-border-start-width
-moz-box-align
Méthodologie
-moz-box-direction
-moz-box-flex
le modèle de
-moz-box-flexgroup
boites
-moz-box-ordinal-group
XML et CSS-moz-box-orient
-moz-box-pack
les Styles Multiples
-moz-box-sizing
en XML
-moz-column-count
importation de
-moz-column-gap
styles W3C.org
-moz-column-width
-moz-column-rule Gecko
CSS2 Références
des propriétés
1.9.1
-moz-column-rule-width
CSS 3 norme
Gecko 1.9.1
-moz-column-rule-style
CSS 3 implementation
Gecko 1.9.1
-moz-column-rule-color
Gecko 1.9.1
CSS 3 -moz
-moz-float-edge
CSS 3 Tutoriaux
-moz-force-broken-image-icon
-moz-font-feature-settings
Gecko 2.0
-moz-font-language-override
Gecko 2.0
-moz-force-broken-image-icon
-moz-image-region
-moz-margin-end
-moz-margin-start
-moz-opacity Obsolete
-moz-outline Obsolete
-moz-outline-color Obsolete
-moz-outline-offset Obsolete
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-outline-style Obsolete
-moz-outline-width Obsolete
-moz-padding-end
-moz-padding-start
-moz-stack-sizing Gecko 1.9.1
-moz-tab-size Gecko 2
13/04/2015
Réfs
Techs
-moz-transform Gecko 1.9.1
-moz-transform-origin
Gecko 1.9.1
-moz-transition Gecko 2
-moz-transition-delay Gecko
2
-moz-transition-duration
Gecko 2
-moz-transition-property
Gecko 2
-moz-transition-timingfunction Gecko 2
-moz-user-focus
-moz-user-input
-moz-user-modify
-moz-user-select
-moz-window-shadow
Gecko 1.9.1
-moz-initial
-moz-appearance
-moz-win-browsertabbartoolbox New in Firefox 3
-moz-win-communicationstoolbox New in Firefox 3
-moz-win-media-toolbox
New in Firefox 3
-moz-mac-unified-toolbar
New in Firefox 3.5
67
etcTransparent
…
Lexique Sommaire
CSS 3: spécial Mozilla
Réfs
Cascading Style
Sheets
Syntaxe
opacité & coins
arrondis
les Sélecteurs
class vs #id
Méthodologie
Techs
.joliBouton {
background-image: url(sourire.png);
border:#0000FF thick ridge ;
-moz-border-radius: 25px ;
-moz-opacity : 0.85 ;
}
le modèle de
boites
XML et CSS
.col_3
multi-colonnes
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
{
-moz-column-count: 3;
-moz-column-gap: 10%;
-moz-column-width: 25%;
}
bordures multiples
Bouton:hover {
-moz-border-bottom-colors: #FF0000 #00FF00 #0000FF ;
-moz-border-right-colors: #FF0000 #00FF00 #0000FF ;
}
13/04/2015
Transparent 68
Lexique Sommaire
CSS 3: spécial Mozilla
Cascading Style
Sheets
Réfs
Techs
:not() :root :target
Syntaxe
#onglets li div { display: none; }
#onglets > li:target { color: #FF0000; font-size: 24px ; }
#onglets > li:target > div { display: block; }
#onglets > li:not(:target) > div { display: none; }
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
backgrounds
.linearDiagonal {background: -moz-linear-gradient(left top, blue, white); }
.linearMultiple {background: -moz-linear-gradient(left, red, orange, yellow,
green, blue);
}
.radialEllipse {background: -moz-radial-gradient(ellipse farthest-corner,
red, yellow 10%, #1E90FF 50%, white); }
.radial {background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));}
.radialRepetition {background: -moz-repeating-radial-gradient(black,
black 5px, white 5px, white 10px); }
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 69
Lexique Sommaire
CSS 3: Tutoriaux du Web
Cascading Style
Sheets
Techs
CSS3 please!
class vs #id
Méthodologie
Animations avec CSS transform
Transition Timing Function
Syntaxe
Réfs
les Sélecteurs
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
Sliding content
3D Flipping
Accordions (widgets)
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
50 animations with CSS3 ( and Jquery )
CSS3 Animation Browser supports
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 70
Lexique Sommaire
Sur CSS
Cascading Style
Sheets
Syntaxe
Réfs
Techs
LESS
permet la réutilisation de régles CSS avec
les Sélecteurs
des variables
des mixins
des psudo_classes
par héritage
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
comme pre processeur avec
les Styles Multiples
en XML
lessc styles.less > styles.css
importation de
styles W3C.org
dans le navigateur avec
<script src="less.js"
type="text/javascript"> </script>
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
SASS
13/04/2015
Transparent 71
Lexique Sommaire
CSS : Méthodologie
Réfs
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
"Diviser pour ..." : plusieurs feuilles CSS pour séparer des niveaux ou
domaines de style: appli1 ,...,applin, fontes, layout, media, etc.
Réutiliser "autant que possible" vos CSS ou celles des autres (après
"validation")
Partir avec de bonnes fondations ("nettoyer le terrain")
Utiliser des CSS Conditionnelles
Méthodologie
/* nettoyer le terrain*/
le modèle de
*
{
boites
margin: 0;
padding: 0;
XML et CSS
border: 0;
les Styles Multiples }
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Techs
<!--[if lte IE 6]>
<link rel="stylesheet" href="/css/ie6_and_below.css"
type="text/css" media="screen" />
<![endif]-->
#left-content {
float: left;
margin-left: 10px;
}
Coder "défensif"
Eviter les "hacks"
Les bonnes habitudes:
Formater et colorer votre source
Commenter souvent, commenter "intelligent"
Tester, tester, et reTester
Lire le Web, mais "défensivement"
13/04/2015
#left-content {
float: left;
}
#left-content * {
margin-left: 10px;
}
Transparent 72
Lexique Sommaire
CSS : savoir-faire (sans script)
Cascading Style
Sheets
Syntaxe
les Sélecteurs
Méthodologie
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
Zones dédiées
Barres de Navigation
"Sticker" ou "PostIt"
XML et CSS
les Styles Multiples
en XML
Techs
Panneaux (fixes, relatifs, absolus) sans "table"
Cadres sans "frame", ni "iframe"
Widgets avec ":hover"
Menus (surgissants, déroulants, scrollants, arborescents, etc)
Boutons (pseudo-"radio")
Effets : "popup", loupe, zoom, etc.
class vs #id
le modèle de
boites
Réfs
Texte en multicolonnes
Génération de contenu et puces (numérotation)
Opacité
Onglets (avec CSS3:target)
Mode "Impression"
Page Web dédiées (multi-panneaux):
Explorateur: accès par index, listes, aperçus, et visualisation
Atelier de Développement: code source, visualisation, documentation
CSS 3 -moz
CSS 3 Tutoriaux
13/04/2015
Transparent 73
Lexique Sommaire
« Responsible » Web development
Cascading Style
Sheets
Syntaxe
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 -moz
CSS 3 Tutoriaux
LESS
extends CSS with dynamic behavior.
selectivizr.js
CSS adaptation for IE
CSS 3 norme
CSS 3 implementation
normalize.css
CSS resets for modern standards (HTML5)
Méthodologie
le modèle de
boites
Techs
jquery.js
modernizr.js
detects browser features
les Sélecteurs
class vs #id
Réfs
Yeoman, ANGULARJS, Bootstrap/, responsibleSlider.js
Joomla, Wordpress
Jquery UI jQuery UI is a curated set of user interface
interactions, effects, widgets, and themes built on top of
the jQuery JavaScript Library.
Foundation "The most advanced responsive
front-end framework in the world."
13/04/2015
Transparent 74
Lexique Sommaire
« Responsible » Fluid Design
Cascading Style
Sheets
Syntaxe
les Sélecteurs
class vs #id
Responsive web design (RWD) is a web design approach aimed at
crafting sites to provide an optimal viewing experience - easy reading
and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop computer monitors to
mobile phones).
Réfs
Techs
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
Fixed websites have a set width, and resizing the browser or viewing it on
different devices won’t affect on the way the website looks. This can
require horizontal scrolling and a site that doesn’t look good on tablets or
smartphones.
Fluid websites are built using percentages for widths. As a result,
columns are relative to one another and the browser, allowing it to scale
up and down fluidly
Adaptive websites introduce media queries to target specific device sizes,
like smaller monitors, tablets, and mobile.
Responsive websites are built on a fluid grid and use media queries to
control the design and its content as it scales down or up with the
browser or device.
.
13/04/2015
Transparent 75
Lexique Sommaire
CSS : Une galerie Photo sous DW
Cascading Style
Sheets
Techs
Syntaxe
les Sélecteurs
class vs #id
Méthodologie
le modèle de
boites
XML et CSS
les Styles Multiples
en XML
importation de
styles W3C.org
CSS2 Références
des propriétés
CSS 3 norme
Réfs
Développement par étapes sous DW
<div > <span> <table>
#id et .classe en position absolue
Areas
MAIN
HEAD
NAVIGATION
Liens
internes (ancres)
externes (hyperliens)
Menus & Boutons
Images
XSL
Effets CSS
version XML+XSL
CSS
CSS
CSS
CSS 3 implementation
CSS 3 -moz
CSS 3 Tutoriaux
version "Doc Exemples"
13/04/2015
Transparent 76