L'héritage en CSS - Tutoriel

Parent et enfants.

Le contenu d'une page HTML est organisé en balises imbriquées les unes dans les autres, c'est à dire que les éléments sont contenus dans des éléments plus gros. Le parent est un élément qui en contient d'autres (les enfants).

Le dessin ci-dessous représente une page comportant un titre souligné et un tableau de 2 lignes et 3 colonnes.

On peut représenter les éléments de cette page sous ces formes, ce qui fait mieux ressortir la relation parent/enfant qu'il y a entre eux.

Voici comment se décompose les liens de parenté sur cet exemple :

• L'élément body est le parent direct de deux éléments : h1 et table.
• table est le parent direct de tbody.
• tbody a deux éléments tr (les lignes du tableau).
• Chaque tr est le parent direct de trois cellules : les éléments td.
• Enfin (vous n'y auriez peut-être pas pensé) mais dans ce cas, l'élément h1 est le parent direct d'un élément u puisque le titre a été souligné. ⁽¹⁾
• Ce n'est pas représenté sur le dessin mais l'élément body a un parent, qui est l'élément html.

(1) Remarque : la balise u ne devrait plus être utilisée car le soulignement est une mise en forme qui serait plutôt à définir avec CSS.

La notion d'héritage.

Lorsqu'elles ne sont pas spécifiées, certaines propriétés prennent par défaut la même valeur que l'élément parent. On dit qu'elles héritent. Ceci évite de devoir redéfinir les propriétés pour tous les éléments enfants. Par exemple la police de caractères peut être définie au niveau le plus haut (la balise body ou même html) ; il sera alors inutile de la définir pour tous les éléments puisqu'ils vont tous hériter de cette valeur.

Ce mécanisme a donné son nom aux CSS, le C voulant dire Cascading. On a en effet un héritage en cascade, en partant de l'élément le plus haut, jusqu'à tous ses descendants.

Remarque subtile : si la valeur héritée est le résultat d'un calcul, c'est ce résultat qui est hérité, et non pas la formule qui a servi à l'obtenir. Autrement dit, on ne recalcule pas une nouvelle valeur avec les paramètres de l'élément enfant ; on reprend la valeur obtenue pour l'élément parent et c'est tout.
Voici un exemple : la taille des caractères du cadre intérieur est héritée de son parent le cadre extérieur, où elle est définie à 120%. Les deux textes ont la même taille. CSS n'a donc pas refait un calcul de 120%, ce qui aurait donné des caractères plus gros. Il a simplement repris la valeur trouvée précédemment.