Aller au contenu

Le langage CSS/Héritage

Un livre de Wikilivres.

Héritage par défaut

[modifier | modifier le wikicode]

La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.

Héritage explicite

[modifier | modifier le wikicode]

La valeur spéciale inherit permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.

Exemple 1 : L'élément <div> interne hérite de la bordure de l'élément externe.

<div style="border: solid 1px; padding: 1em;">
EXTERNE
<div style="border: inherit; padding: 1em;">
INTERNE
</div>
</div>

EXTERNE

INTERNE

Exemple 2 : L'élément <div> interne hérite de l'absence de bordure de l'élément intermédiaire car celui-ci n'hérite pas de la bordure de l'élément externe.

<div style="border: solid 1px; padding: 1em;">
EXTERNE
<div>
<div style="border: inherit; padding: 1em;">
INTERNE
</div>
</div>
</div>

EXTERNE

INTERNE