CSS : Cascading Style Sheets
Les sélecteurs
Les sélecteurs sont la première partie d'une règle CSS. Il s'agit d'une syntaxe servant à identifier les éléments du document auxquels la règle s'appliquera.
La norme CSS 1.0 datant de 1996 a défini des sélecteurs qui sont aujourd'hui très bien supportés parmis les navigateurs.
Un élément du document
Afin de styler un élément du document, le sélecteur devra être le nom de l'élément. Par exemple pour mettre en bleu le texte des titres de niveau 1, le sélecteur sera h1 :
h1
{
color: blue;
}
Une classe en tant que sélecteur
Le langage HTML définit un attribut accepté par tous les éléments HTML, il s'agit de l'attribut class. Il permet de donner une classe à un élément.
Il est alors possible dans le fichier CSS de sélectionner tous les éléments possédant une certaine classe. Il suffit de faire précéder le nom de la classe par un point (.) pour obtenir le sélecteur correspondant à cette classe.
On peut par exemple affecter une classe Important pour tous les éléments que nous considérons importants. Il est alors possible de spécifier dans le fichier CSS une règle pour écrire en rouge le texte de tous les éléments possédant la classe Important.
<p class="Important">Coucou</p>
...
.Important
{
color: red;
}
Un identifiant en tant que sélecteur
Le langage HTML définit un attribut accepté par tous les éléments HTML, il s'agit de l'attribut id. Il permet de donner un identifiant unique à un élément.
Il est alors possible dans le fichier CSS de sélectionner l'élément possédant cet identifiant. Il suffit de faire précéder le nom de l'identifiant par un dièse (#) pour obtenir le sélecteur correspondant à cet identifiant.
On peut par exemple affecter une identifiant Menu pour distinguer notre menu dans le document. Il est alors possible de spécifier dans le fichier CSS une règle pour ne pas afficher notre menu.
<div id="Menu">
...
</div>
...
#Menu
{
display: none;
}
Sélecteur contextuel
Il est possible de spécifier un sélecteur comme contexte pour un autre sélecteur. On peut par exemple vouloir sélectionner tous les éléments <em> se trouvant dans un élément <p> pour leur attribuer une police en gras.
Ceci se fait en séparant les sélecteurs par une espace. Pour notre exemple, nous obtiendrons cette règle :
p em
{
font-weight: bold;
}
Regroupement de sélecteurs
Il est possible d'appliquer une même règle à plusieurs sélecteurs, permettant ainsi de réduire la taille du fichier CSS. Il faut pour cela séparer les différents sélecteurs par une virgule (,).
Si l'on souhaite par exemple écrire en rouge les éléments possédant la classe Important et les titres de niveau 2, on pourra alors écrire :
.Important, h2
{
color: red;
}
Éléments supplémentaires
La norme CSS1 prévoit une syntaxe supplémentaire pour des éléments qui n'ont pas été définis dans le document.
Les pseudo-classes de liens
Dans le sélecteur, il est possible de faire référence aux différents états que peut prendre un lien HTML au cours de la visite d'une page web. On retrouve donc les syntaxes suivantes :
a:link- pour faire référence aux liens non visités ;
a:visited- pour faire référence aux liens visités ;
a:active- pour faire référence aux liens en activation ;
a:hover- pour faire référence aux liens survolés.
Il est aussi possible de combiner ces pseudo-classes pour obtenir des sélecteurs plus précis :
a:visited:hover- pour faire référence aux liens visités survolés.
Pseudo-éléments typographiques
Il existe des pseudo-éléments faisant référence à des partie de texte et permettant des effets graphiques sans recourir à un balisage complexe.
Élement:first-line- Ce pseudo-élément fait référence à la 1re ligne graphique de l'élément.
Élément:first-letter- Ce pseudo-élément fait référence à la 1re lettre de l'élément. Il est notamment utilisé pour dessiner des lettrines.
Sélécteurs supplémentaires
Les sélecteurs présentés ci-desssus ne sont que les sélecteurs disponibles dans la norme CSS1. La nouvelle spécification CSS 2.1 ajoute de nouveaux sélécteurs beaucoup plus puissants. Ces sélecteurs sont tous présentés dans la page de la spécification.
Malheureusement, ces sélecteurs sont encore mal gérés par des anciens navigateurs comme Internet Explorer 6.