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

m
Formatage, ajout de code
m (Formatage)
m (Formatage, ajout de code)
où ''fichier.css'' est le nom du fichier contenant les styles à importer. Cette mention doit être spécifiée ''au tout début'' de la feuille de style, avant d'éventuels styles de la feuille (''déclarations''). Elle doit aussi impérativement comporter un point-virgule (;) final. Elle peut également, si ce n'est pas déjà le cas de la feuille parente où elle se trouve, être complétée par la mention des médias cibles de ces importations.
 
Remarque : si le chemin du fichier à importer est relatif (pas de barre / devant ni de <ttcode><nowiki>http://</nowiki></ttcode>), il sera relatif au fichier contenant cette importation. Ici on a donc supposé qu'ils étaient dans le même répertoire.
 
== Utiliser les styles CSS dans une page web ==
Remarque : le chemin des fichiers CSS spécifiés peut être absolu ou relatif. Dans ce deuxième cas, il est relatif au fichier important la feuille de styles, en l'occurrence le document web. Exemple :
 
* la page web est <ttcode><nowiki>http://mon.site.org/index.html</nowiki></ttcode>
* la feuille de styles est <ttcode><nowiki>http://mon.site.org/css/styles.css</nowiki></ttcode>
 
On peut alors utiliser une des règles équivalentes suivantes :
</div></source>
 
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 « <ttcode>h1 {color: black}</ttcode> » ? Rien !
 
==== Ordre des spécificités des règles ====
Il est évident dans l'exemple pré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 « <ttcode>h1 {color: black}</ttcode> » (vaut 1 point de priorité).
# imbrication d'éléments, par exemple « <ttcode>div h1 {color: black}</ttcode> » (vaut 2 points de priorité, un par élément présent dans le sélecteur)
# utilisation d'une classe, par exemple « <ttcode>h1.noir {color: black}</ttcode> » (vaut 11 points de priorité : 1 pour l'élément, 10 pour la classe)
# utilisation d'un identifiant, par exemple « <ttcode>h1#nom-du-site {color: black}</ttcode> » (vaut 101 points de priorité : 1 pour l'élément, 100 pour l'identifiant)
# style dans la balise HTML, par exemple « <ttcode><nowiki><h1 style="color: black">...</h1></nowiki></ttcode> » (vaut 1000 points de priorité)
 
Un style de moindre priorité ne peut jamais modifier un style de priorité plus élevée. Il existe cependant un moyen de déroger à cette règle : la mention <ttcode>!important</ttcode>. Cette mention s'insère juste derrière une valeur de propriété CSS et indique au navigateur qu'il ne faut pas tenir compte de styles contradictoires par la suite. Elle s'utilise de cette manière :
 
p {
mais moins que :
 
div#page p em.rouge</ttcode>
 
Ainsi lorsque l'on parcourt les différentes spécificités dans l'ordre décroissant, on obtient :
 
* « <ttcode>div#page</ttcode> » qui met tout le monde à égalité
* « <ttcode>em.rouge</ttcode> » qui indique que la dernière règle est prioritaire
* « <ttcode>p em</ttcode> » qui place la première en priorité 2
* « <ttcode>em</ttcode> » qui place la deuxième en dernière priorité
 
En corollaire, 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 :
</div></source>
 
le style des liens ''A'' doit vraisemblablement être spécifié en partant d'une règle simple comme « <ttcode>div#page a</ttcode> » plutôt que « <ttcode>div#page p ul li a</ttcode> » d'emblée. C'est seulement si d'autres liens apparaissent dans la page en dehors des listes que l'on utilisera « <ttcode>div#page li a</ttcode> », et ainsi de suite.
 
<noinclude>{{Programmation CSS | prec=[[../Premier exemple/]] | suiv=[[../Les sélecteurs/]]}}</noinclude>