Tutorial CSS

Introduction.

Syntaxe.

Association à HTML.

Héritage.

Médias.

L'héritage.

Ce résumé suffit pour une première approche. Si vous désirez une information plus approfondie, lisez toute la page.

Certaines propriétés peuvent hériter leur valeur de celle de l'élément parent, c'est à dire qu'elles prennent la même valeur sans qu'il soit nécessaire de la redéfinir.

 

Parents et enfants.

Le contenu d'une page HTML est organisé en balises imbriquées, 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.

Présentation CSS
La page telle qu'elle s'affiche
Présentation CSS
Une représentation des balises
Présentation CSS
Autre représentation des balises

La notion d'héritage.

Lorsqu'elles ne sont pas spécifiées, la plupart des propriétés prennent la même valeur que l'élément parent. On dit qu'elles héritent. Ceci permet de définir certaines propriétés une seule fois au niveau du parent le plus haut (BODY par exemple) en laissant les autres éléments hériter pour cette propriété.

Cela marche presque toujours mais il y a quand même quelques exceptions. Par exemple, la balise TR n'accepte pas la propriété Font-Family. Et comme il y a toujours un TR entre le tableau et les cellules, la police définie au niveau du tableau ne se retrouvera pas dans les cellules.

Il y a aussi le cas de propriétés qui n'héritent pas par défaut comme Background-Color (valeur par défaut = Transparent) ou Border. Dans ce cas, on peut forcer l'héritage est donnant à la propriété la valeur Inherit.

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 de l'élément parent et c'est tout. Ce comportement est très logique dans le cas par exemple des polices de caractères mais peu donner des résultats inatendus pour les marges.

DIV {Font-Size: 150%;}

Elément parent
Dans ce cadre, la taille des caractères est définie à 150%, ce qui correspond, après calcul à une taille de 15 points à peu-près.

Dans ce cadre enfant, la taille des caractères n'est pas redéfinie: on hérite donc de celle du parent. On observe bien que les caractères ont la même taille que dans l'élément parent (héritage du résultat) et ne sont pas 1,5 fois plus gros.

DIV {Padding-Left:25%;}

Dans ce cadre (parent), la marge intérieure est de 25% soit un quart de la largeur du cadre.

DIV {Padding-Left: Inherit;}

Dans ce cadre enfant, la marge intérieure est héritée. Notez qu'il faut le spécifier car la propriété Padding-Left n'est pas héritée par défaut. La marge intérieure gauche a la même valeur que celle du parent, qui ne correspond pas forcément à un quart de la largeur du cadre enfant.

25% dela largeur du cadre enfant.

Cadre parent
Background-Color: Yellow;
Cadre enfant
Rien n'est spécifié concernant la couleur du fond (la valeur par défaut est transparent).
Cadre enfant
Background-Color: Inherit;
Ici la couleur du fond est la même que celle de l'élément parent.
Pour toute utilisation des informations de cette page, reportez vous au copyright