# CSS

# Les feuilles de style

Les feuilles de style permettent de décrire la présentation d'une page web. Elles remplacent avantageusement l'ancienne méthode, qui consistait à mettre des balises avec des attributs partout dans le texte. Elles permettent de centraliser toute la mise en forme, et donc d'avoir à peu de frais une mise en page cohérente. De plus, les possibilité sont beaucoup plus intéressantes.

## Qui fait quoi, où, comment ?

### Le principe

Le principe d'une feuille de style est d'associer certains paramètres à certaines balises. Vous avez probablement remarqué que votre navigateur considère, par exemple, que tous les éléments `<strong>` doivent être représentés en gras. C'est précisément le principe des feuilles de style : d'une seule ligne, vous pouvez demander à ce que tous les éléments `<em>` soient en rouge. Pour vous donner une idée, la feuille de style de la présente page demande à ce que les éléments `<pre>` soient représentés avec un fond de cet inimitable lemmonchiffon2.

Il est possible d'être plus sélectif que ça. Le HTML fournit deux éléments, `<div>` au niveau bloc et `<span>` au niveau inline, qui n'ont aucune présentation particulière, et servent précisément à se voir attacher un style.

### Où mettre une feuille de style

Il est possible d'inclure une feuille de style de deux manières différentes dans un document. La première possibilité, qui est probablement la plus simple, est de mettre la feuille de style directement dans l'entête du document, entre une paire de balises `<style type="text/css">`...`</style>`.

La seconde possibilité est de mettre le code dans un fichier séparé, souvent nommé en `.css`, et de l'inclure avec dans l'entête une balise de la forme `<link rel="stylesheet" type="text/css" href="fichier.css">`.

Ces deux méthodes peuvent d'ailleurs être utilisées ensemble dans le même document. Dans ces conditions, si elles se contredisent, c'est la feuille écrite directement dans le document qui a raison. Le mieux est en général d'avoir une feuille de style dans un fichier séparé pour donner la présentation de tout un site, et de rajouter dans chaque page ce qui est nécessaire uniquement là.

### Comment on écrit une feuille de style

Une feuille de style s'écrit dans le langage appelé CSS, pour Cascading Stylesheet. Le terme cascading souligne une propriété importante du langage : les caractéristiques de présentations se propagent « en cascade » d'un élément à ses fils. Par exemple, si un élément de type `<a>`, dont on ne sait rien de la police, se trouve dans un élément de type `<em>`, qui est en italique, alors le `<a>` va hériter de son père `<em>` le fait d'être en italique.

Le langage CSS est très simple, et le mieux est de commencer par un exemple. Voici comment on décrirait, si ce n'était déjà fait, que les éléments de type `<strong>` doivent être en gras :

    strong { font-weight: bold; }

C'est limpide, n'est-ce pas ?

Le point-virgule à la fin servirait à séparer d'une autre caractéristique donnée, comme par exemple :

    strong {
      font-weight: bold;
      color: red;
    }

Le point-virgule final n'est pas indispensable, mais le mettre tout de suite évite de l'oublier plus tard.

Il est possible de mettre des commentaires presque n'importe où dans une feuille de style CSS en les encadrant de `/*` et `*/`, comme dans le langage C.

Nous allons maintenant voir les deux grandes parties de CSS : les sélecteurs, qui décident à quel(s) élément(s) une règle s'applique (le `strong` de l'exemple), et les déclarations, qui indiquent l'apparence que ces éléments doivent prendre (le `font-weight: bold` de l'exemple). Ces deux parties sont tout à fait indépendantes, et il est possible de les lire dans un ordre quelconque.

## Les sélecteurs

### Quelques règles de bases

L'essentiel des sélecteurs sera formé de noms d'éléments, ce qui désigne tous, ou certains éléments de ce type.

Il est possible de mettre plusieurs sélecteurs par règle, en les séparant par une virgule. La règle s'applique alors à tous les sélecteurs, comme si plusieurs règles avaient été écrites.

Un même élément du document peut recevoir différentes mises en forme par différentes règles. En général, les règles sont simplement combinées : par exemple du bleu parce que c'est un lien, et du gras parce que c'est dans un `<strong>`, ça donne du bleu gras.

Si les règles portent sur le même attribut (par exemple la couleur), c'est la règle la plus précise qui l'emporte. Ainsi, on peut définir l'apparence de tous les liens de la page, mais revenir ensuite pour définir l'apparence des liens de la barre de navigation.

### Les sélecteurs hiérarchiques

Considérons par exemple :

    table p { par-indent: 0; }

Ce sélecteur s'applique à tous les éléments de type `p` contenus dans un élément de type `table`, et seulement ceux-là. Dans cet exemple, `p` et `table` auraient pu être des sélecteurs plus compliqués (mais vous ne savez pas encore en faire). Et il est également possible de mettre trois sélecteurs à la suite ou plus.

Ce genre de règle s'applique à n'importe quel degré de descendance : dans l'exemple, le `p` ne sera pas directement dans le `table`, il y aura certainement un `tr` et un `td` entre les deux. Ça n'a pas d'importance.

