CSS Héritage
Héritage CSS
L'héritage CSS concerne ce qui se passe lorsqu'aucune valeur n'est spécifiée pour une propriété d'un élément.
Si aucune valeur n'est spécifiée pour une propriété, celle-ci peut être héritée de l'élément parent ou être définie à sa valeur initiale (par défaut).
Pour l'héritage CSS, les propriétés sont classées en deux types :
- propriétés héritées
- propriétés non héritées
Propriétés Héritées
Les propriétés héritées sont, par défaut, définies sur la valeur calculée de l'élément parent.
Les propriétés liées au texte, telles que couleur , police , taille de police , hauteur de ligne , et alignement du texte , sont généralement héritées. Cela garantit un style de texte cohérent dans tout le document.
Dans l'exemple suivant, le texte à l'intérieur de l'élément <strong> apparaîtra en 20px et en bleu, car l'élément <strong> hérite de la couleur et de la taille de police de l'élément parent (<p>).
Exemple
Les propriétés de couleur et de taille de police sont héritées :
<style>
p {
color: blue;
font-size: 20px;
}
</style>
<body>
<p>Ceci est un paragraphe avec du texte <strong>important</strong>.</p>
</body>
Propriétés Non Héritées
S'il n'y a pas de valeur définie pour une propriété non héritée, celle-ci est définie à la valeur initiale (par défaut) de cette propriété.
Les propriétés liées au modèle de boîte ou à la mise en page, comme bordure , arrière-plan , marge , remplissage , largeur , et hauteur , ne sont généralement pas héritées.
Dans l'exemple suivant, l'élément <strong> à l'intérieur de l'élément <p> n'aura pas de bordure supplémentaire (puisque la valeur initiale de style de bordure est none).
Exemple
La propriété de bordure n'est pas héritée :
<style>
p {
border: 1px solid red;
}
</style>
<body>
<p>Ceci est un paragraphe avec du texte <strong>important</strong>.</p>
</body>
Le mot-clé inherit
Le inherit mot-clé est utilisé pour spécifier explicitement l'héritage. Il fonctionne à la fois sur les propriétés héritées et non héritées.
Dans l'exemple suivant, l'élément <strong> à l'intérieur de l'élément <p> aura une bordure supplémentaire, car nous avons utilisé le mot-clé inherit pour spécifier explicitement que la valeur de la bordure doit être héritée.
Exemple
Définir explicitement l'héritage avec le mot-clé inherit :
<style>
p {
border: 1px solid red;
}
strong {
border: inherit;
}
</style>
<body>
<p>Ceci est un paragraphe avec du texte <strong>fort</strong>.</p>
</body>