 SELFHTML/Aides à la navigation Feuilles de style CSS Définir des formats CSS |
|
 |
Cascade - Application des feuilles de style aux documents |
|
|
 | |
Sortes de feuilles de styleSi un fichier HTML dépourvu de formatage HTML ou CSS est affiché par un navigateur, alors il le sera avec un formatage de base prédéfini. Un navigateur graphique affichera les titres, par exemple, en gras, avec une taille de de texte supérieure, et les fera suivre d'un nouveau paragraphe. Ceci nécessite une feuille de style pour le navigateur qui contient les informations de base concernant l'affichage des éléments. Le W3 a publié un 
exemple de feuille de style pour HTML version 4.0.
Lorsque vous 
incorporez des feuilles de style en HTML, alors vous compléterez ou écraserez la feuille de style du navigateur. Des feuilles de style définies par l'auteur sont nommées des feuilles de style d'auteur (bien évidemment).
En plus, le visiteur de vos pages a la possibilité d'incorporer ce qu'on appelle une feuille de style de visiteur, contenant des définitions supplémentaires sur comment afficher les éléments; elle fixera, par exemple, une taille de texte minimale ou bien une présentation utilisant des couleurs bien contrastées.
Dans toutes les sortes de feuilles de style - même dans une seule - il arrive que soient notées des indications contradictoires.
<ul id="menu"> <li>Boutons d'une liste avec un <a class="xy" href="but.htm">lien</a></li> </ul>
a:lien { propriete:valeur; }
.xy { propriete:valeur; }
#menu a.xy { propriete:valeur; }
li a { propriete:valeur; }
#menu li a { propriete:valeur; }
Tous les sélecteurs nommés influencent, chacun séparément, l'élément a noté dans le code source HTML. En plus de cela, la feuille de style du navigateur contient déjà des déclarations pour les liens - généralement en bleu et soulignés dans les navigateurs graphiques. Il faut également tenir compte d'une éventuelle feuille de style du côté du visiteur.
Pour décider comment, finalement, les éléments doivent être affichés, les navigateurs suivent certaines règles qui sont décrites dans ce qui suit.
Dans un premier temps on recherche si une propriété CSS a été définie pour un élément, valable pour le type de média indiqué. Ceci concerne les feuilles de style du navigateur, de l'auteur ainsi que du visiteur. Si un seul sélecteur concerne un certain élément, les propriétés contenues dans celui-ci seront appliquées et on passe à l'élément suivant. Cependant, lorsque plusieurs feuilles de style donnent différentes indications, il s'agira de déterminer, dans un deuxième temps, leurs origine et priorité.
Les définitions dans les feuilles de style incorporées de différentes origines seront classées selon l'ordre descendant en importance:
Feuille de style de visiteur avec mention !important
Feuille de style d'auteur avec mention !important
Feuille de style d'auteur
Feuille de style de visiteur
Feuille de style du navigateur
La base de l'affichage est la feuille de style du navigateur. Si, par contre, la feuille de style d'un visiteur contient des déclarations différentes, celles-ci écrasent la feuille de style du navigateur et définissent ainsi, en l'absence de propositions du côté de l'auteur, l'affichage d'une page. Si vous définissez des formatages dans la feuille de de style d'auteur, elles seront considérées comme plus importantes que la feuille de style du visiteur. Mais cela n'est pas valable pour des indications dans la feuille de style du visiteur fixées par la règle !important présentée ci-dessous.
Lorsqu'un navigateur rencontre des déclarations différentes pour la même propriété, dans des feuilles de style de plusieurs origines, il sera tenu compte de celle de plus haute importance. Ensuite l'élément suivant sera traîté. Si, de plus, plusieurs sélecteurs dans des feuilles de style d'égale importance concernent l'élément à traîter, alors c'est la spécificité des sélecteurs qui sera déterminée dans une prochaine étape.
!importantLes déclarations munies de la mention !important écrasent des déclarations similaires sans cette mention. Le recours à cette méthode est possible autant dans les feuille de style d'auteur que dans celles de visiteur.
p { font-size:1em !important; }
La chaîne de caractères "!important" suit la valeur, séparée d'elle par un espace vide.
Dans les premières spécifications CSS, l'emploi de la règle !important dans les feuilles de style d'auteur primait la même règle employée dans les feuilles de style de visiteur. Cela a été corrigé avec CSS2, pour donner aux visiteurs la possibilité d'adapter l'affichage à leurs besoins. Il n'existe donc plus, du côté de l'auteur, la possibilité d'annuler des propriétés désirées par les visiteurs.
Spécificité des sélecteursLes composants de tous les sélecteurs seront d'abord isolés, et ensuite ceux-ci seront subdivisés dans les catégories suivantes:
A obtient la valeur 1, si des déclarations CSS ont été données à l'élément directement par attribut de style.
B correspond au nombre d' attributs ID sélectionnés (#id)
C correspond au nombre d'autres attributs sélectionnés (par ex. classes) et pseudo-classes (.classe, :pseudoclasse)
D correspond au nombre de noms d'éléments sélectionnés (e) et de pseudo-éléments (:pseudoelement)
| Sélecteur | A | B | C | D |
|---|---|---|---|---|
style="…" (HTML) |
1 | 0 | 0 | 0 |
#menu a.xy |
0 | 1 | 1 | 1 |
#menu li a |
0 | 1 | 0 | 2 |
#menu a |
0 | 1 | 0 | 1 |
#menu |
0 | 1 | 0 | 0 |
ul li .xy |
0 | 0 | 1 | 2 |
a:lien |
0 | 0 | 1 | 1 |
a.xy |
0 | 0 | 1 | 1 |
ul[id="menu"] |
0 | 0 | 1 | 1 |
*.xy |
0 | 0 | 1 | 0 |
li a |
0 | 0 | 0 | 2 |
a:first-line |
0 | 0 | 0 | 2 |
a |
0 | 0 | 0 | 1 |
Le tableau montre la catégorisation de tous les composants des sélecteurs mentionnés dans l'ordre décroissant de leur spécificité. D'abord tous les sélecteurs sont triés selon l'ordre décroissant de leur valeur citée dans la colonne A, ensuite d'après celui dans les colonnes B, C et enfin D. Une valeur de "1 0 0 0" est donc supérieure à "0 1 2 0" ou "0 0 1 2". Dans l' exemple ci-dessus, c'est le sélecteur #menu a.xy qui atteint la spécificité la plus haute(0 1 1 1) et qui écrase par conséquent les déclarations précédentes. Les sélecteurs notés après, li a (0 0 0 2) et #menu li a (0 1 0 2) présentent une spécificité inférieure et seront, par conséquent, ignorés:
| Sélecteur | A | B | C | D |
|---|---|---|---|---|
a:lien |
0 | 0 | 1 | 1 |
*.xy |
0 | 0 | 1 | 0 |
#menu a.xy |
0 | 1 | 1 | 1 |
li a |
0 | 0 | 0 | 2 |
#menu li a |
0 | 1 | 0 | 2 |
S'il n'existe, dans une feuille de style, qu'un seul sélecteur de spécificité maximale, alors la règle est appliquée et on continue avec l'élément suivant. Sinon c'est l' ordre d'apparition qui décide.
Il n'est pas tenu compte du sélecteur universel * ni des formatages HTML. Le calcul ne se fait pas selon le système décimal, "0 0 1 2" est donc plus spécifique que, par exemple, "0 0 0 42".
CSS 2.1 est différent de CSS2 dans les points suivants:
Des attributs de style notés directement dans le code HTML étaient encore de même valeur que les attributs ID dans CSS2, et augmentaient la valeur indiquée (maintenant) sous B, l'actuelle colonne A n'existait pas encore.
Des pseudo-éléments (:first-line, :first-letter, :before et :after), maintenant additionés sous D, ne jouaient encore aucun rôle dans l'établissement de la spécificité.
S'il existe deux sélecteurs, ou plus, d' origine et priorité ainsi que de spécificité identiques, c'est l'ordre d'apparition qui décide - les sélecteurs notés après annullent les précédents. Les déclarations émanant de feuilles de style importées sont prioritaires.
|
| |
 |
Unités de mesure, mentions de couleur et affectation de valeurs
|
 |
Formater directement des éléments HTML
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Définir des formats CSS |
|
© 2007 Redaktion SELFHTML / © 2007 Traduction Beate Niklewicz
selfhtml@fr.selfhtml.org