Héritage en CSS
Comment fonctionne l'héritage en CSS ?
On a pu voir que chaque élément XHTML peut avoir chacun soit sa propre classe, soit son propre style. Mais les balises XHTML peuvent aussi s'emboîter les unes dans les autres.
Dans ce cas, comment le navigateur effectue t-il la mise en forme ? En d'autres termes, dans le cas d'emboîtement des balises comme celui-ci, comment cela se passe t-il :
Code XHTML :
<body class="stylebody"> <p class= "stylep"> </p> < /body>
On veut savoir quel style sera appliqué au contenu de la balise <p> qui fait aussi partie du contenu de la balise body. C'est là qu'intervient la notion d'héritage. On appellera donc "parent", le style du niveau supérieur (le stylebody dans notre cas) et enfant les styles de la balise en dessous (stylep dans notre cas). La balise "body", avec ses différents styles, se voit hériter des styles de la classe transmise.
En l'occurrence "stylebody". Les éléments de "body", comme le paragraphe "p" par exemple, seront donc conformes au style de "body", auquel on aura appliqué le style de la classe "stylebody". En tant qu'enfant de body, de stylebody, et de p, , stylep hérite des propriétés de ses parents. S'il y a deux valeurs différentes pour la même propriété, l'enfant garde la sienne, sinon on remonte l'arborescence pour connaître le style associé. Voyons ça plus explicitement à l'aide d'un exemple.
Code CSS :
.stylebody
{
font-size: 10pt;
font-family: arial, verdana, sans-serif;
color: green;
text-align: left;
background-color: #FFFFFF ;
}
.stylep
{
background-color:yellow;
font-style:italic;
text-align:center;
}
Code XHTML :
<body class="stylebody"> <p>Voici un paragraphe sans style, il hérite donc entièrement de body, puis de stylebody .</p> <p class= "stylep">Un paragraphe avec style, qui hérite encore de body et de stylebody, mais qui garde ses propres styles, définis par la classe ‘stylep'..</p>
Explication de l'exemple
Dans le paragraphe avec style les 3 propriétés de la balise body sont gardées:
- font-size: 10pt ;
- font-family: arial, verdana, sans-serif
- color: green ;
Les 2 autres propriétés : text-align: left et background-color: #FFFFFF ont été remplacées respectivement par text-align:center et background-color:yellow qui sont des propriétés propres à lui-même. Et il a une autre propriété qu'il n'a pas hérité mais qui lui est aussi propre font-style:italic;
Le tableau suivant nous résume la fusion des styles par héritage dans cet exemple.
Styles dans le .stylep
font-style:italic; text-align:center; background-color:yellow;
Styles appliqués au paragraphe de classe stylep par héritagefont-style:italic;
text-align:center; background-color:yellow; font-size: 10pt ; font-family: arial, verdana, sans-serif ; color: green ;
| Classes | Styles |
|---|---|
| Styles dans .stylebody |
font-size: 10pt ; font-family: arial, verdana, sans-serif ; color: green ; text-align: left ; background-color: #FFFFFF ;
|
Attention, le principe de l'héritage n'est pas toujours valable. C'est applicable pour certains styles comme la couleur par exemple. Cependant, il y a des exceptions pour certains propriétés des éléments de type bloc tels que padding, marging...
Ces propriétés ne se transmettent pas aux balises emboîtées. Autrement dit, un élément de type en-ligne emboités dans un type bloc et n'ayant pas de marge n'héritera jamais des marges de son conteneur. Néanmoins, la notion d'héritage est très pratique aux niveaux des CSS donc ça valait la peine de l'avoir étudié.
