2003-10-13 21:11:08 +02:00
|
|
|
|
<?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<70>sentation d'une page web.
|
|
|
|
|
|
Elles remplacent avantageusement l'ancienne m<>thode, qui consistait <20> mettre
|
|
|
|
|
|
des balises avec des attributs partout dans le texte. Elles permettent de
|
|
|
|
|
|
centraliser toute la mise en forme, et donc d'avoir <20> peu de frais une mise
|
|
|
|
|
|
en page coh<6F>rente. De plus, les possibilit<69> sont beaucoup plus
|
|
|
|
|
|
int<EFBFBD>ressantes.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Qui fait quoi, o<>, comment<6E>?</h2>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Le principe</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le principe d'une feuille de style est d'associer certains param<61>tres <20>
|
|
|
|
|
|
certaines balises. Vous avez probablement remarqu<71> que votre navigateur
|
|
|
|
|
|
consid<EFBFBD>re, par exemple, que tous les <20>l<EFBFBD>ments <code><strong></code>
|
|
|
|
|
|
doivent <20>tre repr<70>sent<6E>s en gras. C'est pr<70>cis<69>ment le principe des feuilles
|
|
|
|
|
|
de style<6C>: d'une seule ligne, vous pouvez demander <20> ce que tous les
|
|
|
|
|
|
<EFBFBD>l<EFBFBD>ments <code><em></code> soient en rouge. Pour vous donner une id<69>e,
|
|
|
|
|
|
la feuille de style de la pr<70>sente page demande <20> ce que les <20>l<EFBFBD>ments
|
|
|
|
|
|
<code><pre></code> soient repr<70>sent<6E>s avec un fond de cet inimitable
|
|
|
|
|
|
<em>lemmonchiffon2</em>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Il est possible d'<27>tre plus s<>lectif que <20>a. Le HTML fournit deux <20>l<EFBFBD>ments,
|
|
|
|
|
|
<code><div></code> au niveau bloc et <code><span></code> au
|
|
|
|
|
|
niveau inline, qui n'ont aucune pr<70>sentation particuli<6C>re, et servent
|
|
|
|
|
|
pr<EFBFBD>cis<EFBFBD>ment <20> 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<6E>res diff<66>rentes
|
|
|
|
|
|
dans un document. La premi<6D>re possibilit<69>, qui est probablement la plus
|
|
|
|
|
|
simple, est de mettre la feuille de style directement dans l'ent<6E>te du
|
|
|
|
|
|
document, entre une paire de balises <code><style
|
|
|
|
|
|
type="text/css"></code>...<code></style></code>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
La seconde possibilit<69> est de mettre le code dans un fichier s<>par<61>, souvent
|
|
|
|
|
|
nomm<EFBFBD> en <code>.css</code>, et de l'inclure avec dans l'ent<6E>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 <20>tre utilis<69>es ensemble dans le m<>me
|
|
|
|
|
|
document. Dans ces conditions, si elles se contredisent, c'est la feuille
|
|
|
|
|
|
<EFBFBD>crite directement dans le document qui a raison. Le mieux est en g<>n<EFBFBD>ral
|
|
|
|
|
|
d'avoir une feuille de style dans un fichier s<>par<61> pour donner la
|
|
|
|
|
|
pr<EFBFBD>sentation de tout un site, et de rajouter dans chaque page ce qui est
|
|
|
|
|
|
n<EFBFBD>cessaire uniquement l<>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Comment on <20>crit une feuille de style</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Une feuille de style s'<27>crit dans le langage appel<65> <dfn>CSS</dfn>, pour
|
|
|
|
|
|
<em>Cascading Stylesheet</em>. Le terme <em>cascading</em> souligne une
|
|
|
|
|
|
propri<EFBFBD>t<EFBFBD> importante du langage<67>: les caract<63>ristiques de pr<70>sentations se
|
|
|
|
|
|
propagent <20><>en cascade<64><65> d'un <20>l<EFBFBD>ment <20> ses fils. Par exemple, si un <20>l<EFBFBD>ment
|
|
|
|
|
|
de type <code><a></code>, dont on ne sait rien de la police, se trouve
|
|
|
|
|
|
dans un <20>l<EFBFBD>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'<27>tre en italique.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le langage CSS est tr<74>s simple, et le mieux est de commencer par un exemple.
|
|
|
|
|
|
Voici comment on d<>crirait, si ce n'<27>tait d<>j<EFBFBD> fait, que les <20>l<EFBFBD>ments de
|
|
|
|
|
|
type <code><strong></code> doivent <20>tre en gras<61>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
strong { font-weight: bold; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
C'est limpide, n'est-ce pas<61>?
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le point-virgule <20> la fin servirait <20> s<>parer d'une autre caract<63>ristique
|
|
|
|
|
|
donn<EFBFBD>e, comme par exemple<6C>:
|
|
|
|
|
|
</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
|
|
|
|
|
|
<EFBFBD>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<53>: les
|
|
|
|
|
|
<em>s<>lecteurs</em>, qui d<>cident <20> quel(s) <20>l<EFBFBD>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 <20>l<EFBFBD>ments doivent prendre (le
|
|
|
|
|
|
<code>font-weight: bold</code> de l'exemple). Ces deux parties sont tout <20>
|
|
|
|
|
|
fait ind<6E>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<72> de noms d'<27>l<EFBFBD>ments, ce qui d<>signe
|
2004-08-09 09:48:30 +02:00
|
|
|
|
tous, ou certains <20>l<EFBFBD>ments de ce type.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</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 <20> tous les s<>lecteurs, comme si
|
|
|
|
|
|
plusieurs r<>gles avaient <20>t<EFBFBD> <20>crites.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Un m<>me <20>l<EFBFBD>ment du document peut recevoir diff<66>rentes mises en forme par
|
|
|
|
|
|
diff<EFBFBD>rentes r<>gles. En g<>n<EFBFBD>ral, les r<>gles sont simplement combin<69>es<65>: par
|
|
|
|
|
|
exemple du bleu parce que c'est un lien, et du gras parce que c'est dans un
|
|
|
|
|
|
<code><strong></code>, <20>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<70>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<68>rarchiques</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Consid<EFBFBD>rons par exemple<6C>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
table p { par-indent: 0; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
Ce s<>lecteur s'applique <20> tous les <20>l<EFBFBD>ments de type <code>p</code> contenus
|
|
|
|
|
|
dans un <20>l<EFBFBD>ment de type <code>table</code>, et seulement ceux-l<>. Dans cet
|
|
|
|
|
|
exemple, <code>p</code> et <code>table</code> auraient pu <20>tre des
|
|
|
|
|
|
s<EFBFBD>lecteurs plus compliqu<71>s (mais vous ne savez pas encore en faire). Et il
|
|
|
|
|
|
est <20>galement possible de mettre trois s<>lecteurs <20> la suite ou plus.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Ce genre de r<>gle s'applique <20> n'importe quel degr<67> de descendance<63>: 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. <20>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
|
2006-11-10 14:54:12 +01:00
|
|
|
|
<code><var>s<>lecteur1</var></code>, ce qui peut <20>tre utile dans quelque
|
2003-10-13 21:11:08 +02:00
|
|
|
|
chose de la forme<6D>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
ul > li { margin-left: 1em; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
si on n'a pas envie que la r<>gle s'applique <20> un <code>li</code> qui serait
|
|
|
|
|
|
contenu dans une sous-liste de type <code>ol</code>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>La classe d'un <20>l<EFBFBD>ment</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
En HTML, n'importe quel <20>l<EFBFBD>ment peut <20>tre affubl<62> d'un attribut
|
|
|
|
|
|
<code>class</code>, qui n'a aucune signification, et sert uniquement <20> faire
|
|
|
|
|
|
le lien avec une feuille de style.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Ainsi, il peut me prendre l'envie, quand un paragraphe est un exemple,
|
|
|
|
|
|
d'<27>crire non pas <code><p></code> tout court, mais <code><p
|
|
|
|
|
|
class="exemple"></code>. Si je ne fais rien de plus, <20>a ne servira <20>
|
|
|
|
|
|
rien. Mais je peux ajouter une r<>gle CSS comme par exemple<6C>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
p.exemple { font-family: sans-serif; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
<p class="continue">
|
|
|
|
|
|
et alors tous ces paragraphes appara<72>tront dans une police diff<66>rente.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
L'attribut <code>class</code> s'utilise souvent en conjonction avec les
|
|
|
|
|
|
<EFBFBD>l<EFBFBD>ments <code>div</code> et <code>span</code>, qui deviennent ainsi des
|
|
|
|
|
|
balises <20> tout faire. Il peut <20>tre plus pratique de travailler au niveau
|
|
|
|
|
|
abstrait de <code>div</code>. Supposons que je veuille mettre un filet bleu
|
|
|
|
|
|
<EFBFBD> gauche de mes exemples. Je peux <20>crire<72>:
|
|
|
|
|
|
</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 <20>num<75>ration ou une table
|
|
|
|
|
|
dans l'exemple. Il vaut mieux alors <20>crire<72>:
|
|
|
|
|
|
</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">
|
2004-08-09 09:48:30 +02:00
|
|
|
|
Je peux <20>galement utiliser <code>.exemple</code> tout court comme s<>lecteur,
|
2003-10-13 21:11:08 +02:00
|
|
|
|
ce qui s'applique alors <20> tous les <20>l<EFBFBD>ments de classe exemple, quel que soit
|
|
|
|
|
|
leur type, et me laisse ainsi la libert<72> d'<27>crire <code><p
|
|
|
|
|
|
class="exemple"></code> dans les cas simples, et de recourir <20> un
|
|
|
|
|
|
<code>div</code> dans les cas plus compliqu<71>s.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Les classes peuvent bien s<>r <20>tre utilis<69>e avec des s<>lecteurs
|
|
|
|
|
|
hi<EFBFBD>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<69>s sp<73>cifiques, et en particulier les
|
|
|
|
|
|
liens.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le HTML a deux utilisation pour l'<27>l<EFBFBD>ment <code><a></code><3E>: faire un
|
|
|
|
|
|
lien et poser une ancre (cette derni<6E>re utilisation est obsolescente, mais
|
|
|
|
|
|
encore indispensable pour compatiblit<69>). S'il est l<>gitime de changer
|
|
|
|
|
|
l'apparence d'un lien (le soulignement usuel est quand m<>me tr<74>s laid), il
|
|
|
|
|
|
n'est probablement pas souhaitable que les ancres apparaissent de la m<>me
|
|
|
|
|
|
mani<EFBFBD>re. Le s<>lecteur <code>a:link</code> d<>signe un lien par opposition <20>
|
|
|
|
|
|
une ancre.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Vous avez sans doute remarqu<71> que certains navigateurs affichent de couleur
|
|
|
|
|
|
diff<EFBFBD>rente les liens d<>j<EFBFBD> visit<69>s. CSS permet de changer <20>a en utilisant un
|
|
|
|
|
|
s<EFBFBD>lecteur <code>a:visited</code>. Attention, <code>:visited</code> s'utilise
|
|
|
|
|
|
<em><3E> la place</em> de <code>:link</code><3E>: un lien d<>j<EFBFBD> visit<69> n'est pas
|
|
|
|
|
|
reconnu par <code>a:link</code>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Dans le m<>me genre d'id<69>e, il existe la pseudo-classe <code>:hover</code>,
|
|
|
|
|
|
qui d<>signe un <20>l<EFBFBD>ment (souvent un lien, mais ce n'est pas indispensable)
|
|
|
|
|
|
que l'utilisateur <20><>touche<68><65>, avec le pointeur de la souris par exemple (la
|
|
|
|
|
|
signification exacte d<>pend des navigateurs). On trouve <20>galement les
|
|
|
|
|
|
pseudo-classes <code>:focus</code> et <code>:active</code>, qui ont des
|
|
|
|
|
|
significations proches (pour un navigateur <20> 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'<27>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 <20>crira<72>:
|
|
|
|
|
|
</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 <20>tre omis), et
|
|
|
|
|
|
permettent de changer <20>norm<72>ment d'aspects de la pr<70>sentation d'un <20>l<EFBFBD>ment.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Dans beaucoup de cas, la valeur peut <20>tre <code>inherit</code>, ce qui
|
|
|
|
|
|
revient <20> ne pas sp<73>cifier de valeur et utiliser celle de l'<27>l<EFBFBD>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<70>ciser que
|
|
|
|
|
|
pour annuler une autre d<>claration (ce qui peut se voir comme une mauvaise
|
|
|
|
|
|
conception, mais vous <20>tes libres).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Police et couleur</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
La premi<6D>re chose qu'on veut apprendre <20> changer, c'est <20>videmment
|
|
|
|
|
|
l'apparence des caract<63>res<65>: la police et la couleur, ainsi que la taille.
|
|
|
|
|
|
L'utilisation de CSS fait compl<70>tement dispara<72>tre l'usage de l'antique
|
|
|
|
|
|
<EFBFBD>l<EFBFBD>ment <code><font></code>. Voici l'essentiel des d<>clarations de
|
|
|
|
|
|
police<EFBFBD>:
|
|
|
|
|
|
</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)<29>; les noms comportant des espaces doivent <20>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<61>es par des virgules. Le CSS
|
|
|
|
|
|
d<>finit des familles g<>n<EFBFBD>riques, <code>serif</code>,
|
|
|
|
|
|
<code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> et
|
|
|
|
|
|
<code>fantasy</code>, il est conseill<6C> de toujours mettre une famille
|
|
|
|
|
|
g<>n<EFBFBD>rique en dernier recours.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pour changer la taille de la police, c'est <code>font-size</code> qu'il faut
|
2004-08-09 09:48:30 +02:00
|
|
|
|
utiliser. On peut lui donner une valeur descriptive (<code>xx-small</code>,
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<code>x-small</code>, <code>small</code>, <code>medium</code>,
|
|
|
|
|
|
<code>large</code>, <code>x-large</code>, <code>xx-large</code>), une valeur
|
|
|
|
|
|
relative <20> la taille actuelle (<code>larger</code>, <code>smaller</code> ou
|
|
|
|
|
|
un pourcentage), ou une longueur fix<69>e (voir plus bas pour les unit<69>s
|
|
|
|
|
|
possibles). Ce dernier choix est <20> <20>viter car il prive l'utilisateur de sa
|
|
|
|
|
|
libert<EFBFBD> de choix sur la taille des polices (quelqu'un qui a de bons yeux
|
|
|
|
|
|
peut pr<70>f<EFBFBD>rer des polices petites pour tout avoir sur une page, quelqu'un
|
|
|
|
|
|
qui a des probl<62>mes de vue voudra de gros caract<63>res).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Il est possible de sp<73>cifier plusieurs propri<72>t<EFBFBD>s d'un coup avec
|
|
|
|
|
|
<code>font:</code>. Il faut alors mettre d'<27>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<6E>res<65>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><code>#rrggbb</code>, o<> <code>rr</code>, <code>gg</code> et
|
|
|
|
|
|
<code>bb</code> sont des nombres hexad<61>cimaux <20> deux chiffres, de 00 <20> 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<74>res de 0 <20>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<75> de trois zones<65>: de
|
|
|
|
|
|
l'int<6E>rieur vers l'ext<78>rieur, du remplissage (<i>padding</i>), une bordure
|
|
|
|
|
|
(souvent fine ou absente) et une marge. Les marges d'objets voisins
|
|
|
|
|
|
fusionnent, mais <20>a s'arr<72>te <20> la bordure. Quand on d<>finit une couleur de
|
|
|
|
|
|
fond, celle-ci s'<27>tend dans le remplissage jusqu'<27> la bordure.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Dans le cas des marges, seule leur <20>tendue peut <20>tre d<>finie. On utilise
|
|
|
|
|
|
pour <20>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 <20>gales.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Les longueurs sont indiqu<71>es par des nombres avec des unit<69>s. Les unit<69>s
|
|
|
|
|
|
possibles sont <code>in</code> (pouce), <code>cm</code>, <code>mm</code>,
|
|
|
|
|
|
<code>pt</code> (point, 1/72<37>pouce), <code>pc</code> (pica, 12<31>points). On a
|
|
|
|
|
|
<EFBFBD>galement <code>em</code> et <code>ex</code>, qui d<>pendent de la police
|
|
|
|
|
|
active, et surtout de sa taille<6C>; l'em est plut<75>t <20> utiliser pour les
|
|
|
|
|
|
longueurs horizontales, l'ex pour les longueurs verticales<65>; ce sont de
|
|
|
|
|
|
bonnes unit<69>s pour les espaces entre les lignes de texte par exemple. On a
|
|
|
|
|
|
pour finir <code>px</code>, qui d<>signe un pixel <20> l'<27>cran.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Les dimensions des marges et du remplissage peuvent <20>tre <20>galement un
|
|
|
|
|
|
pourcentage, relatif au bloc qui embo<62>te celui dont on d<>finit les
|
|
|
|
|
|
caract<EFBFBD>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, <20> ceci pr<70>s qu'il faut
|
|
|
|
|
|
mettre <code>padding-</code> <20> la place de <code>margin-</code>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Pour la bordure, on a trois caract<63>ristiques qu'il est possible de r<>gler,
|
|
|
|
|
|
<code>width</code> (l'<27>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<72>t<EFBFBD>s, de la forme
|
|
|
|
|
|
<code>border-<var>c<>t<EFBFBD></var>-<var>caract<63>ristique</var></code> (par exemple
|
|
|
|
|
|
<code>border-left-color</code>).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
On a <20>galement les raccourcis <code>border-<var>c<>t<EFBFBD></var></code>, qui
|
|
|
|
|
|
permettent de d<>finir tout ou partie des trois caract<63>ristiques d'un coup,
|
|
|
|
|
|
et <code>border</code> tout court qui d<>finit une bordure identique pour les
|
|
|
|
|
|
quatre c<>t<EFBFBD>s d'un coup. Il est d'ailleurs souvent pr<70>f<EFBFBD>rable d'utiliser
|
|
|
|
|
|
<code>border</code> tout court<72>; en particulier, pour un effet de relief, il
|
|
|
|
|
|
vaut mieux utiliser les styles adapt<70>s que changer manuellement les couleurs
|
|
|
|
|
|
des diff<66>rents c<>t<EFBFBD>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
|
|
|
|
|
|
<EFBFBD>galement possible, et parle d'elle-m<>me. On peut <20>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)<29>; la valeur <code>none</code> permet d'enlever
|
|
|
|
|
|
une image d<>j<EFBFBD> pr<70>sente. On peut contr<74>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<EFBFBD>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<EFBFBD>ristiques d'un coup. Exemple<6C>:
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
body { background: rgb(95%,95%,70%) url(poissons.png) no-repeat; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>L'apparence des tables</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
<EFBFBD> suivre...
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="metainformation">
|
|
|
|
|
|
Auteur<EFBFBD>: Nicolas George.
|
2006-11-10 14:54:12 +01:00
|
|
|
|
Derni<EFBFBD>re modification le <date value="$Date: 2006-11-10 13:54:12 $" />.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
