1. Héritage en CSS
L'héritage en CSS désigne la capacité de certains styles d'être transmis des éléments parents aux éléments enfants.
Les propriétés héritables :
- Propriétés liées au texte :
color,font-family,line-height,visibility, etc. - Exemple :
css
body {
color: blue; /* Tous les éléments enfants auront un texte bleu */
}
- HTML rendu :
html
<body>
<p>Ce texte est bleu.</p>
<div>
<span>Ce texte aussi.</span>
</div>
</body>
Les propriétés non héritables :
D’autres propriétés (comme margin, padding, background) ne sont pas héritées par défaut.
Si vous souhaitez qu’une propriété non héritable soit transmise, utilisez la valeur inherit.
Exemple :
css
div {
background-color: inherit; /* Prend la couleur de fond du parent */
}
2. Surcharge en CSS
La surcharge permet de redéfinir les styles appliqués à un élément lorsqu'il y a des conflits entre plusieurs règles CSS.
Les règles de priorité :
- Les styles en ligne (
style="...") ont la priorité la plus élevée. - Les ID (
#id) sont plus spécifiques que les classes ou les balises. - Les classes (
.classe), pseudos-classes, et attributs ont une priorité moyenne. - Les balises HTML (
p,div, etc.) ont la priorité la plus faible.
Exemple de surcharge :
css
/* Moins prioritaire */
p {
color: black;
}
/* Plus prioritaire */
.special {
color: red;
}
/* Encore plus prioritaire */
#unique {
color: green;
}
HTML rendu :
html
<p class="special" id="unique">Ce texte sera vert (priorité de l'ID).</p>
Combiner sélecteurs pour augmenter la spécificité :
Plus un sélecteur est spécifique, plus il prend le dessus sur un autre.
css
div p {
color: blue; /* S'applique uniquement aux <p> dans un <div> */
}
3. Importance (!important)
La déclaration !important force une règle à dominer, quelle que soit la spécificité des autres sélecteurs.
Exemple :
css
p {
color: black !important; /* Priorité absolue */
}
Cependant, à éviter autant que possible, car cela complique la maintenance du CSS.
Résumé : Héritage vs Surcharge
| Concept | Description |
|---|---|
| Héritage | Certaines propriétés (comme color) sont transmises aux enfants. Peut être forcé avec inherit. |
| Surcharge | Redéfinir des styles selon des règles de spécificité ou avec !important si nécessaire. |