Upload
esmee-salles
View
111
Download
2
Embed Size (px)
Citation preview
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
3303:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013
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
4403:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013
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
5503:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013
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
6603:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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
7703:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
Ajouter du style à un document HTMLAjouter du style à un document HTML
Dans le documentDans le document <<headhead>>
<<style style typetype=="text/css""text/css">>
<!--<!--
Mon styleMon style
-->-->
</</stylestyle>>
Fichier externeFichier externe<<headhead>>
<<linklink hrefhref==""URL_fichier_CSSURL_fichier_CSS"" relrel=="stylesheet""stylesheet" typetype=="text/css""text/css">>
8803:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
Feuille de styleFeuille de style
sélecteursélecteur {{
propriétépropriété : : valeurvaleur ; ;
[ [ propriétépropriété : : valeurvaleur ; ] ; ]
… …
/* Commentaire *//* Commentaire */
}}
pp {{
colorcolor : : blueblue ; ;
}}
9903:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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>>
101003:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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>>
<<style style typetype=="text/css""text/css">>
<!—<!—
htmlhtml {{ font-sizefont-size :: 150%150% ;; }}
-->-->
</</stylestyle>> </</headhead>> <<bodybody>> Salut !Salut !<<pp>>Salut !Salut !</</pp>> </</bodybody>></</htmlhtml>>
111103:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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>>
<<style style typetype=="text/css""text/css">>
<!—<!—
bodybody {{ font-sizefont-size :: 150%150% ;; }}
pp {{ colorcolor :: redred ;; }}
-->-->
</</stylestyle>> </</headhead>> <<bodybody>> Salut !Salut !<<pp>>Salut !Salut !</</pp>> </</bodybody>></</htmlhtml>>
121203:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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>>
<<style style typetype=="text/css""text/css">>
<!—<!—
htmlhtml {{ font-sizefont-size :: 150%150% ;; }}
pp {{ font-sizefont-size :: 150%150% ;; }}
-->-->
</</stylestyle>> </</headhead>> <<bodybody>> Salut !Salut !<<pp>>Salut !Salut !</</pp>> </</bodybody>></</htmlhtml>>
131303:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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
141403:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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
151503:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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
161603:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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'
171703:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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 : %%
181803:24:5203:24:52 Programmation Web 2012-2013Programmation Web 2012-2013
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\''
191903:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
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 ; ;
202003:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
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
212103:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
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
222203:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
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
232303:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
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
242403:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
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>>
252503:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
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
262603:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
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>>
272703:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
Ouvrons la boîteOuvrons la boîte
282803:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
<!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'>>
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>>
<<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>>
Ouvrons la boîteOuvrons la boîte
292903:24:5303:24:53 Programmation Web 2012-2013Programmation Web 2012-2013
<!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'>> ** {{ 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>>
<<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>>
display : blockdisplay : block
display : inlinedisplay : inline
Ouvrons la boîteOuvrons la boîte
303003:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
<!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'>> ** {{ 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>>
<<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>>
display : inlinedisplay : inline
display : blockdisplay : block
Autour de et dans la boîteAutour de et dans la boîte
313103:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
<!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>>
Autour de et dans la boîteAutour de et dans la boîte
323203:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; marginmargin : : 20px20px ; ; }} 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>>
Autour de et dans la boîteAutour de et dans la boîte
333303:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; marginmargin : : 20px20px ; ; paddingpadding : : 20px20px ; ; }} 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>>
Autour de et dans la boîteAutour de et dans la boîte
343403:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; marginmargin : : 20px20px ; ; paddingpadding : : 20px20px ; ; }} divdiv.enfant.enfant {{ marginmargin : : 20px20px ; ;
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>>
Autour de et dans la boîteAutour de et dans la boîte
353503:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; 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>>
<<divdiv idid=='parent''parent'>> <<divdiv classclass=='enfant''enfant'>>aa</</divdiv>> <<divdiv classclass=='enfant''enfant'>>bb</</divdiv>> </</divdiv>> </</bodybody>></</htmlhtml>>
Les boîtes qui flottentLes boîtes qui flottent
363603:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013
<!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>>
Les boîtes qui flottentLes boîtes qui flottent
373703:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; 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>>
<<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>>
Les boîtes qui flottentLes boîtes qui flottent
383803:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; 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>>
<<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>>
Les boîtes qui flottentLes boîtes qui flottent
393903:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} </</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>>
Les boîtes qui flottentLes boîtes qui flottent
404003:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; floatfloat : : leftleft ; ; heightheight : : 8em8em ; ; }} </</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>>
Les boîtes qui flottent et les autresLes boîtes qui flottent et les autres
414103:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
<!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>>
Les boîtes qui flottent et les autresLes boîtes qui flottent et les autres
424203:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; 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>>
<<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>>
Les boîtes qui flottent et les autresLes boîtes qui flottent et les autres
434303:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; 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>>
<<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>>
Les boîtes qui flottent et les autresLes boîtes qui flottent et les autres
444403:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
<!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 ; ; 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>>
<<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>>
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
454503:24:5503:24:55 Programmation Web 2012-2013Programmation Web 2012-2013
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>
464603:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
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>
474703:24:5603:24:56 Programmation Web 2012-2013Programmation Web 2012-2013
300px300px
50px50px
50px50px