2009-09-20 12:34:28 +02:00
|
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<!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>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
des balises avec des attributs partout dans le texte. Elles permettent de
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h2>Qui fait quoi, où, comment ?</h2>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
|
|
|
|
|
|
<h3>Le principe</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<em>lemmonchiffon2</em>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Il est possible d'être plus sélectif que ça. Le HTML fournit deux éléments,
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<code><div></code> au niveau bloc et <code><span></code> au
|
2009-09-20 12:27:14 +02:00
|
|
|
|
niveau inline, qui n'ont aucune présentation particulière, et servent
|
|
|
|
|
|
précisément à se voir attacher un style.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h3>Où mettre une feuille de style</h3>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
document, entre une paire de balises <code><style
|
|
|
|
|
|
type="text/css"></code>...<code></style></code>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
la forme <code><link rel="stylesheet" type="text/css"
|
|
|
|
|
|
href="<var>fichier</var>.css"></code>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Ces deux méthodes peuvent d'ailleurs être utilisées ensemble dans le même
|
2003-10-13 21:11:08 +02:00
|
|
|
|
document. Dans ces conditions, si elles se contredisent, c'est la feuille
|
2009-09-20 12:27:14 +02:00
|
|
|
|
é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à.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h3>Comment on écrit une feuille de style</h3>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Une feuille de style s'écrit dans le langage appelé <dfn>CSS</dfn>, pour
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<em>Cascading Stylesheet</em>. Le terme <em>cascading</em> souligne une
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
de type <code><a></code>, dont on ne sait rien de la police, se trouve
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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 :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
strong { font-weight: bold; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
<p class="continue">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
C'est limpide, n'est-ce pas ?
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Le point-virgule à la fin servirait à séparer d'une autre caractéristique
|
|
|
|
|
|
donnée, comme par exemple :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
évite de l'oublier plus tard.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Il est possible de mettre des commentaires presque n'importe où dans une
|
2003-10-13 21:11:08 +02:00
|
|
|
|
feuille de style CSS en les encadrant de <code>/*</code> et <code>*/</code>,
|
|
|
|
|
|
comme dans le langage C.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h2>Les sélecteurs</h2>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h3>Quelques règles de bases</h3>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
L'essentiel des sélecteurs sera formé de noms d'éléments, ce qui désigne
|
|
|
|
|
|
tous, ou certains éléments de ce type.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
exemple du bleu parce que c'est un lien, et du gras parce que c'est dans un
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<code><strong></code>, ça donne du bleu gras.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
des liens de la barre de navigation.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h3>Les sélecteurs hiérarchiques</h3>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Considérons par exemple :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
table p { par-indent: 0; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
<p class="continue">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Ce genre de règle s'applique à n'importe quel degré de descendance : dans
|
2003-10-13 21:11:08 +02:00
|
|
|
|
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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<code>td</code> entre les deux. Ça n'a pas d'importance.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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 :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
ul > li { margin-left: 1em; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
<p class="continue">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
si on n'a pas envie que la règle s'applique à un <code>li</code> qui serait
|
2003-10-13 21:11:08 +02:00
|
|
|
|
contenu dans une sous-liste de type <code>ol</code>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h3>La classe d'un élément</h3>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
le lien avec une feuille de style.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Ainsi, il peut me prendre l'envie, quand un paragraphe est un exemple,
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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 :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
p.exemple { font-family: sans-serif; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
<p class="continue">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
et alors tous ces paragraphes apparaîtront dans une police différente.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
L'attribut <code>class</code> s'utilise souvent en conjonction avec les
|
2009-09-20 12:27:14 +02:00
|
|
|
|
é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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
abstrait de <code>div</code>. Supposons que je veuille mettre un filet bleu
|
2009-09-20 12:27:14 +02:00
|
|
|
|
à gauche de mes exemples. Je peux écrire :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
les paragraphes. Je ne peux pas non plus mettre une énumération ou une table
|
|
|
|
|
|
dans l'exemple. Il vaut mieux alors écrire :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</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">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Les classes peuvent bien sûr être utilisée avec des sélecteurs
|
|
|
|
|
|
hiérarchiques.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Les pseudo-classes</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
liens.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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 à
|
2003-10-13 21:11:08 +02:00
|
|
|
|
une ancre.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
reconnu par <code>a:link</code>.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
pseudo-classes <code>:focus</code> et <code>:active</code>, qui ont des
|
2009-09-20 12:27:14 +02:00
|
|
|
|
significations proches (pour un navigateur à la souris habituel,
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<code>:hover</code> dit que le curseur est dessus, <code>:active</code> que
|
2009-09-20 12:27:14 +02:00
|
|
|
|
l'utilisateur est en train de cliquer, et <code>:focus</code> désigne le
|
|
|
|
|
|
fait d'être actif pour le clavier).
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Les pseudo-classes se combinent. Ainsi, pour changer le fond d'un lien quand
|
2009-09-20 12:27:14 +02:00
|
|
|
|
le pointeur passe dessus, on écrira :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<h2>Les déclarations</h2>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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).
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>Police et couleur</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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 :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
police proprement dite) ; les noms comportant des espaces doivent être mis
|
2003-10-13 21:11:08 +02:00
|
|
|
|
entre guillemets. Comme tout le monde n'a pas toutes les polices du monde,
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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>,
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> et
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<code>fantasy</code>, il est conseillé de toujours mettre une famille
|
|
|
|
|
|
générique en dernier recours.</li>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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).
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
graisse, puis une taille, puis une famille.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
La couleur se règle avec <code>color:</code>. Une couleur peut s'indiquer
|
|
|
|
|
|
de plusieurs manières :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<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,
|
2003-10-13 21:11:08 +02:00
|
|
|
|
pour le rouge, le vert et le bleu.</li>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<li><code>rgb(<var>r</var>,<var>g</var>,<var>b</var>)</code>, où
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<var>r</var>, <var>g</var> et <var>b</var> sont soit des pourcentages soit
|
2009-09-20 12:27:14 +02:00
|
|
|
|
des valeurs entières de 0 à255, pour le rouge, le vert et le bleu.</li>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<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>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
(souvent fine ou absente) et une marge. Les marges d'objets voisins
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Dans le cas des marges, seule leur étendue peut être définie. On utilise
|
|
|
|
|
|
pour ça <code>margin-top</code>, <code>margin-right</code>,
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
que deux longueurs elles définissent les marges haute et basse d'une part et
|
2003-10-13 21:11:08 +02:00
|
|
|
|
gauche et droite d'autre part, et si on n'en met qu'une, les quatre marges
|
2009-09-20 12:27:14 +02:00
|
|
|
|
sont égales.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Les longueurs sont indiquées par des nombres avec des unités. Les unités
|
2003-10-13 21:11:08 +02:00
|
|
|
|
possibles sont <code>in</code> (pouce), <code>cm</code>, <code>mm</code>,
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
peut indiquer <code>auto</code> pour les marges, pour qu'elles s'ajustent au
|
|
|
|
|
|
mieux.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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>.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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>
|
2003-10-13 21:11:08 +02:00
|
|
|
|
(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
|
2009-09-20 12:27:14 +02:00
|
|
|
|
font), ce qui donne 12 propriétés, de la forme
|
|
|
|
|
|
<code>border-<var>côté</var>-<var>caractéristique</var></code> (par exemple
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<code>border-left-color</code>).
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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.
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Maintenant, le fond. Il est possible de choisir une couleur unie avec
|
|
|
|
|
|
<code>background-color</code>. La valeur <code>transparent</code> est
|
2009-09-20 12:27:14 +02:00
|
|
|
|
également possible, et parle d'elle-même. On peut également mettre une image
|
2003-10-13 21:11:08 +02:00
|
|
|
|
de fond avec <code>background-image:
|
2009-09-20 12:27:14 +02:00
|
|
|
|
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
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<code>background-repeat</code>, qui peut prendre les valeurs
|
|
|
|
|
|
<code>repeat</code>, <code>repeat-x</code>, <code>repeat-y</code> ou
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<code>no-repeat</code>, pour choisir si l'image se répète ou pas,
|
2003-10-13 21:11:08 +02:00
|
|
|
|
<code>background-position</code>, qui prend deux longueurs ou pourcentages,
|
|
|
|
|
|
et enfin <code>background-attachment</code>, qui vaut <code>scroll</code> ou
|
2009-09-20 12:27:14 +02:00
|
|
|
|
<code>fixed</code> (l'image défile avec la page ou pas).
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Le raccourci <code>background</code> permet de fixer tout ou partie de ces
|
2009-09-20 12:27:14 +02:00
|
|
|
|
caractéristiques d'un coup. Exemple :
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
<pre>
|
|
|
|
|
|
body { background: rgb(95%,95%,70%) url(poissons.png) no-repeat; }
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>L'apparence des tables</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
2009-09-20 12:27:14 +02:00
|
|
|
|
À suivre...
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="metainformation">
|
2009-09-20 12:27:14 +02:00
|
|
|
|
Auteur : Nicolas George.
|
2009-09-27 22:00:55 +02:00
|
|
|
|
<date value="from git" />
|
2003-10-13 21:11:08 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
