Vous êtes sur la page 1sur 47

WW

Programmation Web :
Feuilles de style CSS
AMALOU Warda

W
Master 2
Réseaux et Télécommunications

Année universitaire : 2019-2020 1


Mise en forme d’un document HTML

 Base de HTML :

W
 Documents : fond, peu de mise en forme
 Mise en forme des débuts
 Couleurs, alignements, …, décrits dans les balises

W
 Texte transformé en image
 Images pour gérer les espacements
 Tableaux utilisés à outrance

W
Mise en forme figée, très lourde à modifier
Mise en forme peu portable
Pages complexes
Nécessité d’une méthode alternative
2
CSS : Cascading Style Sheets

 Positionnement flexible des styles:

W
 Fichier séparé
 Au début du document
 Dans les balises à mettre en forme

W
 Héritage et cascade
 Dépendance au média
Écran, imprimante, Braille, …

W

 Styles alternatifs
 Rendu plus rapide que mise en forme historique
 Modification de style très aisée
3
Modification de style très aisée
 Exemple de deux feuilles de styles appliquées

W
au même document HTML

WW
4
Appliquer un style à un élément

 Appliquer à une balise

W
Redéfinir le style de toutes les instances d’une balise
 Selon les liens de parenté Vision basique de la
mise en forme
 Descendant, enfant, …

W
Relations entre
 Pseudo-classes structure du
 Liées à l’état de l’élément document et mise
Vision légèrement
en forme !et
 En fonction des attributs de l’élément
dynamique

W
Valeur de l’attribut contextuelle
Affiner la vision
Affiner de
 Attribut class: Affecter des éléments
basique la
à vision
la
la classe
mise ?
basique de la mise
 Élément identifié en forme
en forme
 Identifier un élément HTML ?
5
Classe, identification et description

 Affecter une balise à une classe

W
 Attribut class
 <p class="ma_classe">
 Donner un identifiant à une balise
Sous-groupe de

W
 Attribut id l'ensemble des
 Identifiant doit être unique (chargebalises <p>
du concepteur)
 <p id="mon_id_unique">

W
 Décrire un élément Une balise <p>
 Attribut title pour la plupartrepérée
des éléments
de façonHTML
 Texte affiché sous forme d’info-bulle
unique
(tooltip)

6
Ajouter du style à un document HTML

 Dans le document

W
<head>
<style type="text/css">
<!--
Mon style


-->

W
</style>

W
Fichier externe
<head>
<link href="URL_fichier_CSS"
rel="stylesheet" type="text/css">

7
Feuille de style

