4.5 Héritage CSS

18 octobre 2018

Utiliser la hiérarchie HTML

Disons que nous voulons changer la couleur du texte d’une page Web. Il serait fastidieux de spécifier une couleur pour chaque élément HTML :

p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6 { color: grey;}

Propagation de la valeur

La valeur de color peut être héritée d’un ancêtre. Considérant que nous voulons modifier toute la page Web, nous allons choisir l’ancêtre de tous les éléments HTML, la balise body :

body { color: grey;}

Tous les éléments enfant et descendant hériteront de la valeur grise de leur corps ancestral commun, qui englobe naturellement tous les éléments.

Nous pourrions également utiliser la balise html.

Propriétés héritées

Seules quelques propriétés CSS peuvent être héritées d’ancêtres. Ce sont principalement des propriétés de texte :

couleur du texte – color
police (famille, taille, style, poids) – font (family, size, style, weight)
hauteur de la ligne – line-height

Certains éléments HTML n’héritent pas de leurs ancêtres. Les liens, par exemple, n’héritent pas de la propriété color.