11:06:28 Programmation Web 2012-2013 1 Programmation Web : Feuilles de style CSS Jérôme CUTRONA [email protected]

03:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013 11

Programmation Web :Programmation Web :Feuilles de style CSSFeuilles de style CSS

Jérôme CUTRONAJérôme CUTRONA

[email protected]@univ-reims.fr

2203:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013

Mise en forme d’un document HTMLMise en forme d’un document HTML

Base de HTML :Base de HTML : Documents : fond, peu de mise en formeDocuments : fond, peu de mise en forme

Mise en forme des débutsMise en forme des débuts Couleurs, alignements, …, décrits dans les balisesCouleurs, alignements, …, décrits dans les balises Texte transformé en imageTexte transformé en image Images pour gérer les espacementsImages pour gérer les espacements Tableaux utilisés à outranceTableaux utilisés à outrance

Mise en forme figée, très lourde à modifierMise en forme figée, très lourde à modifierMise en forme peu portableMise en forme peu portablePages complexesPages complexesNécessité d’une méthode alternativeNécessité d’une méthode alternative


CSS : Cascading Style SheetsCSS : Cascading Style Sheets

Positionnement flexible des styles:Positionnement flexible des styles: Fichier séparéFichier séparé Au début du documentAu début du document Dans les balises à mettre en formeDans les balises à mettre en forme

Héritage et cascadeHéritage et cascade Dépendance au médiaDépendance au média

Écran, imprimante, Braille, …Écran, imprimante, Braille, …

Styles alternatifsStyles alternatifs Rendu plus rapide que mise en forme historiqueRendu plus rapide que mise en forme historique Modification de style très aiséeModification de style très aisée


Modification de style très aiséeModification de style très aisée

Exemple de deux feuilles de styles appliquées Exemple de deux feuilles de styles appliquées au même document HTMLau même document HTML


Appliquer un style à un élémentAppliquer un style à un élément

Appliquer à une baliseAppliquer à une balise Redéfinir le style de toutes les instances d’une baliseRedéfinir le style de toutes les instances d’une balise

Selon les liens de parentéSelon les liens de parenté Descendant, enfant, …Descendant, enfant, …

Pseudo-classesPseudo-classes Liées à l’état de l’élémentLiées à l’état de l’élément

En fonction des attributs de l’élémentEn fonction des attributs de l’élément Valeur de l’attributValeur de l’attribut Attribut Attribut classclass: Affecter des éléments à la classe ?: Affecter des éléments à la classe ?

Élément identifiéÉlément identifié Identifier un élément HTML ?Identifier un élément HTML ?

Vision basique de la Vision basique de la mise en formemise en formeRelations entre Relations entre

structure du structure du document et mise document et mise

en forme !en forme !Vision légèrement Vision légèrement

dynamique et dynamique et contextuellecontextuelle

Affiner la vision Affiner la vision basique de la mise basique de la mise

en formeen forme

Affiner la vision Affiner la vision basique de la mise basique de la mise

en formeen forme


Classe, identification et descriptionClasse, identification et description

Affecter une balise à une classeAffecter une balise à une classe Attribut Attribut classclass <<p p classclass==""ma_classema_classe"">>

Donner un identifiant à une baliseDonner un identifiant à une balise Attribut Attribut idid Identifiant doit être unique (charge du concepteur)Identifiant doit être unique (charge du concepteur) <<p p idid==""mon_id_uniquemon_id_unique"">>

Décrire un élémentDécrire un élément Attribut Attribut titletitle pour la plupart des éléments HTML pour la plupart des éléments HTML Texte affiché sous forme d’info-bulle (tooltip)Texte affiché sous forme d’info-bulle (tooltip)

Sous-groupe de Sous-groupe de l'ensemble des l'ensemble des balises balises <<pp>>

Une balise Une balise <<pp>> repérée de façon repérée de façon

uniqueunique


Ajouter du style à un document HTMLAjouter du style à un document HTML

Dans le documentDans le document <<headhead>>

<<style style typetype=="text/css""text/css">>

-->

</</stylestyle>>

Fichier externeFichier externe<<headhead>>

<<linklink hrefhref==""URL_fichier_CSSURL_fichier_CSS"" relrel=="stylesheet""stylesheet" typetype=="text/css""text/css">>


