Nous allons, dans ce chapitre, parler de la notion de cascade utilisée avec CSS. Je rappelle que CSS signifie (Cascading Style Sheet). Comme nous venons de le voir, dans le chapitre précédent, vous avez trois possibilités (trois localisations) pour pouvoir spécifier vos définitions de style. Que se passe t'il, si des définition contradictoires sont spécifiées dans vos documents.
En fait, des règles bien précises vous permettent d'anticiper sur les conséquences de telles définitions. Ce sont ces règles dont nous allons parler dans ce document. Afin de mieux comprendre ce qui va être présenter, je vous propose d'étudier l'exemple suivant : il nous servira de référence pour tout ce document.
<html>
<head>
<style>
<!--
P { color: red; }
B { color: blue; }
-->
</style>
</head>
<body>
<p style="color: green">Ceci est un petit paragraphe de test
pour voir comment les styles se propagent dans les tags.
<u>Ceci est un petit paragraphe</u> de test pour voir
comment les styles se propagent dans les tags.
</p>
<p>Ceci est un petit paragraphe de test pour voir comment les
styles se propagent dans les tags. <b>Ceci est un petit
paragraphe</b> de test pour voir comment les styles se
propagent dans les tags.
</p>
<p>Ceci est un petit paragraphe de test pour voir comment les
styles se propagent dans les tags. <b>Ceci est un petit
paragraphe</b> de test pour voir comment les styles se
propagent dans les tags.
</p>
</body>
</HTML>
|
Comme nous l'avons vu dans le document précédent, vous pouvez donc spécifier votre style en trois endroits. Que ce passe t'il si des définitions sont contradictoires ? En fait, ces très simple : c'est la définition la plus spécifique qui l'emporte.
Si l'on revient sur l'exemple précédent, vous avez pu noter qu'il est spécifié que pour la page, tous paragraphes devaient s'afficher en rouge. Or, le premier tag de paragraphe contient un paramètre style fixant la couleur pour ce dernier à vert. En conséquence, le premier paragraphes s'affiche en vert, pour les autres, la couleur par défaut sera rouge.
De plus, si dans un fichier CSS de définition de styles, on avait spécifié une autre couleur pour les paragraphes, cette dernière aurait été ignorée. Effectivement, une définition hors de la page HTML est plus générale que celle définie dans la page, et n'oubliez pas que c'est la définition la plus spécifique qui s'applique en priorité.
En l'absence de caractéristiques contradictoire, les définitions se cascadent dans les sous tags. Pour s'en convaincre, regardez ce qui se passe dans le premier paragraphe : une section de texte est soulignée. Malgré cela elle apparaît bien dans la même couleur que le paragraphe. Heureusement, d'ailleurs.
Néanmoins, attention : si les sous tags possèdent eux-mêmes une autre définition pour la même caractéristique (exemple, la couleur) alors c'est cette dernière qui s'applique, car c'est encore la caractèristique la plus spécifique qui s'applique.
Au terme de ce chapitre, vous pouvez donc retenir la chose suivante : la spécification la plus locale (la plus spécifique) s'applique. Dans les autres cas, les définitions sont cascadées dans les sous tags.
Cela constitue le meilleurs choix : on peut ainsi définir un style général et, pour certains tags, venir spécifier un style adapté. Dans le chapitre suivant, nous allons parler des sélecteurs CSS : ce sont eux qui permettent de dire à qui les définitions de style s'appliquent.
Retour à la table des matières
Améliorations / Corrections
Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.
Emplacement :
Description des améliorations :