« Le langage CSS/Structure et syntaxe » : différence entre les versions
Contenu supprimé Contenu ajouté
intro revue |
|||
Ligne 221 :
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 :▼
▲
# élément Html, par exemple « <tt>h1 {color: black}</tt> »
Ligne 237 ⟶ 239 :
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é ====
div#page p em
Ligne 255 ⟶ 258 :
* « <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)]]
|