Un sélecteur de la forme `sélecteur1 > sélecteur2`, au contraire, ne désigne que le cas où `sélecteur2` est directement dans `sélecteur2`, ce qui peut être utile dans quelque chose de la forme :

    ul > li { margin-left: 1em; }

si on n'a pas envie que la règle s'applique à un `li` qui serait contenu dans une sous-liste de type `ol`.

### La classe d'un élément

En HTML, n'importe quel élément peut être affublé d'un attribut `class`, qui n'a aucune signification, et sert uniquement à faire le lien avec une feuille de style.

Ainsi, il peut me prendre l'envie, quand un paragraphe est un exemple, d'écrire non pas `<p>` tout court, mais `<p class="exemple">`. Si je ne fais rien de plus, ça ne servira à rien. Mais je peux ajouter une règle CSS comme par exemple :

    p.exemple { font-family: sans-serif; }

et alors tous ces paragraphes apparaîtront dans une police différente.

L'attribut `class` s'utilise souvent en conjonction avec les éléments `div` et `span`, qui deviennent ainsi des balises à tout faire. Il peut être plus pratique de travailler au niveau abstrait de `div`. Supposons que je veuille mettre un filet bleu à gauche de mes exemples. Je peux écrire :

    p.exemple { border-left: solid blue 2px; }

Mais si je fais ainsi, je ne peux pas mettre un exemple de plusieurs paragraphes, parce que le filet bleu serait interrompu dans l'espace entre les paragraphes. Je ne peux pas non plus mettre une énumération ou une table dans l'exemple. Il vaut mieux alors écrire :

    div.exemple { border-left: solid blue 2px; }
    ...
    <div class="exemple">
    <p>Ici mon exemple.</p>
    <p>Il peut faire plusieurs paragraphes</p>
    </div>

Je peux également utiliser `.exemple` tout court comme sélecteur, ce qui s'applique alors à tous les éléments de classe exemple, quel que soit leur type, et me laisse ainsi la liberté d'écrire `<p class="exemple">` dans les cas simples, et de recourir à un `div` dans les cas plus compliqués.

Les classes peuvent bien sûr être utilisée avec des sélecteurs hiérarchiques.

### Les pseudo-classes

HTML et CSS ont un mécanisme similaire aux classes, mais ad-hoc, pour faire le lien avec certaines fonctionnalités spécifiques, et en particulier les liens.

Le HTML a deux utilisation pour l'élément `<a>` : faire un lien et poser une ancre (cette dernière utilisation est obsolescente, mais encore indispensable pour compatiblité). S'il est légitime de changer l'apparence d'un lien (le soulignement usuel est quand même très laid), il n'est probablement pas souhaitable que les ancres apparaissent de la même manière. Le sélecteur `a:link` désigne un lien par opposition à une ancre.

Vous avez sans doute remarqué que certains navigateurs affichent de couleur différente les liens déjà visités. CSS permet de changer ça en utilisant un sélecteur `a:visited`. Attention, `:visited` s'utilise à la place de `:link` : un lien déjà visité n'est pas reconnu par `a:link`.

Dans le même genre d'idée, il existe la pseudo-classe `:hover`, qui désigne un élément (souvent un lien, mais ce n'est pas indispensable) que l'utilisateur « touche », avec le pointeur de la souris par exemple (la signification exacte dépend des navigateurs). On trouve également les pseudo-classes `:focus` et `:active`, qui ont des significations proches (pour un navigateur à la souris habituel, `:hover` dit que le curseur est dessus, `:active` que l'utilisateur est en train de cliquer, et `:focus` désigne le fait d'être actif pour le clavier).

Les pseudo-classes se combinent. Ainsi, pour changer le fond d'un lien quand le pointeur passe dessus, on écrira :

    a:link:hover, a:visited:hover { background-color: yellow; }

Il existe encore quelques autres pseudo-classes, comme `:lang`, mais elles sont souvent mal reconnues par les navigateurs, et moins utiles.

## Les déclarations

Les déclarations sont toujours de la forme `nom: valeur;` (le point-virgule final peut être omis), et permettent de changer énormément d'aspects de la présentation d'un élément.

Dans beaucoup de cas, la valeur peut être `inherit`, ce qui revient à ne pas spécifier de valeur et utiliser celle de l'élément parent (ainsi, un lien est de la même police que le paragraphe qui l'englobe). Cette valeur est souvent le défaut, et il n'est utile de la préciser que pour annuler une autre déclaration (ce qui peut se voir comme une mauvaise conception, mais vous êtes libres).

### Police et couleur

La première chose qu'on veut apprendre à changer, c'est évidemment l'apparence des caractères : la police et la couleur, ainsi que la taille. L'utilisation de CSS fait complètement disparaître l'usage de l'antique élément `<font>`. Voici l'essentiel des déclarations de police :

