486 lines
18 KiB
XML
486 lines
18 KiB
XML
<?xml version="1.0" encoding="ISO-8859-1"?>
|
||
<!DOCTYPE html
|
||
PUBLIC "-//ENS/Tuteurs//DTD TML 1//EN"
|
||
"tuteurs://DTD/tml.dtd">
|
||
<html>
|
||
<head>
|
||
<title>CSS</title>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Les feuilles de style</h1>
|
||
|
||
<div class="resume">
|
||
<p>
|
||
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.
|
||
</p>
|
||
</div>
|
||
|
||
<h2>Qui fait quoi, où, comment ?</h2>
|
||
|
||
<h3>Le principe</h3>
|
||
|
||
<p>
|
||
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 <code><strong></code>
|
||
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 <code><em></code> soient en rouge. Pour vous donner une idée,
|
||
la feuille de style de la présente page demande à ce que les éléments
|
||
<code><pre></code> soient représentés avec un fond de cet inimitable
|
||
<em>lemmonchiffon2</em>.
|
||
</p>
|
||
|
||
<p>
|
||
Il est possible d'être plus sélectif que ça. Le HTML fournit deux éléments,
|
||
<code><div></code> au niveau bloc et <code><span></code> au
|
||
niveau inline, qui n'ont aucune présentation particulière, et servent
|
||
précisément à se voir attacher un style.
|
||
</p>
|
||
|
||
<h3>Où mettre une feuille de style</h3>
|
||
|
||
<p>
|
||
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 <code><style
|
||
type="text/css"></code>...<code></style></code>.
|
||
</p>
|
||
|
||
<p>
|
||
La seconde possibilité est de mettre le code dans un fichier séparé, souvent
|
||
nommé en <code>.css</code>, et de l'inclure avec dans l'entête une balise de
|
||
la forme <code><link rel="stylesheet" type="text/css"
|
||
href="<var>fichier</var>.css"></code>.
|
||
</p>
|
||
|
||
<p>
|
||
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à.
|
||
</p>
|
||
|
||
<h3>Comment on écrit une feuille de style</h3>
|
||
|
||
<p>
|
||
Une feuille de style s'écrit dans le langage appelé <dfn>CSS</dfn>, pour
|
||
<em>Cascading Stylesheet</em>. Le terme <em>cascading</em> 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 <code><a></code>, dont on ne sait rien de la police, se trouve
|
||
dans un élément de type <code><em></code>, qui est en italique, alors
|
||
le <code><a></code> va <em>hériter</em> de son père
|
||
<code><em></code> le fait d'être en italique.
|
||
</p>
|
||
|
||
<p>
|
||
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 <code><strong></code> doivent être en gras :
|
||
</p>
|
||
<pre>
|
||
strong { font-weight: bold; }
|
||
</pre>
|
||
<p class="continue">
|
||
C'est limpide, n'est-ce pas ?
|
||
</p>
|
||
|
||
<p>
|
||
Le point-virgule à la fin servirait à séparer d'une autre caractéristique
|
||
donnée, comme par exemple :
|
||
</p>
|
||
<pre>
|
||
strong {
|
||
font-weight: bold;
|
||
color: red;
|
||
}
|
||
</pre>
|
||
<p class="continue">
|
||
Le point-virgule final n'est pas indispensable, mais le mettre tout de suite
|
||
évite de l'oublier plus tard.
|
||
</p>
|
||
|
||
<p>
|
||
Il est possible de mettre des commentaires presque n'importe où dans une
|
||
feuille de style CSS en les encadrant de <code>/*</code> et <code>*/</code>,
|
||
comme dans le langage C.
|
||
</p>
|
||
|
||
<p>
|
||
Nous allons maintenant voir les deux grandes parties de CSS : les
|
||
<em>sélecteurs</em>, qui décident à quel(s) élément(s) une règle s'applique
|
||
(le <code>strong</code> de l'exemple), et les <em>déclarations</em>, qui
|
||
indiquent l'apparence que ces éléments doivent prendre (le
|
||
<code>font-weight: bold</code> de l'exemple). Ces deux parties sont tout à
|
||
fait indépendantes, et il est possible de les lire dans un ordre quelconque.
|
||
</p>
|
||
|
||
<h2>Les sélecteurs</h2>
|
||
|
||
<h3>Quelques règles de bases</h3>
|
||
|
||
<p>
|
||
L'essentiel des sélecteurs sera formé de noms d'éléments, ce qui désigne
|
||
tous, ou certains éléments de ce type.
|
||
</p>
|
||
|
||
<p>
|
||
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.
|
||
</p>
|
||
|
||
<p>
|
||
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
|
||
<code><strong></code>, ça donne du bleu gras.
|
||
</p>
|
||
|
||
<p>
|
||
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.
|
||
</p>
|
||
|
||
<h3>Les sélecteurs hiérarchiques</h3>
|
||
|
||
<p>
|
||
Considérons par exemple :
|
||
</p>
|
||
<pre>
|
||
table p { par-indent: 0; }
|
||
</pre>
|
||
<p class="continue">
|
||
Ce sélecteur s'applique à tous les éléments de type <code>p</code> contenus
|
||
dans un élément de type <code>table</code>, et seulement ceux-là. Dans cet
|
||
exemple, <code>p</code> et <code>table</code> 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.
|
||
</p>
|
||
|
||
<p>
|
||
Ce genre de règle s'applique à n'importe quel degré de descendance : dans
|
||
l'exemple, le <code>p</code> ne sera pas directement dans le
|
||
<code>table</code>, il y aura certainement un <code>tr</code> et un
|
||
<code>td</code> entre les deux. Ça n'a pas d'importance.
|
||
</p>
|
||
|
||
<p>
|
||
Un sélecteur de la forme <code><var>sélecteur1</var> >
|
||
<var>sélecteur2</var></code>, au contraire, ne désigne que le cas où
|
||
<code><var>sélecteur2</var></code> est directement dans
|
||
<code><var>sélecteur1</var></code>, ce qui peut être utile dans quelque
|
||
chose de la forme :
|
||
</p>
|
||
<pre>
|
||
ul > li { margin-left: 1em; }
|
||
</pre>
|
||
<p class="continue">
|
||
si on n'a pas envie que la règle s'applique à un <code>li</code> qui serait
|
||
contenu dans une sous-liste de type <code>ol</code>.
|
||
</p>
|
||
|
||
<h3>La classe d'un élément</h3>
|
||
|
||
<p>
|
||
En HTML, n'importe quel élément peut être affublé d'un attribut
|
||
<code>class</code>, qui n'a aucune signification, et sert uniquement à faire
|
||
le lien avec une feuille de style.
|
||
</p>
|
||
|
||
<p>
|
||
Ainsi, il peut me prendre l'envie, quand un paragraphe est un exemple,
|
||
d'écrire non pas <code><p></code> tout court, mais <code><p
|
||
class="exemple"></code>. Si je ne fais rien de plus, ça ne servira à
|
||
rien. Mais je peux ajouter une règle CSS comme par exemple :
|
||
</p>
|
||
<pre>
|
||
p.exemple { font-family: sans-serif; }
|
||
</pre>
|
||
<p class="continue">
|
||
et alors tous ces paragraphes apparaîtront dans une police différente.
|
||
</p>
|
||
|
||
<p>
|
||
L'attribut <code>class</code> s'utilise souvent en conjonction avec les
|
||
éléments <code>div</code> et <code>span</code>, qui deviennent ainsi des
|
||
balises à tout faire. Il peut être plus pratique de travailler au niveau
|
||
abstrait de <code>div</code>. Supposons que je veuille mettre un filet bleu
|
||
à gauche de mes exemples. Je peux écrire :
|
||
</p>
|
||
<pre>
|
||
p.exemple { border-left: solid blue 2px; }
|
||
</pre>
|
||
<p class="continue">
|
||
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 :
|
||
</p>
|
||
<pre>
|
||
div.exemple { border-left: solid blue 2px; }
|
||
...
|
||
<div class="exemple">
|
||
<p>Ici mon exemple.</p>
|
||
<p>Il peut faire plusieurs paragraphes</p>
|
||
</div>
|
||
</pre>
|
||
<p class="continue">
|
||
Je peux également utiliser <code>.exemple</code> 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 <code><p
|
||
class="exemple"></code> dans les cas simples, et de recourir à un
|
||
<code>div</code> dans les cas plus compliqués.
|
||
</p>
|
||
|
||
<p>
|
||
Les classes peuvent bien sûr être utilisée avec des sélecteurs
|
||
hiérarchiques.
|
||
</p>
|
||
|
||
<h3>Les pseudo-classes</h3>
|
||
|
||
<p>
|
||
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.
|
||
</p>
|
||
|
||
<p>
|
||
Le HTML a deux utilisation pour l'élément <code><a></code> : 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 <code>a:link</code> désigne un lien par opposition à
|
||
une ancre.
|
||
</p>
|
||
|
||
<p>
|
||
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 <code>a:visited</code>. Attention, <code>:visited</code> s'utilise
|
||
<em>à la place</em> de <code>:link</code> : un lien déjà visité n'est pas
|
||
reconnu par <code>a:link</code>.
|
||
</p>
|
||
|
||
<p>
|
||
Dans le même genre d'idée, il existe la pseudo-classe <code>:hover</code>,
|
||
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 <code>:focus</code> et <code>:active</code>, qui ont des
|
||
significations proches (pour un navigateur à la souris habituel,
|
||
<code>:hover</code> dit que le curseur est dessus, <code>:active</code> que
|
||
l'utilisateur est en train de cliquer, et <code>:focus</code> désigne le
|
||
fait d'être actif pour le clavier).
|
||
</p>
|
||
|
||
<p>
|
||
Les pseudo-classes se combinent. Ainsi, pour changer le fond d'un lien quand
|
||
le pointeur passe dessus, on écrira :
|
||
</p>
|
||
<pre>
|
||
a:link:hover, a:visited:hover { background-color: yellow; }
|
||
</pre>
|
||
|
||
<p>
|
||
Il existe encore quelques autres pseudo-classes, comme <code>:lang</code>,
|
||
mais elles sont souvent mal reconnues par les navigateurs, et moins utiles.
|
||
</p>
|
||
|
||
|
||
<h2>Les déclarations</h2>
|
||
|
||
<p>
|
||
Les déclarations sont toujours de la forme <code><var>nom</var>:
|
||
<var>valeur</var>;</code> (le point-virgule final peut être omis), et
|
||
permettent de changer énormément d'aspects de la présentation d'un élément.
|
||
</p>
|
||
|
||
<p>
|
||
Dans beaucoup de cas, la valeur peut être <code>inherit</code>, 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).
|
||
</p>
|
||
|
||
<h3>Police et couleur</h3>
|
||
|
||
<p>
|
||
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 <code><font></code>. Voici l'essentiel des déclarations de
|
||
police :
|
||
</p>
|
||
<ul>
|
||
<li><code>font-style: italic</code>, <code>oblique</code> ou
|
||
<code>normal</code>.</li>
|
||
<li><code>font-variant: small-caps</code> pour les petites capitales, ou
|
||
<code>normal</code>.</li>
|
||
<li><code>font-weight: bold</code> pour le gras, ou
|
||
<code>normal</code>.</li>
|
||
<li><code>font-family: <var>famille</var></code> 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, <code>serif</code>,
|
||
<code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> et
|
||
<code>fantasy</code>, il est conseillé de toujours mettre une famille
|
||
générique en dernier recours.</li>
|
||
</ul>
|
||
|
||
<p>
|
||
Pour changer la taille de la police, c'est <code>font-size</code> qu'il faut
|
||
utiliser. On peut lui donner une valeur descriptive (<code>xx-small</code>,
|
||
<code>x-small</code>, <code>small</code>, <code>medium</code>,
|
||
<code>large</code>, <code>x-large</code>, <code>xx-large</code>), une valeur
|
||
relative à la taille actuelle (<code>larger</code>, <code>smaller</code> 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).
|
||
</p>
|
||
|
||
<p>
|
||
Il est possible de spécifier plusieurs propriétés d'un coup avec
|
||
<code>font:</code>. Il faut alors mettre d'éventuels style, variante et
|
||
graisse, puis une taille, puis une famille.
|
||
</p>
|
||
|
||
<p>
|
||
La couleur se règle avec <code>color:</code>. Une couleur peut s'indiquer
|
||
de plusieurs manières :
|
||
</p>
|
||
<ul>
|
||
<li><code>#rrggbb</code>, où <code>rr</code>, <code>gg</code> et
|
||
<code>bb</code> sont des nombres hexadécimaux à deux chiffres, de 00 à FF,
|
||
pour le rouge, le vert et le bleu.</li>
|
||
<li><code>rgb(<var>r</var>,<var>g</var>,<var>b</var>)</code>, où
|
||
<var>r</var>, <var>g</var> et <var>b</var> sont soit des pourcentages soit
|
||
des valeurs entières de 0 à255, pour le rouge, le vert et le bleu.</li>
|
||
<li>par un nom en anglais, mais il serait fastidieux de recopier ici la
|
||
liste des couleurs standard.</li>
|
||
</ul>
|
||
|
||
<h3>Cadres et marges</h3>
|
||
|
||
<p>
|
||
Un bloc (un paragraphe, un titre, une table) est entouré de trois zones : de
|
||
l'intérieur vers l'extérieur, du remplissage (<i>padding</i>), 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.
|
||
</p>
|
||
|
||
<p>
|
||
Dans le cas des marges, seule leur étendue peut être définie. On utilise
|
||
pour ça <code>margin-top</code>, <code>margin-right</code>,
|
||
<code>margin-bottom</code> et <code>margin-left</code>. On peut indiquer les
|
||
quatre d'un coup avec <code>margin</code>, 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.
|
||
</p>
|
||
|
||
<p>
|
||
Les longueurs sont indiquées par des nombres avec des unités. Les unités
|
||
possibles sont <code>in</code> (pouce), <code>cm</code>, <code>mm</code>,
|
||
<code>pt</code> (point, 1/72 pouce), <code>pc</code> (pica, 12 points). On a
|
||
également <code>em</code> et <code>ex</code>, 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 <code>px</code>, qui désigne un pixel à l'écran.
|
||
</p>
|
||
|
||
<p>
|
||
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 <code>auto</code> pour les marges, pour qu'elles s'ajustent au
|
||
mieux.
|
||
</p>
|
||
|
||
<p>
|
||
Le remplissage se règle exactement comme les marges, à ceci près qu'il faut
|
||
mettre <code>padding-</code> à la place de <code>margin-</code>.
|
||
</p>
|
||
|
||
<p>
|
||
Pour la bordure, on a trois caractéristiques qu'il est possible de régler,
|
||
<code>width</code> (l'épaisseur), <code>color</code> et <code>style</code>
|
||
(les styles possibles sont <code>none</code>, <code>hidden</code>,
|
||
<code>dotted</code>, <code>dashed</code>, <code>solid</code>,
|
||
<code>double</code>, <code>groove</code>, <code>ridge</code>,
|
||
<code>inset</code> et <code>outset</code>, essayez-les pour voir ce qu'ils
|
||
font), ce qui donne 12 propriétés, de la forme
|
||
<code>border-<var>côté</var>-<var>caractéristique</var></code> (par exemple
|
||
<code>border-left-color</code>).
|
||
</p>
|
||
|
||
<p>
|
||
On a également les raccourcis <code>border-<var>côté</var></code>, qui
|
||
permettent de définir tout ou partie des trois caractéristiques d'un coup,
|
||
et <code>border</code> 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
|
||
<code>border</code> 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.
|
||
</p>
|
||
|
||
<p>
|
||
Maintenant, le fond. Il est possible de choisir une couleur unie avec
|
||
<code>background-color</code>. La valeur <code>transparent</code> est
|
||
également possible, et parle d'elle-même. On peut également mettre une image
|
||
de fond avec <code>background-image:
|
||
url(<var>http://some.where/image.png</var></code> (il est bien sûr possible
|
||
de mettre un chemin relatif) ; la valeur <code>none</code> permet d'enlever
|
||
une image déjà présente. On peut contrôler la position de l'image, avec
|
||
<code>background-repeat</code>, qui peut prendre les valeurs
|
||
<code>repeat</code>, <code>repeat-x</code>, <code>repeat-y</code> ou
|
||
<code>no-repeat</code>, pour choisir si l'image se répète ou pas,
|
||
<code>background-position</code>, qui prend deux longueurs ou pourcentages,
|
||
et enfin <code>background-attachment</code>, qui vaut <code>scroll</code> ou
|
||
<code>fixed</code> (l'image défile avec la page ou pas).
|
||
</p>
|
||
|
||
<p>
|
||
Le raccourci <code>background</code> permet de fixer tout ou partie de ces
|
||
caractéristiques d'un coup. Exemple :
|
||
</p>
|
||
<pre>
|
||
body { background: rgb(95%,95%,70%) url(poissons.png) no-repeat; }
|
||
</pre>
|
||
|
||
<h3>L'apparence des tables</h3>
|
||
|
||
<p>
|
||
À suivre...
|
||
</p>
|
||
|
||
|
||
<div class="metainformation">
|
||
Auteur : Nicolas George.
|
||
Dernière modification le <date value="$Date: 2007-07-17 10:02:41 $" />.
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|