Vous avez certainement vu dans le source de pages HTML des attributs dont nous n’avons pas parlé. A vrai dire, HTML n’était pas prévu au départ pour programmer le style d’un document, c’était un format spartiate qui n’était destiné qu’à communiquer des informations, et à préciser leur nature : titre, texte, image, tableau… Avec son succès pour le grand public, un grand nombre d’attributs on été introduits de façon anarchique pour combler cette lacune. Le W3C a donc décidé de séparer le contenu de la présentation. Beaucoup de ces attributs sont donc déconseillés [deprecated] et deviendront obsolètes dans les versions futures.
Le langage de feuille de style appelés également langage CSS (Cascading Style Sheet), est apparu en 1996 dans ce but. Il permet l’implémentation d’un très grand nombre de déclarations contrôlant tous les paramètres de style et d’affichage.
Le CSS apporte les avantages suivants :
Le CSS présente néanmoins les inconvénients suivants :
- Toutes les commandes de feuilles de style ne sont pas encore reconnues par tous les navigateurs. Ainsi, pour pouvoir réaliser certaines constructions, il faut utiliser un bon nombre de commandes de remplacement de façon à obtenir un simple ersatz beaucoup plus lourd.
- Le temps d’interprétation des commandes par le navigateur est relativement long. Il demande beaucoup de mémoire, ce qui élimine, en partie, le gain de temps potentiel au téléchargement.
Son principe : il est conçu de façon hiérarchique, ou en cascade. Chaque élément imbriqué hérite de certains styles de l’élément le contenant, et a la possibilité de les remplacer, de les modifier ou de rajouter des déclarations. Cette hiérarchie s’étend de chaque élément particulier jusqu’au corps du document, aux feuilles de styles internes ou externes, et même aux préférences de l’utilisateur configurées avec le navigateur. L’annexe C dresse la liste des styles sui sont héritables.
Il existe plusieurs façons d’associer les feuilles de style au document HTML :
2.1. La méthode intraligne consiste à définir le style à même la balise HTML dans le document comme ceci :
<p style="color: white;">
Le style s’applique ici à l’élément de paragraphe. Ainsi, tout le paragraphe s’affichera en blanc. C’est la méthode la moins préférable.
2.2. Dans le cas de la méthode interne, les styles sont tous définis dans l’en-tête du document HTML de la façon suivante :
<html>
<head>
<style type="text/css">
b {color: green; }
</style>
</head>
...
Comme la règle de style se situe dans l’en-tête, il suffit d’utiliser normalement la balise <b>
(caractère gras) dans le reste du document. Par exemple, ce texte sera affiché en gras et en
vert.
2.3. La méthode externe consiste à lier au document HTML une ou plusieurs feuilles de style situées dans un fichier externe avec l’extension .css
. La même feuille de style peut alors aisément s’appliquer à plusieurs documents HTML. Nous définissons la liaison de la manière suivante :
<html>
<head>
<link rel="stylesheet" href="http://www.adresse.com/mesStyles.css"
title="Mes styles">
</head>
...
2.4. Comme son nom l’indique, la méthode importée importe les styles provenant d’un fichier externe de façon à les fusionner à une feuille de styles existante. La définition se fait comme suit :
<html>
<head>
<style type="text/css">
@import "http://www.adresse.com/styles1.css"
...
L’instruction @import
n’est autorisée qu’au début d’une feuille de style.
La brique élémentaire de CSS est la déclaration, qui est en deux parties, comme ceci :
Propriété: Valeur
Similairement aux couples attribut/valeur, une déclaration assigne une valeur à une propriété. Remarquons que les deux-points remplacent le signe égal.
Il est possible d’assigner en même temps plusieurs propriétés liées entre elles en utilisant une notation abrégée. Les valeurs sont alors indiquées à la suite les unes des autres et séparées par un espace. Les deux notations suivantes sont alors équivalentes :
Propriété: ValeurA ValeurB ValeurC
Propriété-A: ValeurA
Propriété-B: ValeurB
Propriété-C: ValeurC
Dans le cas d’un style intraligne, on affecte à l’attribut style
d’un élément une liste de déclarations séparées par des ";
", et mise entre guillemets ""
" ou apostrophes "'
". Le point-virgule à la fin de la dernière déclaration est facultatif, mais conseillé. Exemple :
<p style="border: 1px solid red; font-family: 'Times New Roman';"></p>
Dans les autres cas, les styles sont regroupés en règles, comme ceci :
Sélecteur {
Déclaration;
Déclaration;
...
}
Les espaces et les retours à la ligne ne sont pas significatifs, sauf à l’intérieur d’un mot clé.
Le sélecteur correspond au nom d’élément sur lequel les déclarations vont agir, il peut être composés de plusieurs noms séparés par une virgule. Voici enfin un exemple de règle CSS :
h1,
th {
text-align: center;
color: navy;
}
Tout le texte contenu à l’intérieur de n’importe quel élément h1
ou th
dans la partie de code HTML contrôlée pas la feuille de style sera aligné au centre et de couleur bleu marine.
Mais parfois on ne veut appliquer une règle qu’à un où plusieurs éléments du même type. Il faut alors utiliser l’attribut class
ou id
(identificateur) dans ces éléments, et incorporer leur valeur dans le sélecteur. Comme nous l’avons vu, la valeur d’un attribut id
doit être unique dans le document, il permet donc de définir le style d’un seul élément.
Exemple avec class
:
<html>
<head>
<style type="text/css">
h2.vert {
font size: 16pt;
color: olive;
}
h2.jaune {
font size: 14pt;
color: yellow;
}
</style>
</head>
<body>
<h2 class="vert">Titre vert olive à 16 points</h2>
<h2 class="jaune">Titre jaune à 14 points</h2>
<h2>Titre normal</h2>
</body>
</html>
Exemple avec id
:
<html>
<head>
<style type="text/css">
#test {
font size: 10pt;
color: fuchsia;
}
</style>
</head>
<body>
<h2 id="test">Titre défini avec une ID</h2>
<h2>Titre normal</h2>
</body>
</html>
Dans le cas de class
, il est possible d’omettre le nom d’élément dans le sélecteur. La règle s’applique alors à n’importe quel type d’élément. Et dans le cas de id
, il est possible de mettre un type d’élément à la place du "*
". La règle n’est alors appliquée que si l’élément correspondant est bien de ce type. Pour en comprendre l’utilité, il faut se rappeler qu’une feuille de style peut être appliquées à plusieurs document différents.
Au lieu de désigner explicitement à l’aide de classes les éléments sur lesquels un certain style doit être appliqué, il est possible de sélectionner ceux qui possèdent une caractéristique donnée. C’est ce qui est appelé les pseudo-classes. Elles sont surtout utilisées pour l’élément <a>
, afin de traiter les cas où un lien a été visité : visited
, où le pointeur de la souris est sur lui : hover
, où il est actif : active
, et enfin les autres cas : link
, mais hover
et active
fonctionne aussi pour n’importe quel élément. Par exemple :
a:link { color: gray; } /* gris */
a:visited { color: purple; } /* violet */
a:hover { color: aqua; } /* turquoise */
a:active { color: maroon; } /* bordeaux */
Pour fonctionner, ces règles doivent être entrées dans cet ordre (?).
La pseudo-classe first-letter
désigne la première lettre d’un paragraphe, elle est très utile pour mettre des lettrines, ces grandes lettres au début d’un paragraphe.
Les balises <div>
et <span>
permettent d’ajouter des règles ou de supplanter celles déjà existantes, ce qui a pour effet de modifier ou d’enrichir localement le style.
<div>
est utilisé pour des blocs de texte entier, c’est à dire qu’il y a un passage à la ligne au début et à la fin du bloc.
<span>
est utilisé que pour des petites portions de texte à l’intérieur d’une ligne ou d’un paragraphe.
Tous deux admettent, en plus de l’attribut style
, les attributs id
et class
, de même que lang
et dir
.
Exemple avec div
:
<div style="margin-left: 40px; color: blue;" lang="fr">
<p>Ce paragraphe sera placé à 40 pixels de la marge de gauche
et de couleur bleu.</p>
</div>
Exemple avec span
:
<p class="normal">Dans ce paragraphe, les mots
<span style="color: red; font-family: 'Verdana';">feuille de style</span>
seront dans la police Verdana et de couleur rouge.</p>
C’est à peu près tout ce qu’il faut savoir sur la mise en œuvre des feuilles de style. En revanche, le nombre important de propriétés et la complexité que prennent parfois ses effets peuvent les rendre délicates à utiliser. En effet, elles sont capables de gérer l’aspect et la disposition du texte et des images, l’espacement entre les éléments, et même les effets de transition. Nous ne décrirons bien sûr pas tout, et nous bornerons aux propriétés les plus utiles, les plus courantes, et les plus simples, ce qui permet de réaliser presque toutes les applications. Pour le reste, il vaut mieux consulter les spécifications détaillées sur le site de la W3C, cette présentation servant de guide en en donnant la philosophie générale.
Pour le texte contenu dans les paragraphes, les titres et les légendes, les propriétés suivantes définissent les paramètres des caractères.
color
Définit la couleur d’avant plan, donc des caractères s’il s’agit de texte. Voir l’annexe A pour les différentes notations.
font-family
Définit la famille de police. La valeur est une suite de noms de police séparés par une virgule. Si la première de la liste n’est pas disponible pour un caractère donné, c’est la seconde qui sera utilisée et ainsi de suite. Les polices les plus courantes sont Times New Roman
, Arial
ou Helvetica
, Verdana
, Courier New
… Au lieu d’une police spécifique, une police générique de la liste suivante est utilisable : serif
, sans-serif
,
cursive
, fantasy
et monospace
. Les caractères avec serif
ont des petites barres qui terminent les tiges, et les monospace ont une chasse fixe. Il est conseillé de toujours terminer la liste avec une police générique. Notons que les noms de polices doivent être entre guillemets, mais pas les noms génériques.
font-size
Définit la taille de la police, ou plus exactement l’espacement entre les lignes, qui peut être exprimée de différentes façons :
pt
qui est utilisé, mais ce n’est pas une obligation.body
, et même de disposer de tailles dépendant du contexte, comme par exemple des plus petits caractères à l’intérieur d’un bloc de taille de police quelconque. Les unités em
et ex
sont
les plus pratiques.xx-small
, x-small
, small
, medium
, large
, x-large
et xx-large
, de la plus petite à la plus grande. Leur avantage est que les navigateurs possèdent une fonction qui permet de les redéfinir, donc d’agrandir ou de diminuer globalement la taille de la page pour l’ajuster à la définition de l’écran ou au confort de l’utilisateur.smaller
pour plus petit et larger
pour plus grand. Le résultat est de passer d’une taille à l’autre de la liste donnée précédemment, avec les même avantages qu’avec le pourcentage.font-style
Définit un des trois styles : normal
(défaut), italic
et oblique
. Cette propriété étend la fonctionnalité de la balise <i>
font-weight
Définit le poids
de la police, avec deux valeurs possibles : normal
(défaut) et bold
[gras]. Il est possible de spécifier différents degrés exprimés par les nombres 100
, 200
, 300
, 400
(normal
), 500
, 600
, 700
(bold
), 800
, 900
et les mots-clé relatifs lighter
[moins gras] et bolder
[plus gras], mais il ne garantissent pas que de telles polices existent. Cette propriété étend la fonctionnalité de la balise <b>
.
text-align
Définit l’alignement horizontal du texte dans un bloc. Il admet les valeurs habituelles : left
(à gauche), right
(à droite), center
(centré) et justify
(justifié).
text-decoration
Définit différents attributs du texte. Souligné : underline
, surligné : overline
, barré : line-through
, ou aucun d’eux : none
.
text-indent
Définit l’indentation, c’est-à-dire le décalage vers la droite de la première ligne d’un paragraphe par rapport aux suivantes. Il peut être positif ou négatif, et exprimé dans n’importe quelle unité, ou en pourcentage par rapport à la largeur du paragraphe (voir annexe B.)
Les styles offrent plus de choix pour la présentation des listes.
list-style-type
Choisit le marqueur utilisé comme
puce
ou comme numérotation. Il y a de nombreuses possibilités :
Valeur | Marqueur |
---|---|
none |
Aucun. |
disc |
Un rond plein. |
circle |
Un rond vide. |
square |
Un carré. |
decimal |
Numérotation en chiffres arabes : 1, 2, 3, ... |
decimal-leading-zero |
Numérotation en chiffres arabes complétés par des zéros au début afin que les nombres aient tous la même longueur : 1, 2, 3 ou 01, 02, ... , 10 ... |
lower-roman |
Numérotation en chiffres romains minuscules : i, ii, iii, ... |
upper-roman |
Numérotation en chiffres romains majuscules : I, II, III, ... |
lower-latin |
Lettres minuscules : a, b, c, ... |
upper-latin |
Lettres majuscules : A, B, C, ... |
lower-greek |
Lettres grecques minuscules : α, β, γ, ... |
La distinction entre liste à puce et liste ordonnée a donc
disparu. Les balises <ul>
et <ol>
sont utilisables indifféremment.
list-style-image
Choisit l’URI d’une
image qui servira de puce. Si elle n’existe pas, c’est ce qui a été définit par
list-style-type
qui sera utilisé. La syntaxe pour un URI est la suivante :
list-style-image: url("http://www.domaine.com/puce.gif");
list-style-position
Choisit la
position de la puce ou de la numérotation. Deux cas possibles, soit à
l’intérieur avec la valeur inside
, le paragraphe revient à la ligne
à la verticale de la puce, soit à l’extérieur avec la valeur outside
,
tout le paragraphe est alors aligné à la droite de la puce.
Le fond de tout le document est défini dans la balise <body>
,
mais chaque élément peut aussi avoir son fond propre. On a le choix entre une
couleur uniforme, ou une image disposée de diverses façons : en mosaïque,
fixe, défilante...
background-color
Spécifie la couleur de
fond (voir annexe A.) Si la valeur affectée à cette propriété est le mot clé
transparent
, le défaut, la couleur sera celle de
l’élément au-dessus de laquelle l’élément est affiché.
background-image
Spécifie l’URI de l’image
de fond. Si l’image n’est pas trouvée, si elle a des parties transparentes, ou
si elle ne couvre pas tout l’élément, c’est la couleur définie par
background-color
qui devient visible aux endroits non définis.
background-repeat
Spécifie si et comment
l’image est affichée en mosaïque, selon la valeur : no-repeat
, pas de
mosaïque, repeat
, mosaïque classique, repeat-x
,
seulement dans le sens horizontal, repeat-y
, seulement dans le sens vertical.
background-attachment
Spécifie si l’image
doit rester fixe sur l’écran : valeur fixed
, ou si elle doit défiler avec la
page : valeur scroll
.
Si le fond est une image fixe qui n’est pas affichée en mosaïque, et qu’il
s’agit d’un élément qui n’occupe pas toute la fenêtre du navigateur, il se peut
qu’il ne soit pas visible.
Avec les styles, il est possible de dessiner des bords de toute forme et couleur autour d’un élément quelconque, sans utiliser de tableau. Il y a d’abord trois propriétés principales.
border-width
Indique l’épaisseur de la zone de
bord, soit par une valeur numérique (voir annexe B), soit par un des trois mots-clé
suivants : thin
pour un bord fin, medium
pour un bord moyen, et thick
pour un bord épais. L’épaisseur réelle qui leur correspond n’est pas imposée,
mais est constante dans le document. Il est possible de donner des valeurs
différentes pour les bords horizontaux et verticaux en donnant deux valeurs séparées
par un espace, ou pour le haut, la droite, le bas et la gauche dans cet ordre
en donnant quatre valeurs.
border-style
Indique
le type de dessin du bord, avec les possibilités suivantes :
Valeur | Style |
---|---|
none | Pas de bord, sa largeur est 0. |
dotted | Pointillé. |
dashed | Interrompu. |
solid | Continu. |
double | Double ligne continue. |
groove | En 3D, bord enfoncé. |
ridge | En 3D, bord en relief. |
inset | En 3D, cellule enfoncée. |
outset | En 3D, cellule en relief. |
border-color
Indique la couleur du bord (voir annexe A.)
Ensuite ces propriétés peuvent être combinées ou détaillées.
border
Indique les trois propriétés à la suite, dans l’ordre width
, style
puis color
. Les propriétés de la fin de la liste peuvent être omises. Avec l’un des quatre
préfixes -top
(haut), -bottom
(bas), -left
(gauche), -right
(droite), les propriétés du côté correspondant sont indiquées. Chaque propriété peut être indiquée séparément en ajoutant encore le préfixe -style
… Par exemple border-right-color blue
indique que le côté droit du bord sera de couleur bleue.
cursor
Détermine la forme que prendra le
pointeur de la souris au-dessus de l’élément. Les valeurs possibles sont les
suivantes :
Valeur | Forme du curseur |
---|---|
auto |
Déterminée par le navigateur selon le type d’élément. |
crosshair |
Réticule. |
default |
Le pointeur par défaut du système. |
pointer |
Forme pour un lien. |
text |
Forme pour la sélection de texte. |
wait |
Forme indiquant que le système est occupé. |
help |
Forme indiquant une aide disponible. |
move |
Forme indiquant que quelque chose sera déplacé. |
x-resize |
Forme indiquant qu’un bord ou un coin sera déplacé lors d’un redimensionnement.
x est alors n pour le bord nord, s pour sud, e
pour est ou w pour ouest, ou encore par exemple nw pour le coin nord-ouest. |
Chaque élément définissant un contenu est délimité sur la page par un rectangle. Ce rectangle est composé de, en partant de l’extérieur :
width
Fixe la largeur de l’élément.
height
Fixe la hauteur de l’élément.
min-width
Fixe la largeur minimale de l’élément.
max-width
Fixe la largeur maximale de l’élément.
min-height
Fixe la hauteur minimale de l’élément.
max-height
Fixe la hauteur maximale de l’élément.
Chacune des propriétés suivantes s’utilise soit telle quelle pour fixer les quatre épaisseurs à la même valeur, soit en ajoutant à leur nom -top
(haut), -bottom
(bas), -left
(gauche) ou -right
(droit) pour le côté correspondant.
margin
Fixe l’épaisseur de la marge de l’élément.
padding
Fixe l’épaisseur du padding de l’élément.
Par exemple, margin-top
fixe l’épaisseur de la marge du haut.
Toutes ces dimensions s’expriment en valeur absolue, en pixel, ou en pourcentage de la dimension de l’élément qui le contient (voir annexe B.)
vertical-align
Choisit l’alignement dans le sens vertical d’un
élément par rapport à la position normale dans l’élément qui le contient. Il
s’exprime en valeur absolue ou en pourcentage, mais peut prendre aussi une
valeur prédéfinie représentée par un mot clé :
Valeur | Alignement |
---|---|
baseline |
C’est la position normale, la ligne de base du texte de l’élément est à la même hauteur que celle de l’élément qui le contient. |
sub |
Position normale d’un exposant. |
super |
Position normale d’un indice. |
top |
Le côté supérieur du rectangle de l’élément est à la même hauteur que celui de l’élément qui le contient. |
middle |
Le milieu du rectangle de l’élément est à la même hauteur que celui de l’élément qui le contient. |
bottom |
La base du rectangle de l’élément est à la même hauteur que celle de l’élément qui le contient. |
text-top |
Le côté supérieur du rectangle de l’élément est à la même hauteur que le haut de la police de l’élément qui le contient. |
text-bottom |
La base du rectangle de l’élément est à la même hauteur que le bas de la police de l’élément qui le contient. |
Les propriétés suivantes sont utiles lorsque des graphiques ou images sont mélangés avec du texte, et bien sûr que ceux-ci ne sont pas positionnés d’une autre manière.
float
Choisit de quel côté l’élément considéré,
souvent un graphique ou une image, doit être placé : left
pour qu’il
soit le long de la marge gauche, et right
pour la marge droite.
clear
Choisit si l’élément doit être affiché
plus bas qu’un élément float
précédent. Avec left
,
il doit l’être après les éléments avec float: left
, avec right
après les
éléments avec float: right
, avec both
après les deux. Si la valeur est none
, c’est le comportement par défaut, c’est-à-dire
qu’un texte par exemple est affiché à côté de l’élément float
s’il y a de
la place. Cette propriété évite donc que des éléments soient affichés côte à
côte.
Le positionnement des éléments est le grand avantage des feuilles de style, puisqu’il est possible au pixel près. Finies les multitudes de balises (surtout les tableaux) pour essayer de faire une mise en page correcte. Il existe quatre types de positionnement :
Le positionnement relatif (le moins précis) : le navigateur affichera l’élément relativement à l’emplacement qu’il aurait s’il n’était pas positionné.
Exemple :
<div style="position: relative; left: 50px; top: 100px;">
<p>Ce texte est décalé de 50 pixels vers la droite
et de 100 pixels vers le bas par rapport à sa position.</p>
</div>
Le positionnement fixe : L’élément sera affiché à un endroit fixe de la fenêtre du navigateur, et ne bougera pas si l’on fait défiler le document.
Exemple :
<div style="position: fixed; left: 50px; top: 100px;">
<p>Ce texte est placé à 50 pixels de la bordure gauche de la fenêtre
du navigateur et à 100 pixels du haut de cette même fenêtre.</p>
</div>
Le positionnement absolu : Le placement d’un objet s’effectue par rapport au document entier, ou par rapport au premier élément qui le contient et dont la propriété position
est différente de static
, le défaut.
Exemple :
<div style="position: absolute; left: 50px; top: 100px;">
<p>Ce texte est placé à 50 pixels de la bordure gauche de la page
et à 100 pixels du haut de cette même page.</p>
</div>
Le positionnement statique : Enfin, la valeur static
de la propriété position
indique que le positionnement normal doit être appliqué, c’est la valeur par défaut.
Nous avons donc les propriétés suivantes :
position
Définit le type de positionnement, et
admet les valeurs absolute
, relative
,
fixed
et static
.
top
Définit la position du haut de l’élément.
left
Définit la position du bord gauche de l’élément.
bottom
Définit la position du bas de l’élément.
right
Définit la position du bord droit de l’élément.
La taille de l’élément peut donc être définie en même temps.
Les autres unités que le pixel sont aussi utilisables (voir annexe B.) Si une dimension est exprimée en pourcentage, c’est par rapport à la hauteur ou la largeur de l’élément contenant, selon la direction.
Les éléments sont aussi positionnables dans le sens de la profondeur. Un élément imbriqué dans un autre a la même profondeur que lui, mais il existe la propriété suivante pour changer cela :
z-index
Définit la profondeur de l’élément
et de tous ceux qu’il contient par rapport à celui qui le contient. Elle prend des
valeurs entières positives (plus haut) ou négatives (plus bas). Les éléments en
dessous sont vus à travers les parties transparentes ou en dehors de ceux au-dessus.
CSS permet de contrôler plus précisément les dimensions, l’alignement et les bords à l’intérieur d’un tableau. Chaque élément qui le compose admet les mêmes propriétés que les éléments ordinaires, à la différence qu’il ne possède pas de marge, contrairement à l’élément tableau lui-même.
Un tableau est composé de l’empilage d’éléments, ce qui détermine les propriétés d’affichage des fonds. Le fond d’un élément est visible à un point donné si tous les éléments supérieurs sont transparents à ce point. Ils sont empilés dans l’ordre suivant : l’élément <table>
lui-même, les lignes, et enfin les cellules.
Toutes les propriétés décrites dans ce chapitre, sauf mention contraire, s’appliquent à l’élément <table>
.
Il y a deux modes de dimensionnement de la largeur des colonnes, le mode fixe et le mode automatique. Dans tous les cas, il n’y a pas vraiment de prescription rigide, et le résultat dépend surtout du navigateur.
table-layout
Fixe le mode de dimensionnement des colonnes, avec les mots-clé fixed
(fixe) ou auto
(automatique). Si cette propriété est absente, le mode automatique est choisi si la propriété width
de l’élément <table>
est absente ou a pour valeur auto
.
Le mode automatique : c’est celui qui demande le moins d’écriture, mais aussi qui donne moins de contrôle et le plus de travail au navigateur, ce qui risque de se ressentir par un délai à l’affichage. Les dimensions sont déterminées en fonction des propriétés padding
, width
et border-width
si
elles existent de tous les éléments constituants, et de leur contenu, de façon à ce que ces derniers soient affichés correctement
.
Le mode fixe : la largeur des colonnes est déterminée par celle des cellules de la première ligne, sans tenir compte des contenus, en utilisant les propriétés width
de ces cellules et du tableau. Si certaines sont manquantes, la largeur restante est partagée. Si au contraire elles sont redondantes, c’est la plus grande valeur qui s’applique et il y a un partage éventuel. Ce qui veut dire qu’il vaut mieux définir précisément toutes les largeurs de façon cohérente.
Dans un tableau, la propriété vertical-align
des cellules est interprétée un peu différemment. Il s’agit alors de l’alignement par rapport à la ligne. Les propriétés sub
, super
, text-top
et text-bottom
ne sont pas prises en compte. Dans le cas où une cellule est répartie sur plusieurs lignes, top
est relatif à la première, et bottom
à la dernière.
Pour une cellule, la propriété text-align
admet aussi une chaîne de caractère comme valeur. Cette chaîne sera alignée horizontalement pour toutes les cellules ayant la même valeur pour text-align
. L’utilisation la plus courante est celle de l’alignement sur le point décimal :
text-align: ",";
caption-side
pour l'élément <caption>
détermine la place de la légende : top
, le défaut, pour en haut et bottom
pour en bas.
Les cellules ayant chacune leur bord individuel, en plus de celui des lignes et du tableau, ils entrent en conflit. Il y a deux façons de le résoudre :
border-collapse
Indique le mode de résolution
des bords, avec les mots-clé collapse
(fusionnés) ou separate
(séparés)
Le mode séparé : tous les bords sont tracés comme si les cellules étaient simplement juxtaposées, et les bords des éléments ligne sont réduits à une épaisseur nulle. Ce n’est bien sûr pas la manière habituelle de comprendre un tableau, mais d’autres applications sont possibles comme par exemple un album photo, où chaque cellule a un bord séparé.
border-spacing
Indique la distance entre les
bords des cellules entre elles ou d’une cellule et du tableau. S’il y a deux
valeurs, la première est pour la direction horizontale et la deuxième pour la
direction verticale. Si la valeur est exprimée en pourcentage, c’est de la
hauteur ou de la largeur de l’élément <table>
(voir annexe B.)
empty-cell
Si la valeur de cette propriété est hide
[cacher],
les bords des cellules vides ne seront pas tracés. Ils le seront avec show
[montrer].
Si elle contient seulement
elle est considérée comme non vide.
Le mode fusionné : C’est le cas usuel où les bords traversent le tableau de façon continue. A chaque côté, un seul bord est tracé, celui d’une ligne, d’une colonne ou du tableau selon certaines règles simples. Le principe de base étant que c’est le bord le plus voyant qui est choisi. Spécifiquement :
none
. S’ils l’ont
tous, aucun bord n’est tracé.double
, solid
,
dashed
, dotted
, ridge
, outset
,
groove
, inset
.Afin d’avoir un meilleur contrôle sur ce procédé, la propriété border-style
admet la valeur représenté par le mot-clé hidden
. Si un des bords possède cette valeur, aucun bord n’est tracé à cet endroit, dans tous les cas.
Afin de rendre plus concret l’utilisation des styles, et de montrer que ce n’est pas si complexe de les mettre en œuvre, voici un modèle de document avec une feuille de style.
Document HTML
<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>{titre}</title>
<meta name="description" content="{description}">
<meta name="author" content="tout le monde peut être webmaster">
<link rel="stylesheet" href="style.css" title="exemple">
<style type="text/css">
i {
font-style: oblique;
}
h4 {
color: red;
}
</style>
</head>
<body>
<div id="header">
<h1>{titre}</h1>
</div>
<div id="nav">
<img src="image.gif" width="100%">
<ul>
<li><a href=".">accueil</a></li>
<li><a href="plan.html">plan du site</a></li>
<li><a href="mailto:{email}">contact</a></li>
</ul>
</div>
<div id="main" style="background-image: 'bg.gif';">
<table style="table-layout: fixed;">
<tr>
<td></td>
<td style="border: thick double navy; color: navy;
padding: 5px;"><p>{paragraphe}</p></td>
<td></td>
</tr>
<tr>
<td><span class="accent">{accent}</span></td>
<td></td>
<td><p>{texte}<span class="fine">{fine}</span></p></td>
</tr>
</table>
</div>
<div id="aside">
</div>
<div id="footer">
[<a href="">accueil</a> |
<a href="plan.html">plan du site</a> |
<a href="mailto:{email}">contact</a>]
</div>
</body>
</html>
Feuille de style CSS
@import "http://www.mydomain.com/hoststyle.css"
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: green; }
a:active { color: red; }
body {
background-color: silver;
color: black;
font: 16px 'verdana', 'arial', sans-serif;
padding: 0;
margin: 0;
}
p:first-letter {
font-size: 3em;
font-weight: bold;
}
h1 {
font-size: 3.5em;
font-weight: 900;
text-align: center;
}
h2 {
font-style: italic;
text-decoration: underline;
}
h3 {
font-family: serif;
color: #0000c0;
}
ul {
list-style-type: none;
}
.accent {
text-decoration: underline;
color: red;
}
.fine {
font-size: smaller;
}
#header {
text-align: center;
color: olive;
padding: 2ex;
width: 100%;
}
#main,
#nav,
#aside {
vertical-align: top;
height: 40em;
float: left;
}
#main {
background-repeat: repeat;
text-align: justify;
text-indent: 0;
width: 71.4%
}
#nav {
background-color: gray;
width: 14.3%;
}
#aside {
background-color: white;
width: 14.3%;
}
#footer {
font-size: smaller;
text-align: center;
width: 100%;
clear: both;
}
Toutes les couleurs possibles sont représentables par leur proportion de rouge, de vert et de bleu. C’est ainsi que les écrans les reproduisent. Trois nombres de 0 à 255 suffisent pour désigner une couleur, sans que les nuances les plus proches ne soient distinguables à l’œil, ce qui fait tout de même plus de 16 millions de couleurs.
Il n’y a pas moins de 3 notations différentes :
En décimal : la syntaxe suivante est utilisée :
rgb(r,v,b)
où r, v et b sont des
nombres entiers de 0 à 255 représentant respectivement l’intensité de rouge, de
vert et de bleu.
En pourcentage : les nombres de 0 à 255 sont remplacés
par des pourcentages de 0% à 100% : rgb(5%,15%,25%)
.
En hexadécimal, hérité de HTML : la couleur est représentée
par le caractère "#
"
suivit de 6 chiffres hexadécimaux : #12abff
, où 12
est
l’intensité du rouge, ab
celle du vert et ff
celle du bleu. Le système hexadécimal est de base 16 avec les chiffres
suivants : 1
, 2
, 3
, 4
,
5
, 6
, 7
, 8
, 9
,
a
, b
, c
, d
, e
et f
, minuscule ou majuscule.
En fait, il y a une quatrième notation avec les noms anglais pour 16 couleurs spéciales :
Nom anglais | Décimal | Pourcentage | Hexa |
---|---|---|---|
black (noir) |
rgb(0,0,0) |
rgb(0%,0%,0%) |
#000000 |
red (rouge) |
rgb(255,0,0) |
rgb(100%,0%,0%) |
#ff0000 |
lime (vert brillant) |
rgb(0,255,0) |
rgb(0%,100%,0%) |
#00ff00 |
blue (bleu) |
rgb(0,0,255) |
rgb(0%,0%,100%) |
#0000ff |
aqua (turquoise) |
rgb(0,255,255) |
rgb(0%,100%,100%) |
#00ffff |
fuchsia (rose) |
rgb(255,0,255) |
rgb(100%,0%,100%) |
#ff00ff |
yellow (jaune) |
rgb(255,255,0) |
rgb(100%,100%,0%) |
#ffff00 |
white (blanc) |
rgb(255,255,255) |
rgb(100%,100%,100%) |
#ffffff |
maroon (bordeaux) |
rgb(128,0,0) |
rgb(50%,0%,0%) |
#800000 |
green (vert) |
rgb(0,128,0) |
rgb(0%,50%,0%) |
#008000 |
navy (bleu marine) |
rgb(0,0,128) |
rgb(0%,0%,50%) |
#000080 |
teal (bleu-vert) |
rgb(0,128,128) |
rgb(0%,50%,50%) |
#008080 |
purple (violet) |
rgb(128,0,128) |
rgb(50%,0%,50%) |
#800080 |
olive (vert olive) |
rgb(128,128,0) |
rgb(50%,50%,0%) |
#808000 |
gray (gris) |
rgb(128,128,128) |
rgb(50%,50%,50%) |
#808080 |
silver (argenté) |
rgb(192,192,192) |
rgb(75%,75%,75%) |
#c0c0c0 |
Les dimensions s’expriment dans plusieurs unités, en plus du
pixel noté px
,
notamment les unités utilisées en typographie. La base en est le point, noté pt
, qui est égal
à 1/72 de pouce, soit environ 0,35 mm. Le pica noté pc
vaut 12 points, mais est
rarement utilisé. Quand une taille de police courante est définie, d’autres
unités dérivées sont disponibles. Il s’agit de em
, qui représente la taille de caractère
courante, c’est-à-dire la distance entre des lignes de texte, et ex
, la hauteur du
corps de caractère, c’est-à-dire la hauteur du caractère "x".
Il y a aussi d’autres unités absolues : le millimètre mm
, le centimètre
cm
et le pouce in
.
Finalement, une dimension peut s’exprimer en pourcentage d’une autre dimension fonction de la propriété, la taille de l’élément contenant par exemple.
La notation d’une dimension ne doit contenir aucun espace. Exemples :
font-size: 12pt
left: -8%
Bien entendu, il est préférable d’utiliser les unités relatives quand c’est possible, ce qui permet de changer la taille du document entier en effectuant une modification en un seul endroit, et de s’adapter automatiquement au périphérique d’affichage ou à la fenêtre.
Le tableau suivant résume toutes les unités :
Unité | Définition | |
---|---|---|
A b s o l u e |
mm | Un millimètre. |
cm | Un centimètre. | |
in | Un pouce = 25,4 mm. | |
pt |
Un point = 1/72″ ∼ 0,35 mm. | |
pc |
Un pica = 12 pt = 1/6″ ∼ 4,2 mm. | |
R e l a t i v e |
% | Pourcentage d’une dimension fonction de la propriété. |
px | Taille d’un pixel. | |
em | Taille courante de caractère. | |
ex | Hauteur courante du caractère "x". |
Certaines propriétés sont héritées par les éléments
imbriqués, d’autres non. Cela ne se fait bien sûr pas sans logique, par exemple
la fonte de caractère est héritée, les marges non. Le tableau suivant permet de
dissiper tout doute, sachant que pour changer une propriété, il est toujours
possible de la redéfinir dans l’élément, et qu’inversement à une propriété peut être
assignée la valeur de l’élément contenant en utilisant le mot clé inherit
.
Propriété | Héritée | |
---|---|---|
color | Oui | – |
font | Oui | – |
text-align |
Oui | – |
text-decoration | – | Non |
text-indent |
Oui | – |
list |
Oui | – |
background | – | Non |
border | – | Non |
cursor |
Oui | – |
width |
– | Non |
height | – | Non |
margin | – | Non |
padding | – | Non |
vertical-align | – | Non |
float | – | Non |
clear | – | Non |
position | – | Non |
top | – | Non |
right | – | Non |
bottom | – | Non |
left | – | Non |
z-index |
– | Non |
table-layout | – | Non |
border-collapse | Oui | – |
border-spacing | Oui | – |
empty-cell | Oui | – |
Tout le Monde Peut Être Webmaster de Cl.Massé & Pierre Equey est mis à disposition selon les termes de la licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported.