2. Héritage et Poids¶
L'héritage est l'une des notions les plus importantes en CSS. C'est l'essence même du langage et le nom de ce dernier n'y est pas étranger. Elle signifie que tout élément HTML va hériter des propriétés CSS de son parent.
L'héritage en cascade¶
Prenons une balise <div> dans laquelle nous allons mettre un paragraphe :
<body>
<h1 id="super">Roger, maître du HTML et dresseur de Pokémon</h1>
<div>
<p>
<span>Enfant</span>
</p>
</div>
</body>
Dans cet exemple, toutes les balises ont <body> comme parent. La balise <h1> a <body> comme parent mais n'a pas d'enfant. Tandis que la balise <span> a pour parents <p>, <div> et <body>.
En CSS, chaque élément ou balise enfant reçoit en héritage tous les styles de son parent.
Par exemple, je vais appliquer une couleur de texte blue à la balise <div> :
En faisant ça, le texte dans ma balise <p> devient bleu :
Mon super text!
Ordre de priorité¶
Cette notion d'héritage est puissante et pratique mais il convient de bien la comprendre pour la maîtriser parfaitement. En effet, il y a un ordre de priorité.
Travaillons sur l'exemple suivant :
<body>
<h1>Roger, maître du HTML et dresseur de Pokémon</h1>
<h2>Présentation</h2>
<p>Bonjour et bienvenue sur mon site. Je m'appelle Roger et je suis désormais un maître de niveau 99 en HTML.</p>
<h3>Mes Pokémon</h3>
<p>Je collectionne les Pokémon avec l'application <strong>Pokémon GO</strong>. C'est mon jeu préféré, j'adore.</p>
<h4>Mes autres passions</h4>
<p class="mega">Après <strong>Pokémon GO</strong>, mon autre passion est le football.<br>
Je supporte l'équipe de Dunkerque et je rêve de voir <em>mon équipe préférée écraser le PSG</em>.</p>
<p class="mega">Si je ne joue pas à Pokémon GO et que je ne regarde pas un match de football de Dunkerque, j'écoute du Céline Dion.</p>
</body>
En appliquant le style suivant :
Voici le rendu:
Procédons dans l'ordre hiérarchique du fichier CSS. Une propriété color: a été définie pour <body>. Ainsi, tous ses enfants en héritent, donc dans notre exemple, absolument toutes les autres balises. Les titres <h?> sont en rouge car il n'y a pas d'autres déclarations qui les ciblent. Ils héritent donc du style du parent <body>.
En ce qui concerne les paragraphes, ça se complique. Il y a deux déclarations pour le même sélecteur : p {}. Pour ce cas, la règle est simple. Le navigateur web lit les feuilles de styles de manière séquentielle, c'est-à-dire dans l'ordre où elles sont écrites. C'est donc la dernière règle qui a la priorité. Ainsi dans notre exemple, c'est la couleur noire qui l'emporte sur l'orange. Pour autant, nous sommes face à notre premier conflit. Les paragraphes doivent-ils être en rouge ou en noir ? En noir. En effet, le sélecteur p {} étant plus précis et proche que body {}, les styles de p {} l'emportent.
On remarque que, en l'absence de déclaration plus précise, les éléments <span>, <em> et <strong> héritent bien des styles de leurs parents <p>.
Attention !
Problème, les deux premiers paragraphes sont bien en noir, mais pourquoi diantre n'est pas le cas pour les deux derniers ?
La dernière déclaration de notre fichier CSS est en cause : .mega {}. Nous sommes face à un nouveau conflit. Les deux derniers paragraphes héritent de la couleur rouge grâce à leur parent <body>, puis héritent de la couleur noire grâce à leur parent <p>, mais sont finalement en bleu. Il semble pourtant à première vue que les déclarations p {} et .mega {} sont aussi proches et précises l'une que l'autre. La réponse se trouve dans le poids des sélecteurs.
Poids des sélecteurs¶
En CSS, les sélecteurs ont un poids. La notion de poids est relativement complexe. Le cours étant destiné à un public débutant, nous la simplifierons légèrement.
Sélecteur d'identifiant > sélecteur de classe > sélecteur d'élément ou simple > sélecteur universel
Il faut donc comprendre que le poids d'une déclaration avec un sélecteur d'identifiant est supérieur à celui d'une déclaration avec un sélecteur de classe et ainsi de suite. La déclaration avec le sélecteur qui a le poids le plus important l'emporte sur les autres.
La règle est simplifiée car il existe d'autres types de sélecteur d'éléments. Étant donné que nous ne les aborderons pas dans ce cours, la règle est correcte. Pour bien comprendre cette règle, prenons le temps de voir un exemple détaillé.
#top {
color: green;
}
.para {
color: yellow;
}
h1 {
color: orange;
}
body {
color: red;
}
* {
color: yellow;
}
Avec cet exemple, de quelle couleur est le titre ? La réponse est : vert.
Les déclarations ne sont volontairement pas dans un ordre naturel. C'est pour mettre en relief que c'est le poids du sélecteur qui l'emporte sur les autres règles.
Conclusion¶
La compréhension de ce chapitre est incontournable pour mettre en forme une page web. C'est la base du fonctionnement du CSS. Vous serez sûrement amené à revenir sur ce chapitre pour vous remémorer certaines règles. C'est normal, ces notions ne sont pas simples. Elles se graveront dans votre mémoire en pratiquant. Pour mieux comprendre les ordres de priorité, vous pouvez également utiliser l'inspecteur d'éléments. Ce précieux outil vous permettra de vous aider dans la compréhension des règles de priorité.