Comment le CSS choisit une règle
Le CSS (Cascading Style Sheets) est le langage qui dit comment les éléments d'une page se présentent : couleurs, tailles, espaces. Quand deux règles visent le même élément, le navigateur doit en choisir une.
Savoir prévoir ce choix évite de chercher pendant une heure pourquoi un titre reste rouge malgré votre règle.
À la fin de cette leçon
Remarque
Je peux prévoir quelle règle CSS l'emporte quand plusieurs visent le même élément.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Règle | un sélecteur suivi de réglages entre accolades | |
| Sélecteur | la partie qui dit quels éléments sont visés | .plat |
| Déclaration | un réglage : une propriété, deux-points, une valeur | color: red |
| Spécificité | le poids d'un sélecteur, qui décide de la règle gagnante | |
| Cascade | l'ensemble des règles qui décident de la valeur finale | |
| Héritage | une valeur que l'enfant reprend de son parent |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une règle a un sélecteur et des déclarations
Une règle s'écrit ainsi : un sélecteur, puis des accolades, puis des déclarations séparées par des points-virgules. Le sélecteur li vise tous les éléments li. Le sélecteur .plat vise ceux qui ont class="plat". Le sélecteur #menu vise celui qui a id="menu".
Un identifiant est unique dans la page, une classe peut servir plusieurs fois.
Exemple : trois sélecteurs, trois règles
<h1>Menu</h1>
<ul>
<li>Soupe</li>
<li class="plat">Gratin</li>
<li class="plat" id="special">Tarte</li>
</ul>Le sélecteur le plus précis gagne
Quand deux règles visent un même élément et changent la même propriété, la plus précise gagne. Un identifiant pèse plus qu'une classe, et une classe pèse plus qu'une balise.
Dans cette leçon, nous comptons ainsi : 100 pour un identifiant, 10 pour une classe, 1 pour une balise. Les navigateurs comptent en trois colonnes, mais ce nombre donne le même résultat ici.
Exemple : le poids de quelques sélecteurs
| Sélecteur | Calcul | Poids |
|---|---|---|
| li | une balise | 1 |
| .plat | une classe | 10 |
| li.plat | une balise et une classe | 11 |
| #special | un identifiant | 100 |
| ul li.plat | deux balises et une classe | 12 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À poids égal, la dernière règle gagne
Si deux règles ont le même poids, la dernière écrite l'emporte. C'est le sens du mot cascade : les règles tombent de haut en bas et la dernière valeur compte.
Dans l'exemple plus haut, li pèse 1, .plat pèse 10 et #special pèse 100. La tarte est donc rouge, le gratin vert et la soupe grise.
Avant de lancer les Run
Remarque
Démarrez le labo et ouvrez le terminal. Le script css.py lit la feuille style.css de la page d'exemple. Il écrit ses mots en anglais : declarations in veut dire déclarations dans.
Lire les règles de la feuille de style
docker exec jupyter python3 steps/css.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Compter les lignes qui ouvrent une règle
docker exec jupyter grep -c "{" site/style.cssAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Ce que montre la feuille de la page
Le script compte 17 règles et 39 déclarations. La propriété la plus utilisée est padding, six fois. Le second Run compte aussi 17 lignes avec une accolade ouvrante.
Regardez .dish et .dish.vegetarian : la seconde pèse 20 et change border-left-width, donc les plats végétariens ont un trait épais à gauche.
Un enfant reprend certaines valeurs de son parent
Certaines propriétés passent du parent à l'enfant : color, font-family, font-size. C'est l'héritage. Un p dans le body prend donc la couleur du body.
D'autres ne passent pas : margin, padding et border. Une règle sur le body qui donne une marge ne donne pas de marge à chaque paragraphe.
Une erreur fréquente
Attention
Beaucoup pensent que la règle écrite en dernier gagne toujours. Faux : l'ordre ne compte qu'à poids égal. Une règle .plat écrite après #special perd, car l'identifiant pèse plus. Comptez le poids d'abord, regardez l'ordre ensuite.