Cascade
global.css |
a { text-decoration: overline }
p a { color: pink }
a { background-color: white }
a { font-weight: bold }
|
section.css |
a { text-decoration: none }
a { color: black; background-color: grey }
|
user.css |
a { text-decoration: underline ! important }
a { color: blue }
a { font-weight: normal }
|
<p>Un <a>lien</a>.</p>
|
Un lien.
|
Pour chaque propriété de chaque élément :
- Recherche de déclaration s'appliquant, sinon héritage, sinon valeur
initiale (
font-family
...)
- Tri par poids :
!important
visiteur >
!important
auteur (text-decoration
)
- Tri par origine : auteur > visiteur > navigateur (
font-weight
)
- Tri par spécificité :
p {...} = 0.0.1
div p {...} = 0.0.2 (color
)
div div p {...} = 0.0.3
div.foo {...} = 0.1.1
div p.foo {...} = 0.1.2
#toto {...} = 1.0.0
<td align="..."> = 0.0.1
<td style="..."> = 1.0.0
- Tri par ordre inverse d'apparition (
background-color
)
Applications
Style global redéfini, par ordre inverse
global.css | body { background: blue } |
section.css | body { background: red } |
Style pour une zone, par spécificité
p { text-align: justify }
#nav p { text-align: left }
Préférences du visiteur, par poids, origine ou héritage
blink { text-decoration: none ! important }
body { color: black; background: white }