Héritage

Dans la page arbre.html que vous venez juste de compléter, ajoutez les deux règles suivantes à la suite des autres:

p { 
  border: blue solid 2px; 
  color: red;
}

Observez dans Firefox le résultat sur les descendants: tout le contenu des 3 éléments de type p est écrit en rouge (donc les descendants aussi), mais seules leurs 3 boîtes ont une bordure bleue (donc pas les descendants).
On dit que la propriété color est héritée par les descendants, alors que la propriété border ne l'est pas.

Propriété héritée ou pas?

Il faudrait a priori l'apprendre par coeur pour toutes les propriétés, mais la réponse est en général une affaire de bon sens. Vous voulez pouvoir encadrer un passage de votre texte sans pour autant encadrer chaque boîte éventuellement contenue dedans: donc, pas d'héritage pour la bordure! Par contre, les propriétés concernant la police sont habituellement héritées, car personne n'aimerait devoir répéter les règles pour chaque descendant...
Si vous avez un doute, vous pouvez demander à Bluefish de vous aider en passant la souris sur le nom de la propriété. Vérifiez pour color et border dans le document arbre.html.

Comment contrôler l'héritage?

Il arrive qu'une propriété ne soit pas héritée par un enfant, mais qu'on voudrait bien qu'elle le soit. On peut évidemment répéter pour cet enfant la règle en question avec la même valeur. Cependant, il vaudra plutôt mieux utiliser la valeur inherit: si vous changez plus tard la valeur de la propriété pour le parent, vous n'aurez pas besoin d'y penser pour l'enfant.

Inversement, il arrive souvent qu'on ne veuille pas qu'une propriété soit héritée par un descendant. Il suffit alors d'écrire une règle pour le descendant en question (avec un sélecteur bien choisi) et cette propriété.
En effet, une propriété héritable n'est jamais héritée par un descendant si elle est modifiée par une règle CSS concernant ce descendant.

Conséquences sur les dimensions relatives

Pour les propriétés dont les valeurs sont des dimensions (ou longueurs), on a vu au TD1 l'unité em, que l'on a qualifiée de relative. Mais on n'a pas précisé relative à quoi? La réponse est: relative à la valeur a priori de la propriété pour l'élément concerné. Quelle est cette valeur a priori? C'est en général celle héritée de son parent.

Conséquence à retenir: pour des éléments imbriqués, ces valeurs relatives sont héritées. Par exemple, pour des listes emboîtées dans un document où la police de base fait 10px, la règle
li { font-size: 0.7em; }
donnera une police de 0.7*10=7px pour les items de niveau 1, mais d'environ 5px au niveau 2 (0.7*7=4.9).

Une seconde méthode pour indiquer une longueur relative consiste à fournir un pourcentage. Cette méthode est essentiellement utilisée pour les dimensions des boîtes, alors que l'unité em est indiquée pour les dimensions du texte.
Par exemple, li { width: 75%; } demande que les items de liste aient une boîte dont la largeur fait les 3/4 de celle de leur parent.