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.
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.
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à.
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.
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.
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électeur1, 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.
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.
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 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).
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.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; }
À suivre...