Académique Documents
Professionnel Documents
Culture Documents
Programmation Web :
Feuilles de style CSS
AMALOU Warda
W
Master 2
Réseaux et Télécommunications
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
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
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
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
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.
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.
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.
14
Exemple de sélecteurs courants
WW
b, u, i : les balises b, u et i
W
non visitées lors de leur survol
W
class contient au moins ma_classe
W
contient au moins ma_classe
W
mon_id
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 (00FF) , #RGB ≡ #RRGGBB
W
rgb(red,green,blue) (0255)
rgb(red%,green%,blue%) (0100%)
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
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
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'>
</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