### 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
<!DOCTYPE html> <html lang="fr"><head> <meta charset="utf-8"> <title>Héritage de couleur</title> <style> div { color: red; } </style> </head> <body> <p> Paragraphe 1. En dehors du div. En noir, la couleur par défaut.</p> <div> <p> Paragraphe 2. Dans le div. En rouge à cause de l'héritage.</p> <p> Paragraphe 3. Dans le div. En Rouge aussi à cause de l'héritage.</p> </div> <p> Paragraphe 4. En dehors du div. En noir, la couleur par défaut.</p> </body> </html>

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
<!DOCTYPE html> <html lang="fr"><head> <meta charset="utf-8"> <title>Héritage de valeurs relatives</title> <style> div { font-size: 120%; } </style> </head> <body> <div> <p>Attention : héritage de valeur relative. <br>Taille : 120%</p> <div> <p>Attention : héritage de valeur relative. <br>Taille : 120% x 120%</p> <div> <p>Attention: héritage de valeur relative. <br>Taille : 120% x 120% x 120%</p> </div> </div> </div> </body> </html>