CSS3 – Notions de cascade et d’héritage

LEÇON

 

CSS et la signification du mot cascade

 

Le terme "cascade" dans "Feuille de Style en Cascade" évoque la méthode via laquelle les règles CSS sont appliquées aux éléments présents dans le document HTML.

Si plusieurs règles semblent s'appliquer à un seul élément, comment savoir celles qui s'appliquent réellement ?

Pour comprendre la méthode on peut évoquer une sorte de cascade :

  • imaginer des pots qui contiennent les règles CSS sous forme d'eau
  • on "verse" les pots un par un, sur les éléments HTML, en commençant par celui ayant les règles les plus générales, suivi des pots avec les règles de plus en plus spécifiques
  • les règles "collent" aux éléments
  • les règles "rincent" et remplacent celles du même type qui sont précédemment collées.

 

Voici un exemple :

style.css

body
{
  color:orange;
  text-align:center;
}

.special
{
  color:green;
}

p
{
  color:blue;
  font-size:30px;
}

#wrapper
{
  color:red;
  font-weight:bold;
  letter-spacing:30px;
}

mapage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div id="wrapper">
        <p class="special">
          Lorem ipsum dolor
        </p>
      </div>
    </body>
</html>

 

On voit bien que le texte "Lorem ipsum dolor" est éventuellement ciblé par les 4 groupes de règles car

  • il se trouve dans le body du document
  • il se trouve à l'intérieur d'un élément identifié par "wrapper"
  • il se trouve dans un paragraphe
  • il se trouve à l'intérieur d'un élément avec classe "special"

 

IMPORTANT : C'est la hiérarchie (la structure) du document HTML qui détermine quelles règles sont considérées plus génériques et lesquelles sont considérées plus spécifiques  :

  • plus haut dans la hiérarchie = plus générique
  • plus bas dans la hiérarchie = plus spécifique

L'ordre dans lequel les règles se trouvent dans le document CSS n'a donc pas d'importance dans cet exemple !

 

IMPORTANT : ne pas confondre la priorité des règles avec sélecteurs identiques (comme on a vu dans la leçon CSS3 – Intégration dans le HTML) avec la notion de cascade.

 

Dans l'exemple, si on met les règles dans l'ordre du plus générique au plus spécifique, on obtient :

  • les règles du sélecteur balise body
  • les règles du sélecteur id "wrapper"
  • les règles du sélecteur balise p
  • les règles du sélecteur class "special"

 

Maintenant on va imaginer qu'on verse les pots, un par un, dans l'ordre évoqué. Par rapport au texte "Lorem ipsum dolor" :

 

  • après le 1er pot (balise body), les règles qui "collent" sont :
color:orange;
text-align:center;

 

  • après le 2ème pot (id wrapper), les règles qui "collent" sont :
text-align:center;
color:red;
font-weight:bold;
letter-spacing:30px;

 

  • après le 3ème pot (balise p), les règles qui "collent" sont :
text-align:center;
font-weight:bold;
letter-spacing:30px;
color:blue;
font-size:30px;

 

  • après le 4ème pot (classe special), les règles qui "collent" sont :
text-align:center;
font-weight:bold;
letter-spacing:30px;
font-size:30px;
color:green;

 

Mini-exercice

Reproduire les 2 fichiers (style.css et mapage.html) de l'exemple ci-dessus et afficher la page dans un navigateur.

On devrait obtenir un résultat similaire à ceci :

css_notions_cascade_heritage_capture_ecran

 

CSS et héritage

 

On voit bien dans l'exemple ci-dessus que l'élément p a hérité certaines choses de ses "parents" (les éléments qui le contiennent) :

  • text-align:center; de la balise body, et
  • font-weight:bold; letter-spacing:30px; de la balise div avec id wrapper

 

D'un certain point de vue donc, l'héritage est une autre façon (par rapport à la notion de cascade) de voir comment les règles CSS s'appliquent : on applique les règles de ses "ancêtres", des plus anciens aux plus récents, puis enfin ses propres règles. Les règles appliquées en dernier priment.

 

Mais le concept d'héritage nous permet de comprendre un concept supplémentaire :

  • certaines règles ne sont pas héritées !

 

La liste complète est disponible ici : w3.org (voir la colonne inherited? yes/no)

Parmi les règles qui ne sont pas héritées, en voici quelques-unes fréquemment employées :

  • bordures
  • marges et padding
  • taille (height, width)
  • background

 

Voici un exemple :

style2.css

body
{
  background-color:black;
  padding:50px;
  text-align:center;
}

#wrapper
{
  background-color:red;
  border:10px solid gray;
  letter-spacing:30px;
}

p
{
  background-color:blue;
  color:white;
  font-size:30px;
}

mapage2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="style2.css">
    </head>
    <body>
      <div id="wrapper">
        <p>
          Lorem ipsum dolor
        </p>
      </div>
    </body>
</html>

Qui donne le suivant à l'affichage (dans Firefox ou Chrome) :

css_notions_cascade_heritage_capture_ecran_2

 

Remarquer :

  • uniquement la règle text-align:center; du body est héritée par l'élément p (on ne voit pas de padding:50px dans la zone bleue du paragraphe)
  • uniquement la règle letter-spacing:30px; du div/wrapper est héritée par la balise p (on ne voit pas de cadre autour de la zone bleue du paragraphe, uniquement autour du div)

 

Les règles par défaut du navigateur

D'où vient alors la zone rouge dans l'exemple ci-dessus ? Car le div contient uniquement un paragraphe et le paragraphe a un fond bleu.

Pour enlever cette zone rouge (sans enlever le div ou changer sa couleur de fond), ajouter la règle pour margin dans le sélecteur d'élément p, comme ceci :

p
{
  background-color:blue;
  color:white;
  font-size:30px;
  margin:0px;
}

 

Ainsi on découvre que dans Firefox/Chrome il y a une marge par défaut (margin-top et margin-bottom) pour la balise p. Et c'est seulement quand on redéfinit explicitement la marge que les choses rentrent dans l'ordre.

 


 

EXERCICES

  1. Si ce n'est pas encore fait, faire le mini-exercice ci-dessus (pour style.css et mapage.html)
  2. Reproduire le 2ème exemple (style2.css et mapage2.html, tels qu'ils sont écrits ci-dessus) et observer l'affichage de la page dans Firefox ou Chrome. Puis faire disparaître la zone rouge via la méthode suggérée. Rafraîchir la page pour observer la différence.
  3. Voici une page web écrit en HTML et CSS. Déduire la couleur du texte pour chaque ligne affichée.

ex3.css

css_notions_cascade_heritage_ex3_css

ex3.html

css_notions_cascade_heritage_ex3_html