Chapitre 10. CSS

Les règles d'une feuille de style peuvent dépendre du média utilisé pour rendre le document. Par média, on entend le support physique servant à matérialiser le document. Il peut s'agir d'un écran d'ordinateur, d'un projecteur, de papier. La syntaxe est la suivante.

@media medium {
    /* Règles pour le média */
    ...
}

Les principales valeurs possibles pour medium sont screen pour un écran d'ordinateur, print pour du papier et projection pour un projecteur.

Un sélecteur prend la forme générale suivante. Il est constitué par une suite de sélecteurs séparés par des virgules. Il sélectionne alors tous les éléments sélectionnés par chacun des sélecteurs individuels.

 selector1, selector1, ..., selectorN

La forme la plus simple d'un sélecteur est le nom name d'un élément comme h1, p ou encore pre. Tous les éléments de nom name sont alors sélectionnés. Dans l'exemple suivant, le fond de l'élément body, c'est-à-dire de tout le document, est blanc.

body { 
    background-color: white; 
}

Tous les éléments dont l'attribut class contient la chaîne classname peuvent être sélectionnés par le sélecteur .classname où la valeur de l'attribut est précédée d'un point '.'.

L'attribut class d'un élément peut contenir plusieurs chaînes séparées par des espaces comme dans l'exemple suivant. Un sélecteur de forme .classname sélectionne un élément si la chaîne classname est une des chaînes de la valeur de l'attribut class.

<p class="numbered equation"> ... </p>

Cette forme de sélecteur peut être combinée avec le nom name d'un élément pour former un sélecteur name.classname qui sélectionne tous les éléments de nom name dont l'attribut class contient la chaîne classname. Dans l'exemple suivant, tous les éléments p de classe equation ou figure auront leur texte centré.

p.equation, p.figure {
    text-align: center;
}

L'élément unique dont l'attribut id a la valeur name peut être sélectionné par le sélecteur #name où la valeur de l'attribut est précédée d'un dièse '#'. Dans l'exemple suivant, le contenu de l'élément h1 dont l'attribut id vaut title sera de couleur rouge.

h1#title { color: red }

Le sélecteur '*' sélectionne tous les éléments. Dans l'exemple suivant, tous les éléments (c'est-à-dire le texte) seront de couleur bleue à l'exception des éléments p qui seront de couleur grise.

* { color: blue }
p { color: gray }

Certaines parties d'un document qui ne correspondent pas à un élément peuvent être sélectionnées par des pseudo-éléments. La première ligne et le premier caractère du contenu d'un élément name peuvent être désignés par name:first-line et name:first-letter.

p:first-line {
    text-indent: 15pt;
}

Le pseudo-élément :first-child permet en outre de sélectionner le premier enfant d'un élément. Dans l'exemple suivant, la règle s'applique uniquement à la première entrée d'une liste.

li:first-child {
    color: blue;
}

Les pseudo-éléments :before et :after et la propriété content permettent d'ajouter du contenu avant et après un élément.

li:before {
    content: "[" counter(c) "]";
    counter-increment: c;
}

Les pseudo-classes :link, :visited, :hover et :active s'appliquent à l'élément a et permettent de sélectionner les liens, les liens déjà traversés, les liens sous le curseur et les liens activés.

a:link    { color: blue; }
a:visited { color: magenta; }
a:hover   { color: red; }
a:active  { color: red; }

La pseudo-classe :focus permet de sélectionner l'entrée d'un formulaire qui a le focus.

Un sélecteur peut aussi prendre en compte la présence d'attributs et leurs valeurs. Un ou plusieurs prédicats portant sur les attributs sont ajoutés à un sélecteur élémentaire. Chacun des prédicats est ajouté après le sélecteur entre crochet '[' et ']'. Les différents prédicats possibles sont les suivants.

Dans l'exemple suivant, la règle s'applique aux éléments p dont l'attribut lang commence par en- comme en-GB ou en-US mais pas fr. La propriété quote définit quels caractères doivent entourer les citations.

p[lang|="en"] {
    quotes: '"' '"' "'" "'";
}

Il est possible de mettre plusieurs prédicats portant sur les attributs comme dans l'exemple suivant. Le sélecteur suivant sélectionne les éléments p ayant un attribut lang de valeur fr et un attribut type de valeur center.

p[lang="fr"][type="center"] { 
    ...
}