sélecteur {

W
propriété : valeur ;
[ propriété : valeur ; ]

p {

} WW
/* Commentaire */

color : blue ;

8
Héritage

 Relations Parent - Enfant :

W
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ma première page Web</title>

W
</head>
<body>
<p>Salut !</p>
</body>
</html>

W
 <html> parent de <body> parent de <p>
 <p> hérite de <body> hérite de <html>
 L'enfant hérite des propriétés de ses parents
9
Héritage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

W
<html>
<head>
<title>Ma première page Web</title>
<style type="text/css">

W
<!—
html { font-size : 150% ; }
-->

W
</style>
</head>
<body>
Salut !<p>Salut !</p>
</body>
</html>

10
Héritage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

W
<html>
<head>
<title>Ma première page Web</title>
<style type="text/css">

W
<!—
body { font-size : 150% ; }
p { color : red ; }

W
-->
</style>
</head>
<body>
Salut !<p>Salut !</p>
</body>
</html>
11
Héritage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

W
<html>
<head>
<title>Ma première page Web</title>
<style type="text/css">

W
<!—
html { font-size : 150% ; }
p { font-size : 150% ; }

W
-->
</style>
</head>
<body>
Salut !<p>Salut !</p>
</body>
</html>
12
Sélecteurs CSS

Motif Signification

W
* Tout élément.
E Tout élément E (un élément de type E).
E F Tout élément F descendant d’un élément E

W
E > F IE Tout élément F enfant d’un élément E
IE
E:first-child Un élément E premier enfant de son parent
E:link L’élément E, ancre source d’un hyperlien, lorsque la cible
E:visited n’est pas visitée (:link) ou déjà visitée (:visited)

W
E:active
L’élément E durant certaines actions de l’utilisateur :
E:hover
E:focus

IE
IE
est actif, est survolé, a le focus.

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

13
Sélecteurs CSS

Motif Signification

W
E + F  IE
IE
Un élément F immédiatement précédé par un élément E.
E et F ont le même parent.
E[foo] 
IE Tout élément E avec l’attribut foo (peu importe la valeur).
IE

W
E[foo="val"] IE
IE Tout élément E dont l’attribut foo à la valeur val.

Tout élément E dont l’attribut foo est une liste de valeurs


E[foo~="val"]
IE
IE 
séparées par des blancs et dont une à la valeur val.

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

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

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

14
Exemple de sélecteurs courants

p : toutes les balises p

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

p b : les balises b dans une balise p

a:link:hover : les ancres sources (d'un lien)

W
non visitées lors de leur survol

p:first-letter : Première lettre des


paragraphes
15
Exemple de sélecteurs courants

div.ma_classe : les balises div dont l’attribut

W
class contient au moins ma_classe

.ma_classe : les balises dont l’attribut class

W
contient au moins ma_classe

div#mon_id : la balise div dont l’attribut id est

W
mon_id

ul.menu li : Les items des listes à puces


appartenant à la classe 'menu'
16
Valeurs des propriétés

 Taille de police :

W
 xx-small, x-small, small, medium, large, x-
large, xx-large
 Métrique :

W
 in : pouce (25,4 mm), cm, mm
 pt : point (1/72e de pouce)
 pc : pica (12 points)

W
 Pixels : px
 Relatif à la taille de la police : em
 Pourcentage : %

17
Valeurs des propriétés

 URI : url("mon_uri")

W
 Couleurs :
 black, white, orange, yellow, green, red, …
 #RRGGBB (00FF) , #RGB ≡ #RRGGBB

W
 rgb(red,green,blue) (0255)
 rgb(red%,green%,blue%) (0100%)
 Chaînes de caractères :

W
 "chaîne 'bonjour'"
 "chaîne \"bonjour\""
 'chaîne "bonjour"'
 'chaîne \'bonjour\''
18
Exemples de propriétés

color : blue ;

W
font-size : 12pt ;
font-weight : bold ;
list-style-type : square ;

W
margin-top
padding-left

W
text-align
text-decoration
visibility
:
:
:
:
:
20px ;
3em ;
justify ;
none ;
hidden ;

19
Cascade de feuilles de style

 Origine des feuilles de style :

W
 auteur
 utilisateur
 agent utilisateur

W
 Règles de priorité :
 Tri par média
 Tri par origine

W
 agent utilisateur
 utilisateur Ordre d'application
 auteur Écrasement des précédents
 auteur (!important)
 utilisateur (!important)
20
Cascade de feuilles de style

 Règles de priorité (suite) :

W
 Tri par priorité (spécificité)
 4 chiffres calculés pour chaque sélecteur (A,B,C,D)
 A=1 si attribut style (<p style="…">)

W
 Si A==0, B=nombre d'id dans le sélecteur #ident { … }
 Si A==0, C=nombre de class dans le sélecteur
.ma_classe { … }
 Si A==0, D=nombre de balises et pseudo-éléments dans le

W
sélecteur
p b a:hover { … }
 Tri par ordre d'apparition
 ordre des feuilles de style
 ordre des styles incorporés
21
Dépendance au média

 Types :

W
 all : tous
 braille : système tactile
 embossed : imprimante braille

W
 handheld : système portable
 print : imprimante
 projection : système deprojection

W
 screen : moniteur
 speech : synthétiseur vocal
 tty : terminal texte
 tv : télévision
22
Dépendance au média

 Spécifier un média :

} W
@media media1[, media2] {
/* feuille de style */

W
W
@import url("url_css") [media1
[,media2]] ;

23
Modèle de boîtes
 Tous les éléments HTML/XHTML sont

W
considérés comme des boîtes
 Les deux grands modes d’affichage des boîtes
sont :

W
 Le mode ligne (display : inline)
 Le mode bloc (display : block)
 La taille finale des boîtes dépend de :

W
 Taille
 Remplissages
 Bords
 Marges
24
Point sur les boîtes
<html><head><title></title>
<style type='text/css'>

W
largeur, hauteur
body { background-color : blue ; }
= width, :height
#a { background-color red ;
border : solid 25px green ;
width : 200px ;
height : 300px
marge; interne

W
padding : 100px ;
margin : 70px = ;padding
}
#a div { width : 100% ;
height : 100% ;
border : 1px solid bord
black ;

W
background-color : white ; }
= border
#b { background-color : white ; }
</style> </head> <body>
<div id='a'><div>div test</div>
</div>
marge externe
<div id='b'>après=divmargin
est</div>
</body> </html>

