Cette page explique comment appliquer des styles de manière sélective, et les priorités des différents types de sélecteurs.
Vous ajouterez quelques attributs aux balises de votre document exemple, et vous utiliserez ces attributs dans votre feuille de style.
Information : les sélecteurs
CSS a sa propre terminologie pour décrire le langage CSS. Précédemment dans ce tutoriel, vous avez créé une ligne dans votre feuille de style comme ceci :
strong {color: red;}
Dans la terminologie CSS, toute cette ligne est une règle. Cette règle commence avec strong, qui est un sélecteur. Celui-ci sélectionne les éléments dans le DOM sur lesquels la règle va s'appliquer.
| La partie à l'intérieur des crochets courbes est la déclaration.
Le mot-clé Le point virgule après la valeur de propriété sépare celle-ci d'autres paires de propriétés/valeurs pour le même sélecteur. Ce tutoriel se réfère à un sélecteur comme |
Cette page du tutoriel donne plus de détails sur les sélecteurs utilisables dans les règles CSS. Outre les noms de balise, il est possible d'utiliser des valeurs d'attribut dans les sélecteurs. Cela permet au règles d'être plus spécifiques.
Deux attributs ont un statut spécial pour CSS. Ce sont les attributs class et id.
Utilisez l'attribut class dans une balise pour lui assigner une classe nommée. Vous pouvez choisir le nom qui vous convient pour cette classe.
Dans votre feuille de style, entrez un point avant le nom de la classe lorsque vous l'utilisez dans un sélecteur.
Utilisez l'attribut id dans une balise pour lui assigner un identifiant unique. Vous pouvez choisir le nom qui vous convient pour l'identifiant. Celui-ci doit cependant être unique au sein du document.
Dans votre feuille de style, entrez un signe dièse (carré) avant l'identifiant lorsque vous l'utilisez dans un sélecteur.
Cette balise HTML a à la fois un attribut class et un attribut id :
<P class="clef" id="principale"> L'identifiant, Dans une feuille de style CSS, cette règle rend tous les éléments de la classe
.clef {color: green;}
Cette règle rend l'élément avec l'identifiant
#principale {font-weight: bolder;}
|
Si plus d'une règle s'applique à un élément et spécifie la même propriété, CSS donne la priorité à la règle ayant le sélecteur le plus spécifique. Un sélecteur id est plus spécifique qu'un sélecteur de classe, qui lui-même est plus spécifique qu'un sélecteur de balise.
| Vous pouvez également combiner le sélecteurs, afin de créer un sélecteur plus spécifique.
Par exemple, le sélecteur Vous n'êtes pas limité aux deux attributs spéciaux Une prochaine page de ce tutoriel, (Tableaux) a des informations sur les sélecteurs complexes basés sur les relations. Pour une information complète sur les sélecteurs, consultez Selectors dans la spécification CSS. |
Si la feuille de style a des règles conflictuelles et qui sont également spécifiques, alors CSS donne la priorité à la règle qui est définie plus tard dans la feuille de style.
Lorsque vous avez un problème de conflit de règles, essayez de le résoudre en rendant une des règles plus spécifique, afin qu'elle aie la priorité. Si vous ne pouvez pas faire cela, essayez de déplacer l'une des règles plus près de la fin de la feuille de style pour lui donner la priorité.
Action : utilisation des sélecteurs class et id
Éditez votre fichier HTML, et dupliquez le paragraphe par copier-coller. Ajoutez ensuite des attributs id et class à la première copie, et un autre id à la seconde copie comme montré ci-dessous. Sinon, copiez et collez à nouveau l'entièreté du fichier :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Document exemple</TITLE>
<LINK rel="stylesheet" type="text/css" href="style1.css">
</HEAD>
<BODY>
<P id="premier">
<STRONG class="carotte">C</STRONG>ascading
<STRONG class="epinard">S</STRONG>tyle
<STRONG class="epinard">S</STRONG>heets
</P>
<P id="second">
<STRONG>C</STRONG>ascading
<STRONG>S</STRONG>tyle
<STRONG>S</STRONG>heets
</P>
</BODY>
</HTML>
Éditez à présent votre fichier CSS. Remplacez l'entièreté de son contenu par :
strong {color: red;}
.carotte {color: orange;}
.epinard {color: green;}
#premier {font-style: italic;}
Actualisez dans votre navigateur et voyez le résultat :
| Cascading Style Sheets |
| Cascading Style Sheets |
Vous pouvez essayer d'ordonner différemment les lignes dans votre fichier CSS pour constater que leur ordre n'a aucune importance.
Les sélecteurs de classe .carotte et .epinard ont priorité sur le sélecteur de balise strong.
Le sélecteur d'id #premier a priorité sur les sélecteurs de classe et de balise.
Sans modifier votre fichier HTML, ajoutez une seule règle à votre fichier CSS qui garde la même couleur pour toutes les lettres initiales que précédemment, mais rend le reste du texte du second paragraphe bleu :
À présent, changez la règle que vous venez d'ajouter (sans rien changer d'autre), pour rendre le premier paragraphe bleu également :
|
Pour continuer
Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.
Votre feuille de style d'exemple commence à avoir l'air dense et compliquée. La page suivante décrit des façons de rendre CSS plus facile à lire : Des CSS lisibles