« Le langage CSS/Structure et syntaxe » : différence entre les versions

(intro revue)
Nous supposons ici que les éléments du menu sont tous contenus dans un unique bloc parent, un élément ''div'' d'identifiant ''menu''. Que se passerait-il si une feuille de styles importée par la suite modifiait à nouveau la couleur des éléments de titre Html par un « <tt>h1 {color: black}</tt> » ? Rien !
 
==== Ordre des spécificités des règles ====
En effet il est évident dans cet exemple que les titres du menu ne doivent pas être traités comme les autres titres. Aussi, plus le sélecteur d'élément est en quelque sorte ''précis'' dans sa cible, plus sa priorité est importante. La précision du sélecteur est appelé ''spécificité'' dans le jargon CSS. L'ordre des spécificités est le suivant, de la moins prioritaire à la plus prioritaire :
 
En effet ilIl est évident dans cetl'exemple exempleprécédent que les titres du menu ne doivent pas être traités comme les autres titres. Aussi, plus le sélecteur d'élément est en quelque sorte ''précis'' dans sa cible, plus sa priorité est importante. La précision du sélecteur est appelé ''spécificité'' dans le jargon CSS. L'ordre des spécificités est le suivant, de la moins prioritaire à la plus prioritaire :
 
# élément Html, par exemple « <tt>h1 {color: black}</tt> »
Cette mention n'est toutefois pas interprétée par les Internet Explorer 5.0, 5.5 et 6.0 de Microsoft, il ne faut donc pas compter sur elle pour contourner les règles de priorité !
 
==== Calcul de spécificité ====
Remarque : leLe calcul de la spécificité d'une règle se fait en partant des éléments les plus spécifiques au moins spécifiques. À chaque pas, le décompte du nombre de sélecteurs correspondant à la spécificité indique le niveau de priorité. En effet, il est normal que :
 
div#page p em
* « <tt>p em</tt> » qui place la première en priorité 2
* « <tt>em</tt> » qui place la deuxième en dernière priorité
 
En corrolaire, ceci signifie qu'il vaut toujours mieux '''utiliser le moins possible de sélecteurs''' pour simplifier l'ajout de règles plus spécifiques. Par exemple dans le code Html suivant :
 
<nowiki><div id="page">
<p> ...
<ul>
<li> <a>...</li>
...
</ul>
</p>
</div></nowiki>
 
le style des liens ''A'' doit vraisemblablement être spécifié en partant d'une règle simple comme « <tt>div#page a</tt> » plutôt que « <tt>div#page p ul li a</tt> » d'emblée. C'est seulement si d'autres liens apparaissent dans la page en dehors des listes que l'on utilisera « <tt>div#page li a</tt> », et ainsi de suite.
 
[[Catégorie:Programmation CSS (livre)]]
181

modifications