La cascade

Les trois questions

1. Des règles ciblent-elles l’élément ? La plus spécifique l’emporte.
2. Sinon, il hérite de son parent.
3. Aucune règle sur lui ni sur ses parents : le navigateur applique un style par défaut.

L’héritage

De quelle couleur est le h2 ?

<div class="carte">
    <h2>Lisbonne</h2>
    <p>Trois jours au bord du Tage.</p>
</div>

.carte { color: teal; }

Une seule règle, sur la carte.

Bleu-vert

Aucune règle ne le cible : il hérite de son parent.

teal, c’est la couleur de .carte.

Plusieurs ancêtres

Rouge ou bleu ?

<section>
    <div>
        <p>Hello</p>
    </div>
</section>

div { color: blue; }
section { color: red; }

Deux ancêtres, deux couleurs.

Bleu

On hérite du parent le plus proche.

Le div a sa propre règle, le paragraphe la reçoit.

Ce qui s’hérite

• Oui : la couleur, la police, la taille du texte.
• Non : le fond, les bordures, la largeur, les marges.

Le piège

De quelle couleur est « Hello » ?

<div id="page">
    <p>Hello</p>
</div>

#page { color: red; }
p { color: blue; }

Un id contre une balise.

Bleu

Une règle qui cible l’élément bat toujours l’héritage.

#page ne cible pas le paragraphe : son poids ne compte pas.

Le sélecteur universel

De quelle couleur est le h2, maintenant ?

<div class="carte">
    <h2>Lisbonne</h2>
</div>

* { color: green; }
.carte { color: red; }

Deux règles, dont une étoile.

Vert

L’étoile cible tous les éléments : plus rien n’hérite.

Elle pèse 0, mais elle cible le h2. Les balises du texte aussi, comme b ou em.

L’hexadécimal

#rrvvbb

• Du rouge, du vert, du bleu, de 00 à ff.
• #ff0000 est rouge, #000000 est noir.
• #f00 s’écrit aussi #ff0000.

Bleu

#0000ff

Rien de rouge (00), rien de vert (00), du bleu à fond (ff).

Quelle couleur ?

tzi.fr/jeu-css-6