L'héritage

Les valeurs de certaines propriétés de style sont transmises par les noeuds ancêtres à leurs descendants. On parle de propriétés héritées.

Ce mécanisme d'héritage nous permet de ne pas avoir à spécifier toujours les mêmes caractèristiques pour tous les éléments de la page ou tous les descendants d'un élément. Par exemple, en définissant une police de caractère et sa taille pour l'élément body, tous les éléments contenus dans le corps de la page hériterons de cette police et de sa taille. De cette façon nous n'aurons pas à reprendre cette mise en forme pour tous les textes individuellement.

Toutes les propriétés ne sont pas héritées. Ce sont principalement les propriétés concernant les textes qui sont héritées et qui sont aussi les plus utiles.

border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
quotes
text-align
text-indent
text-transform
white-space
word-break
word-spacing

Utilisation : rare ,    parfois ,    souvent ,    très souvent

Exemple : héritage de couleur

Quand la valeur de la propriété est un nombre, il faut faire attention à l'unité utilisée. Avec les unités relatives on peut avoir des effets cumulés surprenants.

Exemple : héritage de valeurs relatives