Héritage

En CSS, l'héritage contrôle ce qui se produit lorsqu'aucune valeur n'est indiquée pour une propriété d'un élément.

Les propriétés CSS peuvent être rangées dans deux catégories :

  • Les propriétés héritées, qui prennent par défaut la valeur calculée de leur élément parent.
  • Les propriétés non-héritées, qui prennent par défaut la valeur initiale de la propriété.

Voyez sur les pages des différentes propriétés CSS dans la référence la définition qui indique si une propriété donnée hérite par défaut (« Héritée : oui ») ou non (« Héritée : non »).

Propriétés héritées

Lorsqu'aucune valeur n'a été fournie pour une propriété héritée sur un élément, celle-ci utilise la valeur calculée de la propriété sur l'élément parent. Seul l'élément racine du document récupère la valeur initiale indiquée dans le résumé de la propriété.

Un exemple caractéristique de propriété héritée est la propriété color. Prenons la règle et le fragment de document suivants :

css
p {
  color: green;
}
html
<p>Ce paragraphe a <em>du texte en emphase</em> à l'intérieur.</p>

Les mots « du texte en emphase » apparaissent en vert, car l'élément <em> a hérité de la valeur de la propriété color de l'élément <p>. Il n'utilise pas la valeur initiale de la propriété (ici, il s'agirait de la couleur utilisée pour l'élément racine lorsque la page n'indique pas de couleur).

Propriétés non-héritées

Lorsqu'aucune valeur n'est fournie pour une propriété non-héritée sur un élément, celle-ci utilise la valeur initiale (indiquée dans le résumé de la propriété).

Un exemple caractéristique de propriété non-héritée est la propriété border. Prenons la règle et le fragment de document suivants :

css
p {
  border: medium solid;
}
html
<p>Ce paragraphe a <em>du texte en emphase</em> à l'intérieur.</p>

Les mots « du texte en emphase » n'ont pas de bordure en plus (car la valeur initiale de border-style est none).

Notes

Le mot-clé inherit permet d'indiquer explicitement l'héritage et fonctionne sur les propriétés héritées comme sur les propriétés non-héritées.

Il est possible de contrôler l'héritage de l'ensemble des propriétés d'un coup en utilisant la propriété raccourcie all, qui applique sa valeur à toutes les propriétés. Par exemple :

css
p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

Cela réinitialisera le style des paragraphes pour la propriété font avec la valeur par défaut de l'agent utilisateur (à moins qu'une feuille de style de l'utilisatrice ou de l'utilisateur existe et indique une police, qui sera alors utilisée). Ensuite, la taille de la police est doublée et on applique un niveau de graisse font-weight à bold pour mettre en gras.

Surcharger l'héritage, un exemple

Si on reprend l'exemple précédent avec border et qu'on impose l'héritage explicitement avec inherit, voici ce qu'on obtient :

css
p {
  border: medium solid;
}

em {
  border: inherit;
}
html
<p>Ce paragraphe a <em>du texte en emphase</em> à l'intérieur.</p>

On voit ici la bordure supplémentaire autour du texte en emphase.

Voir aussi