Il est possible de composer des sélecteurs avec les trois opérateurs ' ' (espace), '>' et '+' pour former des nouveaux sélecteurs.

Le sélecteur selector1 selector2 sélectionne tous les éléments sélectionnés par selector2 qui sont en outre descendants dans l'arbre du document (c'est-à-dire inclus) d'un élément sélectionné par selector1. Dans l'exemple suivant, seuls les éléments em contenus directement ou non dans un élément p auront leur texte en gras.

p em { 
    font-weight: bold;
}

Cet opérateur peut aussi combiner plusieurs sélecteurs. Dans l'exemple suivant, sont sélectionnés les éléments de classe sc contenus dans un élément em lui même contenu dans un élément p. Il y a bien un espace entre em et .sc. Le sélecteur p em.sc est bien sûr différent.

p em .sc { 
    font-variant: small-caps;
}

Le sélecteur selector1 > selector2 sélectionne tous les éléments sélectionnés par selector2 qui sont en outre enfant (c'est-à-dire directement inclus) d'un élément sélectionné par selector1.

Le sélecteur selector1 + selector2 sélectionne tous les éléments sélectionnés par selector2 qui sont en outre frère droit (c'est-à-dire qui suivent directement) d'un élément sélectionné par selector1.

Les propriétés qui peuvent être modifiées par une règle dépendent des éléments sélectionnés. Pour chaque élément de XHTML, il y a une liste des propriétés qui peuvent être modifiées.

Les valeurs possibles dépendent de la propriété. Certaines propriétés acceptent comme display uniquement un nombre déterminé de valeurs. D'autres encore prennent une couleur, un entier, un pourcentage, un nombre décimal ou une dimension avec une unité.

Pour les dimensions, il est nécessaire de faire suivre le nombre d'une unité parmi les unités suivantes.

La valeur d'une propriété pour un élément peut avoir les trois provenances suivantes par ordre de priorité décroissante.

Plusieurs règles peuvent s'appliquer à un même élément. Il y a souvent plusieurs feuilles de style pour le même document : une feuille de style par défaut pour l'application, une autre fournie par l'auteur du document et éventuellement une feuille donnée par l'utilisateur. De plus, une même feuille peut contenir plusieurs règles qui sélectionnent le même élément.

La priorité d'une règle est d'abord déterminée par sa provenance. La feuille de style de l'auteur a priorité sur celle de l'utilisateur qui a elle-même priorité sur celle de l'application.

Pour les règles provenant de la même feuille de style, on applique l'algorithme suivant pour déterminer leur priorité. On calcule une spécificité de chaque sélecteur qui est un triplet (a,b,c) d'entiers. L'entier a est le nombre d'occurrences de prédicats sur l'attribut id de forme #ident. L'entier b est le nombre de prédicats sur les autres attributs y compris les attributs class de forme classname. Le nombre c est finalement le nombre de noms d'éléments apparaissant dans le sélecteur. Les spécificités (a,b,c) et (a',b',c') des sélecteurs des deux règles sont alors comparées par ordre lexicographique. Ceci signifie qu'on compare d'abord a et a', puis b et b' si a est égal à a', puis finalement c et c' si (a,b) est égal à (a',b').

Pour des règles dont les sélecteurs ont même spécificité, c'est l'ordre d'apparition dans la feuille de style qui détermine la priorité. La dernière règle apparue a une priorité supérieure.

La façon de référencer une feuille de style externe dépend du format du document. Pour un document XML, il faut utiliser une instruction de traitement xml-stylesheet. Pour un document XHTML, il faut utiliser un élément link dans l'entête.

<?xml-stylesheet type="text/css" href="bibliography.css" ?>

<head>
  <title>Titre de la page</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

Les règles de style peuvent être directement incluses dans un élément style de l'entête, c'est-à-dire contenues dans l'élément head. Il est préférable de protéger ces règles par des balises '<!--' et '-->' de commentaires.

<head>
 <title>Titre de la page</title>
 <style type="text/css"><!--
   /* Contenu de la feuille de style inclus dans un commentaire XML */
   body { background-color: white; }
 --></style>
</head>

Chaque élément peut aussi avoir un attribut style qui contient uniquement des couples propriété/valeur séparés par des virgules. Les sélecteurs sont inutiles puisque ces règles s'appliquent implicitement à cet élément.

<span style="text-decoration: overline">A</span>