25
Point sur les boîtes
 margin

W
 top, bottom, left, right
 border
 top, bottom, left, right
 padding

WW
top, bottom, left, right

Source : www.w3.org
26
Ouvrons la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>

</style>

WW
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div class='mon_div'>
<p>Tout n'est que <strong>boîte</strong>.
<em>La compréhension des mécanismes de boîtes
est la <span>clé</span> de la mise en forme
des éléments structurés de la page Web</em></p>
</div>
</body>
</html>
27
Ouvrons la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>

body { font-size : 2em ;


line-height : 2.5em ;
}

</style>

WW
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div class='mon_div'>
<p>Tout n'est que <strong>boîte</strong>.
<em>La compréhension des mécanismes de boîtes
est la <span>clé</span> de la mise en forme
des éléments structurés de la page Web</em></p>
</div>
</body>
</html>
28
Ouvrons la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
display : inline
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;
border-color : purple ; }
div { border-color : blue ; }

W
p { border-color : green ; }
strong { border-color : yellow ; }
em { border-color : black ;
}
span { border-color : gray ; }

W
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div class='mon_div'>
<p>Tout n'est que <strong>boîte</strong>.
<em>La compréhension des mécanismes de boîtes
est la <span>clé</span> de la mise en forme
des éléments structurés de la page Web</em></p>
</div> display : block
</body>
</html>
29
Ouvrons la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
display : inline
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;
border-color : purple ; }
div { border-color : blue ; }

W
p { border-color : green ; }
strong { border-color : yellow ; }
em { border-color : black ;
display : block ; }
span { border-color : gray ; }

W
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div class='mon_div'>
<p>Tout n'est que <strong>boîte</strong>.
<em>La compréhension des mécanismes de boîtes
est la <span>clé</span> de la mise en forme
des éléments structurés de la page Web</em></p>
</div> display : block
</body>
</html>
30
Autour de et dans la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { margin : 0 ;
padding : 0 ;
border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;

W
border-color : purple ; }
div#parent { border-color : blue ;

}
div.enfant {

W
border-color : green ; }
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant'>a</div>
<div class='enfant'>b</div>
</div>
</body>
</html>
31
Autour de et dans la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { margin : 0 ;
padding : 0 ;
border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;

W
border-color : purple ; }
div#parent { border-color : blue ;
margin : 20px ;
}
div.enfant {

W
border-color : green ; }
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant'>a</div>
<div class='enfant'>b</div>
</div>
</body>
</html>
32
Autour de et dans la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { margin : 0 ;
padding : 0 ;
border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;

W
border-color : purple ; }
div#parent { border-color : blue ;
margin : 20px ;
padding : 20px ; }
div.enfant {

W
border-color : green ; }
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant'>a</div>
<div class='enfant'>b</div>
</div>
</body>
</html>
33
Autour de et dans la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { margin : 0 ;
padding : 0 ;
border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;

W
border-color : purple ; }
div#parent { border-color : blue ;
margin : 20px ;
padding : 20px ; }
div.enfant { margin : 20px ;

W
border-color : green ; }
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant'>a</div>
<div class='enfant'>b</div>
</div>
</body>
</html>
34
Autour de et dans la boîte
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
* { margin : 0 ;
padding : 0 ;
border : solid 20px red ; }
body { font-size : 2em ;
line-height : 2.5em ;

W
border-color : purple ; }
div#parent { border-color : blue ;
margin : 20px ;
padding : 20px ; }
div.enfant { margin : 20px ;

W
padding : 20px ;
border-color : green ; }
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant'>a</div>
<div class='enfant'>b</div>
</div>
</body>
</html>
35
Les boîtes qui flottent
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border : solid 20px purple ; }
body { font-size : 2em ;
line-height : 2.5em ; }
#enfant1 { border-color : red ; }

W
#enfant2 { border-color : green ; }
#enfant3 { border-color : blue ; }
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>

W
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

36
Les boîtes qui flottent
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border : solid 20px purple ; }
body { font-size : 2em ;
line-height : 2.5em ; }
#enfant1 { border-color : red ;

W
float : left ;
height : 8em ; }
#enfant2 { border-color : green ; }
#enfant3 { border-color : blue ; }
</style>
<title>Une boîte pour les gouverner tous</title>

