< Cascading Style Sheet
fin de la boite de navigation du chapitre


Introduction

On va s'attaquer dans ce chapitre au "Cascading" des CSS, un concept clé à connaître. Actuellement avec nos maigres connaissances, nous ne pouvons comprendre pourquoi les liens sont par défaut en bleu et soulignés, nous ne pouvons pas comprendre non plus pourquoi ce code ci-dessous :

html p {color:blue;}
p {color:yellow;}
* p {color:red;}

donnera au final une couleur bleu au texte de notre paragraphe.

Arbre de document et propriétés

Le parseur CSS construit un arbre de document avec tous les éléments et leur position (parent, enfant, descendant...). Il existe au moins une centaine de propriété CSS, il faut savoir que le parseur va assigner à chaque élément toutes les propriétés avec une certaine valeur. Certaines propriétés ne peuvent s'appliquer à un élément, par exemple la propriété "list-type" utile pour décorer nos listes ne peut être appliquée à l'élément body par exemple, mais le parseur va quand même l'assigner à l'élément body (on verra tout à l’heure pourquoi).

Imaginons un document comme celui-là :

<html>
<body>
Populaire

</body>
</html>

Le parseur va faire un arbre :

  • html : propriété1:valeur; propriété2:valeur; ...
  • body : propriété1:valeur; propriété2:valeur; ...
  • p : propriété1:valeur; propriété2:valeur; ...

Maintenant quelle valeur va t-il associer à la propriété ? Premièrement il va regarder si cette valeur n’est pas directement spécifiée dans les feuilles de styles.

Feuilles de style à plusieurs niveaux

Il n'y a pas que les auteurs de documents qui utilisent des feuilles mais aussi ceux qui conçoivent le programme interprétant le CSS tel un navigateur graphique ou encore éventuellement les utilisateurs (les "user styles").

<h1>Premier titre</h1>
<h2>Deuxième titre</h2>

Feuille navigateur

Si vous testez le code ci-dessus, vous apercevez les deux titres l'un en dessous de l'autre. Ceci est causé non pas par le retour à la ligne dans notre code mais par la feuille de style navigateur :

h1 {display:block;}

Les feuilles de style des navigateurs, bien que le W3C en recommande une, peuvent varier d'un navigateur à l'autre mais ce n’est pas le cas ici. Il est possible de lire voire modifier une feuille soit dans le programme d'installation du programme (c'est le cas pour Firefox), soit dans le code source (c'est le cas pour les programmes basés sur WebKit tel Safari ou Chrome).

Feuille auteur

Nous voulons que ces titres soient côte à côte, donc nous faisons simplement

h1 {display:inline;}

Feuille utilisateur

Nous voulons remettre un titre par ligne, il nous faut ajouter le mot clé "!important" pour que notre déclaration prenne le dessus :

h1 {display:block !important;}

Récapitulatif

Il y a donc un certain ordre de priorité croissante[1] :

  1. CSS navigateur (!important ou non) ;
  2. CSS utilisateur ;
  3. CSS auteur ;
  4. CSS auteur !important ;
  5. CSS utilisateur !important.

De même, le poids de chaque sélecteur est différent[2], du moins au plus prioritaire :

  1. Balise ;
  2. Classe ;
  3. Identifiant ;
  4. Attribut style.
Exemple

Et si tous les acteurs ne spécifient pas dans les feuilles quel doit être la valeur de display pour h1 ? Les h1 seront-il "inline" ou "block" ?

Fin de l'exemple

Héritage

Le programme va déjà chercher si la propriété s'hérite, ce n’est pas le cas de display. On va prendre donc pour cette partie un autre exemple : la propriété list-style-type qui permet de définir le type de puce des items de liste (éléments li en (X)HTML).

<ol>
<li>Item de liste</li>
</ol>

Le fait qu’il y ait un 1 devant notre item est du à la feuille de style navigateur qui spécifie :

ol {
  list-style-type: decimal;
}

Or on a dit que cette propriété ne pouvait s'appliquer qu'aux éléments li, il y a donc un certain phénomène appelé héritage qui se produit. Comme le parseur CSS ne trouve pas cette propriété spécifiée sur la balise li, il va chercher si celle-ci est spécifiée dans les éléments parents de cette balise, c'est-à-dire ol, body et html dans notre cas simpliste. Il la trouve spécifiée sur la liste ol, on dit donc que l'item de liste li hérite de la valeur décimale.

Exemple

Il nous reste encore une interrogation : si les parents ne donnent pas non plus une valeur spécifiée, comment va être notre puce ?

Fin de l'exemple

Valeur initiale et récapitulatif

Il va associer en faite la valeur initiale de la propriété à l'élément. Dans notre cas de figure, il va donc associer la valeur "disc" ou rond plein. Toutes les propriétés ont des valeurs initiales qui sont définies dans la spécification.

Pour récapituler :

  1. Si le parseur trouve une valeur spécifiée dans les feuilles de style, il l'assigne à l'élément
  2. Sinon s'il trouve une valeur spécifiée associée aux ancêtres de l'élément, il va assigner cette valeur à l'élément.
  3. Sinon il assigne la valeur initiale à l'élément.

Références

Voir aussi

Cet article est issu de Wikiversity. Le texte est sous licence Creative Commons - Attribution - Partage dans les Mêmes. Des conditions supplémentaires peuvent s'appliquer aux fichiers multimédias.