DEVENIR-WEBMASTER.COM Log In
 27
Faire le quizz close

Comprendre l'héritage en HTML et en CSS

Visiter ma chaine Youtube

# L'héritage qu'est ce que c'est ? close

Supposons que l'on applique une déclaration à un élément qui a des descendants. Si la déclaration contient une propriété qui s'hérite par défaut alors la déclaration va s'appliquer à tous les enfants à condition que ceux ci n'aient pas spécifié de valeur pour cette propriété.

Propagation de l'héritage

Exemple ici

La première chose à remarquer c'est que le fils va hériter de son ancêtre de la valeur de la propriété color mais pas de la valeur de la propriété padding.

Vous avez dans la Spécification CSS2.2 une liste des propriétés et vous pouvez voir pour chacune d'entre elles si ce sont des propriétés qui s'héritent par défaut ou pas.

Ici on regarde dans la colonne 5 de ce tableau de propriétés, on voit que color s'hérite par défaut alors que padding ne s'hérite pas par défaut.

La deuxième chose à remarquer c'est que sur le petit-fils il y a une déclaration qui va venir en conflit avec la valeur rouge qui est héritée. Et là il faut bien comprendre que c'est toujours la valeur spécifiée qui sera choisie. Quel que soit la provenance de la déclaration. Dans cet exemple la feuille de style du navigateur spécifie une taille pour la balise h1 c'est donc cette taille qui est choisie. Par contre pour la couleur il y a héritage car la feuille de style du navigateur ne spécifie rien pour cette propriété.

La troisième chose à remarquer c'est que la valeur change mais la propagation de l'héritage se poursuit.

# Comment forcer l'héritage close

On va reprendre l'exemple précédent où l'on a vu que le padding ne s'héritait pas par défaut. On peut forcer cet héritage en spécifiant la valeur inherit à la propriété padding du fils.

Propagation de l'héritage

Exemple ici

# Propriétés à connaître qui s'héritent par défaut close

Toutes les propriétés liées à la fonte : font, font-style, font-family, font-weight, font-size, color, text-align.

# Propriétés à connaître qui ne s'héritent pas par défaut close

Toutes les propriétés de block : padding, margin, border, width, height.