Le langage CSS/Héritage
Héritage par défaut
modifierLa 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
modifierLa 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 |