La cascade et l'héritage en CSS

Comment le navigateur choisit entre des déclarations qui se contredisent (origine, !important, spécificité, ordre), quelles propriétés passent aux enfants, et les trois façons d'attacher du CSS à une page.

23 cartes
4 thèmes
Gratuit

Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

Notions
Questions
Ranger et relier
Mises en situation

Quelques cartes du deck

Cascade : de quoi s'agit-il ?
Voir la réponse
Algorithme qui choisit une seule valeur quand plusieurs déclarations visent la même propriété du même élément : origine et !important, puis spécificité, puis ordre d'écriture.
Les critères s'appliquent dans cet ordre et le premier qui départage décide : l'ordre d'écriture ne sert qu'à spécificité égale.
De quelle couleur est le paragraphe ?

```html
<style>
p { color: red; }
.intro { color: green; }
p { color: blue; }
</style>
<p class="intro">Bonjour</p>
`
- Vert : la classe pèse plus que le type
- Bleu : la dernière règle écrite gagne toujours
- Rouge : la première règle écrite est prioritaire
- Bleu : deux règles de p valent plus qu'une classe
Voir la réponse
Vert : la classe pèse plus que le type
La classe (0, 1, 0) bat le type (0, 0, 1) : l'ordre ne compte qu'à spécificité égale, et ici il ne départage que les deux règles p entre elles.
À spécificité égale, c'est la déclaration … qui l'emporte, même si elle vient d'un autre fichier.
Voir la réponse
À spécificité égale, c'est la déclaration écrite en dernier qui l'emporte, même si elle vient d'un autre fichier.
L'ordre d'apparition est le dernier critère de la cascade : inverser deux règles de même poids inverse le résultat.
Héritage : de quoi s'agit-il ?
Voir la réponse
Mécanisme par lequel un élément reprend la valeur calculée de son parent pour certaines propriétés, quand aucune règle ne la fixe directement.
Les propriétés de texte (couleur, police, interligne) sont héritées, celles de la boîte (marge, bordure, fond) ne le sont pas : sinon chaque enfant redessinerait la bordure de son parent.
Tu écris body { font-family: Georgia, serif; }. Les paragraphes changent de police, mais les boutons et les champs de formulaire gardent celle du système. Quelle est l'explication ?
- font-family n'est pas héritée, il faut la répéter sur chaque élément concerné
- Les contrôles de formulaire ignorent tout le CSS de l'auteur, seul le HTML les règle
- La feuille par défaut du navigateur fixe leur police : font: inherit sur button, input la rétablit
- Un body ne peut transmettre sa police qu'aux balises de texte, jamais aux autres
Voir la réponse
La feuille par défaut du navigateur fixe leur police : font: inherit sur button, input la rétablit
font-family est bien héritée, mais une règle du navigateur sur button et input la remplace pour ces éléments : la valeur héritée n'est utilisée que si aucune règle ne fixe la propriété.

Réviser ce deck