- `font-style: italic`, `oblique` ou `normal`.
- `font-variant: small-caps` pour les petites capitales, ou `normal`.
- `font-weight: bold` pour le gras, ou `normal`.
- `font-family: famille` pour choisir la famille (la police proprement dite) ; les noms comportant des espaces doivent être mis entre guillemets. Comme tout le monde n'a pas toutes les polices du monde, il est possible d'en indiquer plusieurs, séparées par des virgules. Le CSS définit des familles génériques, `serif`, `sans-serif`, `monospace`, `cursive` et `fantasy`, il est conseillé de toujours mettre une famille générique en dernier recours.

Pour changer la taille de la police, c'est `font-size` qu'il faut utiliser. On peut lui donner une valeur descriptive (`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`), une valeur relative à la taille actuelle (`larger`, `smaller` ou un pourcentage), ou une longueur fixée (voir plus bas pour les unités possibles). Ce dernier choix est à éviter car il prive l'utilisateur de sa liberté de choix sur la taille des polices (quelqu'un qui a de bons yeux peut préférer des polices petites pour tout avoir sur une page, quelqu'un qui a des problèmes de vue voudra de gros caractères).

Il est possible de spécifier plusieurs propriétés d'un coup avec `font:`. Il faut alors mettre d'éventuels style, variante et graisse, puis une taille, puis une famille.

La couleur se règle avec `color:`. Une couleur peut s'indiquer de plusieurs manières :

- `#rrggbb`, où `rr`, `gg` et `bb` sont des nombres hexadécimaux à deux chiffres, de 00 à FF, pour le rouge, le vert et le bleu.
- `rgb(r,g,b)`, où r, g et b sont soit des pourcentages soit des valeurs entières de 0 à255, pour le rouge, le vert et le bleu.
- par un nom en anglais, mais il serait fastidieux de recopier ici la liste des couleurs standard.

### Cadres et marges

Un bloc (un paragraphe, un titre, une table) est entouré de trois zones : de l'intérieur vers l'extérieur, du remplissage (padding), une bordure (souvent fine ou absente) et une marge. Les marges d'objets voisins fusionnent, mais ça s'arrête à la bordure. Quand on définit une couleur de fond, celle-ci s'étend dans le remplissage jusqu'à la bordure.

Dans le cas des marges, seule leur étendue peut être définie. On utilise pour ça `margin-top`, `margin-right`, `margin-bottom` et `margin-left`. On peut indiquer les quatre d'un coup avec `margin`, en les indiquant dans cet ordre (dans le sens des aiguilles d'une montre, en partant de midi). Si on ne met que deux longueurs elles définissent les marges haute et basse d'une part et gauche et droite d'autre part, et si on n'en met qu'une, les quatre marges sont égales.

Les longueurs sont indiquées par des nombres avec des unités. Les unités possibles sont `in` (pouce), `cm`, `mm`, `pt` (point, 1/72 pouce), `pc` (pica, 12 points). On a également `em` et `ex`, qui dépendent de la police active, et surtout de sa taille ; l'em est plutôt à utiliser pour les longueurs horizontales, l'ex pour les longueurs verticales ; ce sont de bonnes unités pour les espaces entre les lignes de texte par exemple. On a pour finir `px`, qui désigne un pixel à l'écran.

Les dimensions des marges et du remplissage peuvent être également un pourcentage, relatif au bloc qui emboîte celui dont on définit les caractéristiques (souvent la page elle-même, mais pas toujours). Enfin, on peut indiquer `auto` pour les marges, pour qu'elles s'ajustent au mieux.

Le remplissage se règle exactement comme les marges, à ceci près qu'il faut mettre `padding-` à la place de `margin-`.

Pour la bordure, on a trois caractéristiques qu'il est possible de régler, `width` (l'épaisseur), `color` et `style` (les styles possibles sont `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset` et `outset`, essayez-les pour voir ce qu'ils font), ce qui donne 12 propriétés, de la forme `border-côté-caractéristique` (par exemple `border-left-color`).

On a également les raccourcis `border-côté`, qui permettent de définir tout ou partie des trois caractéristiques d'un coup, et `border` tout court qui définit une bordure identique pour les quatre côtés d'un coup. Il est d'ailleurs souvent préférable d'utiliser `border` tout court ; en particulier, pour un effet de relief, il vaut mieux utiliser les styles adaptés que changer manuellement les couleurs des différents côtés.

Maintenant, le fond. Il est possible de choisir une couleur unie avec `background-color`. La valeur `transparent` est également possible, et parle d'elle-même. On peut également mettre une image de fond avec `background-image: url(http://some.where/image.png` (il est bien sûr possible de mettre un chemin relatif) ; la valeur `none` permet d'enlever une image déjà présente. On peut contrôler la position de l'image, avec `background-repeat`, qui peut prendre les valeurs `repeat`, `repeat-x`, `repeat-y` ou `no-repeat`, pour choisir si l'image se répète ou pas, `background-position`, qui prend deux longueurs ou pourcentages, et enfin `background-attachment`, qui vaut `scroll` ou `fixed` (l'image défile avec la page ou pas).

Le raccourci `background` permet de fixer tout ou partie de ces caractéristiques d'un coup. Exemple :

    body { background: rgb(95%,95%,70%) url(poissons.png) no-repeat; }

### L'apparence des tables

À suivre...

Auteur : Nicolas George. Dernière modification le .