Faire le quizz close

Comprendre l'héritage en HTML et en CSS

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

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 descendants. Il y a donc transmission et c'est ce que l'on appelle l'héritage.

Dans ce tutoriel j'appellerai un div d'identificateur fils le div#fils.

  1. Dans l'exemple ci-dessous la première chose à remarquer c'est que le div#fils va hériter de son ancêtre le div#ancetre de la valeur de la propriété color.
  2. La deuxième chose à remarquer c'est qu'il ne va pas hériter de la valeur de la propriété padding.

Pourquoi ? Parce que selon leur nature il y a des valeurs de propriétés qui se transmettent par héritage c'est le cas de color et d'autres qui ne se transmettent pas c'est le cas du padding. C'est un comportement par défaut.

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. Vous le voyez dans la colonne inherited ? soit la colonne de rang 5.

Faites une recherche dans cette spécification avec CTRL+F sur color et sur padding et regardez dans la colonne 5 du tableau de propriétés. Vous pouvez voir que color s'hérite par défaut alors que padding ne s'hérite pas par défaut.

Tester le code
  1. Il faut remarquer aussi que sur le div#petit-fils il y a une déclaration color:orange; qui va venir en conflit avec le color:red; qui est hérité. Et là il faut bien comprendre que c'est toujours la valeur spécifiée directement sur l'élément qui sera choisie. Ici en l'occurrence orange. Et ce quel que soit la provenance de la déclaration. Je vais détailler ce point dans le chapitre suivant du tuto.
  2. La dernière chose à remarquer c'est que même si la valeur change la propagation de l'héritage se poursuit. La valeur de color va continuer à se propager mais cette fois ci avec la valeur orange qui va être transmise à div#arriere-petit-fils.

#2 L'héritage génère des conflits open

Dans l'exemple suivant je déclare deux propriétés qui par défaut s'héritent color et font-size. Les valeurs de ces deux propriétés vont donc être transmises aux descendants. Ici il n'y a qu'un descendant c'est l'élément h1 qui est enfant du body.

Deux situations vont se présenter :

  1. La première concerne la propriété color. Sur h1 il n'y a pas de déclaration concernant la propriété color. Donc h1 va hériter de la valeur red pour cette propriété color.
  2. La deuxième concerne la propriété font-size. Sur h1 nous avons deux déclarations en conflit. La première vient de notre script. C'est la déclaration font-size:1em; qui est faite sur le body et qui est transmise par héritage à l'élément h1. La deuxième vient de la feuille de style du navigateur dans laquelle il y a une déclaration font-size:2em;. C'est la valeur déclarée qui va écraser la valeur héritée. C'est ce que signifie le fait que le font-size:1em; soit barré dans la figure ci-dessous.
Deux déclarations en conflit sur h1
Tester le code

#3 Comment forcer l'héritage open

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 div#fils.

Tester le code

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

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

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

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