Feuille de styleFeuille de style

sélecteursélecteur {{

propriétépropriété : : valeurvaleur ; ;

[ [ propriétépropriété : : valeurvaleur ; ] ; ]

… …

/* Commentaire *//* Commentaire */

}}

pp {{

colorcolor : : blueblue ; ;

}}


HéritageHéritage

Relations Parent - Enfant :Relations Parent - Enfant :

<<htmlhtml>> parent de parent de <<bodybody>> parent de parent de <<pp>> <<pp>> hérite de hérite de <<bodybody>> hérite de hérite de <<htmlhtml>> L'enfant hérite des propriétés de ses parentsL'enfant hérite des propriétés de ses parents

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">><<htmlhtml>> <<headhead>> <<titletitle>>Ma première page WebMa première page Web</</titletitle>> </</headhead>> <<bodybody>> <<pp>>Salut !Salut !</</pp>> </</bodybody>></</htmlhtml>>

http://www.w3.org/TR/html4/strict.dtd%22



HéritageHéritage

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">><<htmlhtml>> <<headhead>> <<titletitle>>Ma première page WebMa première page Web</</titletitle>>


<!—<!—

htmlhtml {{ font-sizefont-size :: 150%150% ;; }}

-->-->

</</stylestyle>> </</headhead>> <<bodybody>> Salut !Salut !<<pp>>Salut !Salut !</</pp>> </</bodybody>></</htmlhtml>>




HéritageHéritage



<!—<!—

bodybody {{ font-sizefont-size :: 150%150% ;; }}

pp {{ colorcolor :: redred ;; }}

-->-->





HéritageHéritage



<!—<!—

htmlhtml {{ font-sizefont-size :: 150%150% ;; }}

pp {{ font-sizefont-size :: 150%150% ;; }}

-->-->





Sélecteurs CSSSélecteurs CSS

MotifMotif SignificationSignification

* * Tout élément.Tout élément.

E E Tout élément Tout élément EE (un élément de type (un élément de type EE).).

E F E F Tout élément Tout élément FF descendant d’un élément descendant d’un élément EE

E > F E > F Tout élément Tout élément FF enfant d’un élément enfant d’un élément EE

E:first-child E:first-child Un élément Un élément EE premier enfant de son parent premier enfant de son parent

E:linkE:linkE:visited E:visited

L’élément L’élément EE, ancre source d’un hyperlien, lorsque la cible , ancre source d’un hyperlien, lorsque la cible n’est pas visitée (n’est pas visitée (:link:link) ou déjà visitée () ou déjà visitée (:visited:visited))

E:activeE:activeE:hoverE:hoverE:focus E:focus

L’élément L’élément EE durant certaines actions de l’utilisateur : durant certaines actions de l’utilisateur :est actif, est survolé, a le focus.est actif, est survolé, a le focus.

E:lang(E:lang(LL) ) Un élément Un élément EE s’il emploie la langue s’il emploie la langue LL

IEIE

IEIE


Sélecteurs CSSSélecteurs CSS

MotifMotif SignificationSignification

E + F E + F Un élément F immédiatement précédé par un élément E. Un élément F immédiatement précédé par un élément E. E et F ont le même parent.E et F ont le même parent.

E[E[foofoo] ] Tout élément E avec l’attribut Tout élément E avec l’attribut foo foo (peu importe la valeur). (peu importe la valeur).