W
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

37
Les boîtes qui flottent
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border : solid 20px purple ; }
body { font-size : 2em ;
line-height : 2.5em ; }
#enfant1 { border-color : red ; }

W
#enfant2 { border-color : green ;
float : left ;
height : 8em ; }
#enfant3 { border-color : blue ; }
</style>
<title>Une boîte pour les gouverner tous</title>

W
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

38
Les boîtes qui flottent
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border : solid 20px purple ; }
body { font-size : 2em ;
line-height : 2.5em ; }
#enfant1 { border-color : red ; }

W
#enfant2 { border-color : green ; }
#enfant3 { border-color : blue ;
float : left ;
height : 8em ; }
</style>
<title>Une boîte pour les gouverner tous</title>

W
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

39
Les boîtes qui flottent
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border : solid 20px purple ; }
body { font-size : 2em ;
line-height : 2.5em ; }
#enfant1 { border-color : red ; }

W
#enfant2 { border-color : green ; }
#enfant3 { border-color : blue ;
float : left ;
height : 8em ; }
</style>
<title>Une boîte pour les gouverner tous</title>

W
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

40
Les boîtes qui flottent et les autres
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border : solid 20px purple ; }
body { font-size : 2em ;
line-height : 2.5em ; }
#enfant1 { border-color : red ;

W
}
#enfant2 { border-color : green ;
}
#enfant3 { border-color : blue ;
}

W
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

41
Les boîtes qui flottent et les autres
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border :
solid 20px purple ; }
body { font-size 2em ;:
line-height :
2.5em ; }
#enfant1 { border-color red ;:
float :
left ;

W
height 8em ;: }
#enfant2 { border-color :
green ;
}
#enfant3 { border-color : blue ;
}

W
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

42
Les boîtes qui flottent et les autres
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border : solid 20px purple ; }
body { font-size : 2em ;
line-height : 2.5em ; }
#enfant1 { border-color : red ;
float : left ;

W
height : 8em ; }
#enfant2 { border-color : green ;
clear : left ; }
#enfant3 { border-color : blue ;
}

W
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

43
Les boîtes qui flottent et les autres
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

W
<style type='text/css'>
div { border :
solid 20px purple ; }
body { font-size 2em ;:
line-height :
2.5em ; }
#enfant1 { border-color red ;:
float :
left ;

W
height 8em ;: }
#enfant2 { border-color :
green ;
}
#enfant3 { border-color : blue ;
clear : left ; }

W
</style>
<title>Une boîte pour les gouverner tous</title>
</head> <body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
<div class='enfant' id='enfant2'>bbbbbbbbbb</div>
<div class='enfant' id='enfant3'>cccccccccc</div>
</div>
</body>
</html>

44
Quirks Mode
 Mode de rendu des nouveau navigateurs

W
lorsqu’ils tentent de rester compatibles avec les
erreurs du passé
 Mode déclenché en fonction de la DTD

W
 DTD complète  mode de rendu normal
 DTD partielle ou absente  mode de rendu dégradé
 Importance de fixer correctement la DTD !

 W
 Différences entre les modes :
Taille des boîtes
Alignements verticaux
Héritage des polices dans les tableaux
45
Quirks Mode : exemple normal
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>

W
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type='text/css'> 50px
div { margin : 0 ;
padding : 0 ;
border : solid 20px purple ; }
body { font-size : 2em ;

W
line-height : 2.5em ; }
#enfant1 { border-color : red ;
background 300px
: no-repeat url('fond.png') center center ;
height : 300px ;
width : 300px ;
margin : 20px ;

W
padding : 60px ; }
</style>
<title>Une boîte pour les gouverner tous</title>
</head>
50px
<body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
</div>
</body>
</html>

46
Quirks Mode : exemple dégradé
<html> <head>

W
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type='text/css'> 50px
div { margin : 0 ;
padding : 0 ;
border : solid 20px purple ; }
body { font-size 300px
: 2em ;

W
line-height : 2.5em ; }
#enfant1 { border-color : red ;
background : no-repeat url('fond.png') center center ;
height 50px
: 300px ;
width : 300px ;
margin : 20px ;

W
padding : 60px ; }
</style>
<title>Une boîte pour les gouverner tous</title>
</head>
<body>
<div id='parent'>
<div class='enfant' id='enfant1'>aaaaaaaaaa</div>
</div>
</body>
</html>

47