E[E[foofoo="="valval"]"] Tout élément E dont l’attribut Tout élément E dont l’attribut foo foo à la valeur à la valeur valval. .

E[E[foofoo~="~="valval"]"]Tout élément E dont l’attribut Tout élément E dont l’attribut foofoo est une liste de valeurs est une liste de valeurs séparées par des blancs et dont une à la valeur séparées par des blancs et dont une à la valeur valval. .

E[lang|="en"] E[lang|="en"] Tout élément E dont l’attribut Tout élément E dont l’attribut langlang est une liste de valeurs est une liste de valeurs séparées par des tirets, celle-ci commençant par séparées par des tirets, celle-ci commençant par valval. .

E.E.valval Spécifique à HTML.Spécifique à HTML. Identique à Identique à E[class~="E[class~="valval"]"]

E#E#mon_idmon_id Tout élément E dont l’ID est Tout élément E dont l’ID est mon_idmon_id. .

IEIE

IEIE

IEIE

IEIE


Exemple de sélecteurs courantsExemple de sélecteurs courants

pp : toutes les balises p : toutes les balises p

b, u, ib, u, i : les balises b, u et i : les balises b, u et i

p bp b : les balises b dans une balise p : les balises b dans une balise p

a:link:hovera:link:hover : les ancres sources (d'un lien) : les ancres sources (d'un lien) non visitées lors de leur survolnon visitées lors de leur survol

p:first-letterp:first-letter : Première lettre des : Première lettre des paragraphesparagraphes


Exemple de sélecteurs courantsExemple de sélecteurs courants

div.div.ma_classema_classe : les balises : les balises divdiv dont l’attribut dont l’attribut classclass contient au moins contient au moins ma_classema_classe

..ma_classema_classe : les balises dont l’attribut : les balises dont l’attribut classclass contient au moins contient au moins ma_classema_classe

div#div#mon_idmon_id : la balise : la balise divdiv dont l’attribut dont l’attribut idid est est mon_idmon_id

ul.menu liul.menu li : Les items des listes à puces : Les items des listes à puces appartenant à la classe 'menu' appartenant à la classe 'menu'


Valeurs des propriétésValeurs des propriétés

Taille de police :Taille de police : xx-smallxx-small, , x-smallx-small, , smallsmall, , mediummedium, , largelarge, , x-x-largelarge, , xx-largexx-large

Métrique :Métrique : inin : pouce (25,4 mm), : pouce (25,4 mm), cmcm, , mmmm ptpt : point (1/72 : point (1/72ee de pouce) de pouce) pcpc : pica (12 points) : pica (12 points)

Pixels : Pixels : pxpx Relatif à la taille de la police : Relatif à la taille de la police : emem Pourcentage : Pourcentage : %%


Valeurs des propriétésValeurs des propriétés

URI :URI : url("mon_uri") url("mon_uri") Couleurs :Couleurs :

blackblack, , whitewhite, , orangeorange, , yellowyellow, , greengreen, , redred, , …… #RRGGBB #RRGGBB (00(00FF) , FF) , #RGB #RGB ≡ ≡ #RRGGBB#RRGGBB rgb(red,green,blue)rgb(red,green,blue) (0 (0255)255) rgb(red%,green%,blue%)rgb(red%,green%,blue%) (0 (0100%)100%)

Chaînes de caractères :Chaînes de caractères : "chaîne 'bonjour'" "chaîne 'bonjour'" "chaîne \"bonjour\"""chaîne \"bonjour\"" 'chaîne "bonjour"''chaîne "bonjour"' 'chaîne \'bonjour\'''chaîne \'bonjour\''


Exemples de propriétésExemples de propriétés

colorcolor : : blueblue ; ;

font-sizefont-size : : 12pt12pt ; ;

font-weightfont-weight : : boldbold ; ;

list-style-typelist-style-type : : squaresquare ; ;

margin-topmargin-top : : 20px20px ; ;

padding-leftpadding-left : : 3em3em ; ;

text-aligntext-align : : justifyjustify ; ;

text-decorationtext-decoration : : nonenone ; ;

visibilityvisibility : : hiddenhidden ; ;


Cascade de feuilles de styleCascade de feuilles de style

Origine des feuilles de style :Origine des feuilles de style : auteurauteur utilisateurutilisateur agent utilisateuragent utilisateur

Règles de priorité :Règles de priorité : Tri par médiaTri par média Tri par origineTri par origine

agent utilisateuragent utilisateur utilisateurutilisateur auteurauteur auteur (!important)auteur (!important) utilisateur (!important)utilisateur (!important)

Ordre d'applicationOrdre d'applicationÉcrasement des précédentsÉcrasement des précédents


Cascade de feuilles de styleCascade de feuilles de style

Règles de priorité (suite) :Règles de priorité (suite) : Tri par priorité (spécificité)Tri par priorité (spécificité)

4 chiffres calculés pour chaque sélecteur (A,B,C,D)4 chiffres calculés pour chaque sélecteur (A,B,C,D) A=1 si attribut style (A=1 si attribut style (<<pp stylestyle=="…""…">>)) Si A==0, B=nombre d'Si A==0, B=nombre d'idid dans le sélecteur dans le sélecteur #ident { … }#ident { … } Si A==0, C=nombre de Si A==0, C=nombre de classclass dans le sélecteur dans le sélecteur

.ma_classe { … }.ma_classe { … } Si A==0, D=nombre de balises et pseudo-éléments dans le Si A==0, D=nombre de balises et pseudo-éléments dans le

sélecteursélecteurp bp b aa::hover { … }hover { … }

Tri par ordre d'apparitionTri par ordre d'apparition ordre des feuilles de styleordre des feuilles de style ordre des styles incorporésordre des styles incorporés


Dépendance au médiaDépendance au média

Types :Types : all : tousall : tous braille : système tactilebraille : système tactile embossed : imprimante brailleembossed : imprimante braille handheld : système portablehandheld : système portable print : imprimanteprint : imprimante projection : système deprojectionprojection : système deprojection screen : moniteurscreen : moniteur speech : synthétiseur vocalspeech : synthétiseur vocal tty : terminal textetty : terminal texte tv : télévisiontv : télévision


Dépendance au médiaDépendance au média

Spécifier un média :Spécifier un média :

@media @media media1media1[, [, media2media2] {] {

/* feuille de style *//* feuille de style */

}}

@import url("@import url("url_cssurl_css") [") [media1 media1 [,[,media2media2]] ;]] ;

Modèle de boîtesModèle de boîtes

Tous les éléments HTML/XHTML sont Tous les éléments HTML/XHTML sont considérés comme des boîtesconsidérés comme des boîtes

Les deux grands modes d’affichage des boîtes Les deux grands modes d’affichage des boîtes sont :sont : Le mode ligne (display : inline)Le mode ligne (display : inline) Le mode bloc (display : block)Le mode bloc (display : block)

La taille finale des boîtes dépend de :La taille finale des boîtes dépend de : TailleTaille RemplissagesRemplissages BordsBords MargesMarges


Point sur les boîtesPoint sur les boîtes

<<htmlhtml><><headhead><><titletitle></></titletitle>><<stylestyle typetype=='text/css''text/css'>>body body { { background-color : background-color : blue ;blue ; }}#a {#a { background-color : background-color : red ;red ; border : solid border : solid 25px green ;25px green ; width : width : 200px ;200px ; height : height : 300px ;300px ; padding : padding : 100px ;100px ; margin : margin : 70px ; 70px ; }}#a #a div div { { width : width : 100% ;100% ; height : height : 100% ;100% ; border : border : 1px 1px solid solid black ;black ; background-color : background-color : white ; white ; }}#b { #b { background-color : background-color : white ;white ; }}</</stylestyle> </> </headhead> <> <bodybody>><<divdiv idid=='a''a'><><divdiv>>div testdiv test</</divdiv>></</divdiv>><<divdiv idid=='b''b'>>après div après div estest</</divdiv>></</bodybody> </> </htmlhtml>>


largeur, hauteurlargeur, hauteur= width, height= width, height

marge internemarge interne= padding= padding

marge externemarge externe= margin= margin

bordbord= border= border

Point sur les boîtesPoint sur les boîtes

marginmargin top, bottom, left, righttop, bottom, left, right

borderborder top, bottom, left, righttop, bottom, left, right

paddingpadding top, bottom, left, righttop, bottom, left, right


Source : www.w3.orgSource : www.w3.org

Ouvrons la boîteOuvrons la boîte

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">"><<htmlhtml>> <<headhead>> <<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">>

<<stylestyle typetype=='text/css''text/css'>>

</</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead>> <<bodybody>>

<<divdiv classclass=='mon_div''mon_div'>> <<pp>>Tout n'est que Tout n'est que <<strongstrong>>boîteboîte</</strongstrong>>.. <<emem>>La compréhension des mécanismes de boîtesLa compréhension des mécanismes de boîtes est la est la <<spanspan>>cléclé</</spanspan>> de la mise en forme de la mise en forme des éléments structurés de la page Webdes éléments structurés de la page Web</</emem></></pp>> </</divdiv>> </</bodybody>></</htmlhtml>>


http://www.w3.org/TR/html4/loose.dtd




<<stylestyle typetype=='text/css''text/css'>>

bodybody { { font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }}

</</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead>> <<bodybody>>






<<stylestyle typetype=='text/css''text/css'>> ** {{ borderborder :: solid 20px red solid 20px red ; ; }} bodybody { { font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; border-colorborder-color : : purplepurple ; ; }} divdiv {{ border-colorborder-color : : blueblue ; ; }} pp {{ border-colorborder-color : : greengreen ; ; }} strongstrong {{ border-colorborder-color : : yellowyellow ; ; }} emem {{ border-colorborder-color : : blackblack ; ; }} spanspan {{ border-colorborder-color : : graygray ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead>> <<bodybody>>


display : blockdisplay : block

display : inlinedisplay : inline





<<stylestyle typetype=='text/css''text/css'>> ** {{ borderborder :: solid 20px red solid 20px red ; ; }} bodybody { { font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; border-colorborder-color : : purplepurple ; ; }} divdiv {{ border-colorborder-color : : blueblue ; ; }} pp {{ border-colorborder-color : : greengreen ; ; }} strongstrong {{ border-colorborder-color : : yellowyellow ; ; }} emem {{ border-colorborder-color : : blackblack ; ; displaydisplay : : blockblock ; ; }} spanspan {{ border-colorborder-color : : graygray ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead>> <<bodybody>>


display : inlinedisplay : inline

display : blockdisplay : block


Autour de et dans la boîteAutour de et dans la boîte


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtd">"><<htmlhtml>> <<headhead>> <<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">>

<<stylestyle typetype=='text/css''text/css'>> ** {{ marginmargin : : 00 ; ; paddingpadding : : 00 ; ; borderborder : : solidsolid 20px20px redred ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; border-colorborder-color : : purplepurple ; ; }} divdiv#parent#parent {{ border-colorborder-color : : blueblue ; ;

}} divdiv.enfant.enfant {{

border-colorborder-color : : greengreen ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>

<<divdiv idid=='parent''parent'>> <<divdiv classclass=='enfant''enfant'>>aa</</divdiv>> <<divdiv classclass=='enfant''enfant'>>bb</</divdiv>> </</divdiv>> </</bodybody>></</htmlhtml>>




<<stylestyle typetype=='text/css''text/css'>> ** {{ marginmargin : : 00 ; ; paddingpadding : : 00 ; ; borderborder : : solidsolid 20px20px redred ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; border-colorborder-color : : purplepurple ; ; }} divdiv#parent#parent {{ border-colorborder-color : : blueblue ; ; marginmargin : : 20px20px ; ; }} divdiv.enfant.enfant {{






<<stylestyle typetype=='text/css''text/css'>> ** {{ marginmargin : : 00 ; ; paddingpadding : : 00 ; ; borderborder : : solidsolid 20px20px redred ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; border-colorborder-color : : purplepurple ; ; }} divdiv#parent#parent {{ border-colorborder-color : : blueblue ; ; marginmargin : : 20px20px ; ; paddingpadding : : 20px20px ; ; }} divdiv.enfant.enfant {{






<<stylestyle typetype=='text/css''text/css'>> ** {{ marginmargin : : 00 ; ; paddingpadding : : 00 ; ; borderborder : : solidsolid 20px20px redred ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; border-colorborder-color : : purplepurple ; ; }} divdiv#parent#parent {{ border-colorborder-color : : blueblue ; ; marginmargin : : 20px20px ; ; paddingpadding : : 20px20px ; ; }} divdiv.enfant.enfant {{ marginmargin : : 20px20px ; ;






<<stylestyle typetype=='text/css''text/css'>> ** {{ marginmargin : : 00 ; ; paddingpadding : : 00 ; ; borderborder : : solidsolid 20px20px redred ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; border-colorborder-color : : purplepurple ; ; }} divdiv#parent#parent {{ border-colorborder-color : : blueblue ; ; marginmargin : : 20px20px ; ; paddingpadding : : 20px20px ; ; }} divdiv.enfant.enfant {{ marginmargin : : 20px20px ; ; paddingpadding : : 20px20px ; ; border-colorborder-color : : greengreen ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>


Les boîtes qui flottentLes boîtes qui flottent


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtd">"><<htmlhtml> <> <headhead>>

<<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">> <<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; }} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>

<<divdiv idid=='parent''parent'>> <<divdiv classclass=='enfant''enfant' idid=='enfant1''enfant1'>>aaaaaaaaaaaaaaaaaaaa</</divdiv>> <<divdiv classclass=='enfant''enfant' idid=='enfant2''enfant2'>>bbbbbbbbbbbbbbbbbbbb</</divdiv>> <<divdiv classclass=='enfant''enfant' idid=='enfant3''enfant3'>>cccccccccccccccccccc</</divdiv>> </</divdiv>> </</bodybody>></</htmlhtml>>




<<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">> <<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>





<<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">> <<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; }} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>





<<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">> <<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; }} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>





<<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">> <<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; }} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>


Les boîtes qui flottent et les autresLes boîtes qui flottent et les autres



<<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ;

}} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>





<<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>





<<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; clearclear : : leftleft ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>





<<stylestyle typetype=='text/css''text/css'>> divdiv {{ borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} #enfant2#enfant2 {{ border-colorborder-color : : greengreen ; ; }} #enfant3#enfant3 {{ border-colorborder-color : : blueblue ; ; clearclear : : leftleft ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead> <> <bodybody>>


Quirks ModeQuirks Mode

Mode de rendu des nouveau navigateurs Mode de rendu des nouveau navigateurs lorsqu’ils tentent de rester compatibles avec les lorsqu’ils tentent de rester compatibles avec les erreurs du passéerreurs du passé

Mode déclenché en fonction de la DTDMode déclenché en fonction de la DTD DTD complète DTD complète mode de rendu normal mode de rendu normal DTD partielle ou absente DTD partielle ou absente mode de rendu dégradé mode de rendu dégradé

Importance de fixer correctement la DTD !Importance de fixer correctement la DTD ! Différences entre les modes :Différences entre les modes :

Taille des boîtesTaille des boîtes Alignements verticauxAlignements verticaux Héritage des polices dans les tableauxHéritage des polices dans les tableaux


Quirks Mode : exemple normalQuirks Mode : exemple normal

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtdhttp://www.w3.org/TR/html4/loose.dtd">"><<htmlhtml>> <<headhead>>

<<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">> <<stylestyle typetype=='text/css''text/css'>> divdiv {{ marginmargin : : 00 ; ; paddingpadding : : 00 ; ; borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; backgroundbackground : : no-repeat no-repeat url(url('fond.png''fond.png')) centercenter center center ;; heightheight : : 300px300px ; ; widthwidth : : 300px300px ; ; marginmargin : : 20px20px ; ; paddingpadding : : 60px60px ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead>> <<bodybody>>

<<divdiv idid=='parent''parent'>> <<divdiv classclass=='enfant''enfant' idid=='enfant1''enfant1'>>aaaaaaaaaaaaaaaaaaaa</</divdiv>> </</divdiv>> </body></html>


300px300px

50px50px

50px50px

Quirks Mode : exemple dégradéQuirks Mode : exemple dégradé

<<htmlhtml>> <<headhead>>

<<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">> <<stylestyle typetype=='text/css''text/css'>> divdiv {{ marginmargin : : 00 ; ; paddingpadding : : 00 ; ; borderborder : : solidsolid 20px20px purplepurple ; ; }} bodybody {{ font-sizefont-size : : 2em2em ; ; line-heightline-height : : 2.5em2.5em ; ; }} #enfant1#enfant1 {{ border-colorborder-color : : redred ; ; backgroundbackground : : no-repeat no-repeat url(url('fond.png''fond.png')) centercenter center center ;; heightheight : : 300px300px ; ; widthwidth : : 300px300px ; ; marginmargin : : 20px20px ; ; paddingpadding : : 60px60px ; ; }} </</stylestyle>> <<titletitle>>Une boîte pour les gouverner tousUne boîte pour les gouverner tous</</titletitle>> </</headhead>> <<bodybody>>

<<divdiv idid=='parent''parent'>> <<divdiv classclass=='enfant''enfant' idid=='enfant1''enfant1'>>aaaaaaaaaaaaaaaaaaaa</</divdiv>> </</divdiv>> </body></html>


300px300px

50px50px

50px50px