CSS : Cascading Style Sheets

Les propriétés

Le modèle de boite

Chaque élément d'un document génère une boite dont il est possible de modifier les propriétés en utilisant CSS. Ces propriétés sont la marge externe, la bordure, la marge interne et la taille du contenu.

Ce shéma détaille la structure d'une boite en CSS :

Schéma du modèle de boite représentant le contenu, la marge interne, la bordure et la marge externe

Les propriétés CSS correpondantes sont :

margin
La marge externe, c'est à dire l'espacement autour de la bordure
border
La bordure
padding
La marge interne, c'est à dire l'espacement entre la bordure et le contenu
width
La largeur du contenu
height
La hauteur du contenu

Il existe 2 types de boites en CSS, les boites de type bloc et les boites de type en ligne.

Les propriétés width et height ne sont utilisables que sur des boites de type bloc, et pas sur les boite de type en ligne.

Les unités de longueur

Toutes les propriétés des boites utilisent des unités de longueur. La spécification CSS définit plsuieurs unités utilisables pour spécifier une longueur. Il existe 2 types d'unités : les unités fixes et les unités relatives.

Les unités fixes

px
Pixels. L'unité recommandée pour les médias type écran.
pt
Points. L'unité recommandée pour les imprimantes. Sa valeur dépend de la valeur en points par pouce fixée par l'OS, sur Windows 96 points par pouce.
pc
Picas. 1pc = 12pt.
cm
Centimêtres.
mm
Millimêtres.
in
Pouces(Inches). 1in = 2.54cm.

Le W3C conseille de n'utiliser ces unités que lorsque les capacités du média de rendu sont connues. Il est toujours préférable d'utiliser les unités relatives afin de garantir un bon fonctionnement sur des médias différents (écran, imprimante, etc).

Les unités relatives

%
Pourcentage. La longueur sera un pourcentage d'une autre longueur, généralement la taille de la police de l'élément parent.
em
M-height. Unité utilisée par les typographes, il s'agit de la hauteur de la lettre M majuscule. En CSS, cette unité équivaut à la taille de la police, on l'utilise généralement pour spécifier la longueur en hauteur de lignes. Ex : margin-bottom: 2em; /* Saut de 2 lignes */
ex

margin en détail

La propriété margin permet de modifier la marge à l'extérieur d'une boite. Cette propriété utilise plusieurs syntaxes :

margin: <Longueur>;
margin: <LongueurHautEtBas> <LongueurDroiteEtGauche>;
margin: <LongueurHaut> <LongueurDroite> <LongueurBas> <LongueurGauche>;

Il existe aussi quatre propriétés permettant de fixer la marge pour un côté seulement :

margin-top: <Longueur>;
margin-right: <Longueur>;
margin-bottom: <Longueur>;
margin-left: <Longueur>;

La norme CSS considère la marge extérieure de la même manière que les typographes, c'est à dire que 2 boites l'une sur l'autre auront leur marges basse et haute fusionnées.

C'est-à-dire qu'une boite avec margin-bottom: 2em; au dessus d'une boite avec margin-top: 2em; sera espacée de 2em de la boite du dessous.

border en détail

La propriété border permet de modifier l'aspect de la bordure d'une boite. Sa syntaxe est la suivante :

border: LongueurBordure TypeBordure CouleurBordure;

LongueurBordure est la taille de notre bordure.

TypeBordure est un type de bordure parmi :

none
Aucune bordure; la longueur de la bordure sera 0.
hidden
Comme none, sauf pour la résolution des conflits de bordures dans les tableaux.
dotted
Cette bordure est une série de points.
dashed
Cette bordure est une série de petits segments.
solid
Cette bordure est une ligne.
double
Cette bordure est constituée de 2 lignes. La somme des 2 lignes et de leur espacement est égale à la longueur de la bordure.
groove
Cette bordure donne l'impression d'une crevasse.
ridge
Le contraire de groove : cette bordure donne l'impression d'un relief.
inset
Cette bordure donne l'impression que la boite est creusée.
outset
Le contraire de inset : cette bordure donne l'impression que la boite est en relief.

CouleurBordure est une couleur CSS.

Il existe plusieurs propriétés permettant de fixer directement des valeurs spécifiques :

border-top: LongueurBordure TypeBordure CouleurBordure;
border-right: LongueurBordure TypeBordure CouleurBordure;
border-bottom: LongueurBordure TypeBordure CouleurBordure;
border-left: LongueurBordure TypeBordure CouleurBordure;

border-width: LongueurBordure;
border-style: StyleBordure;
border-color: CouleurBordure;

... mais aussi ...

border-top-width     border-top-style     border-top-color
border-right-width   border-right-style   border-right-color
border-bottom-width  border-bottom-style  border-bottom-color
border-left-width    border-left-style    border-left-color

padding en détail

La propriété padding permet de modifier la marge à l'intérieur d'une boite. Comme margin, cette propriété utilise plusieurs syntaxes :

padding: <Longueur>;
padding: <LongueurHautEtBas> <LongueurDroiteEtGauche>;
padding: <LongueurHaut> <LongueurDroite> <LongueurBas> <LongueurGauche>;

Il existe aussi quatre propriétés permettant de fixer le padding pour un côté seulement :

padding-top: <Longueur>;
padding-right: <Longueur>;
padding-bottom: <Longueur>;
padding-left: <Longueur>;

width et height en détail

Il est important de toujours se rappeler que ces propriétés ne sont disponibles que pour des boites de type bloc. Il est en effet interdit en CSS de spécifier la taille d'une boite en ligne, puisque par définition, la taille de celle-ci est fixée par son contenu.

width s'utilise très simplement et peut prendre tout type de longueurs, notamment un pourcentage de la largeur de la page.

height est plus subtil puisqu'il est interdit d'utiliser des unités relatives tant que celles-ci ne peuvent pas être calculées de manière précise. En effet, spécifier une hauteur de 50% ne veut rien dire dans le cadre d'une page web, et cette valeur n'aura aucun effet sauf si le parent a lui même reçu une hauteur.

Il existe des propriétés plus subtiles qui dérivent de width et height et qui permettent un contrôle plus fin sur ces valeurs. Il s'agit de min-width , max-width, min-height et max-height.

Elles permettent de spécifier un interval dans lequel les propriétés width et height pourront prendre leur valeur, notamment en cas de redimensionnement de la fenêtre du navigateur, ou du contenu de la boite.

Un peu de couleurs

Nous avons déjà vu qu'il était possible de spécifier une couleur à notre bordure. Il existe d'autres propriétés pour modifier les couleurs d'une boite :

color
Permet de spécifier la couleur dans laquelle sera écrit le texte de la boite.
background
Permet de spécifier la couleur de fond de notre boite.

background permet aussi de spécifier des images de fonds. Tout cela est très bien détaillée dans la spécification CSS sur les couleurs et les arrières plans

Les couleurs peuvent être spécifiées avec plusieurs syntaxes :

#RRGGBB
Couleur RGB avec les composantes 8 bits hexadécimale RR, GG et BB
#RGB
Couleur RGB avec les composantes 4 bits hexadécimale R, G et B. Les composantes seront doublés pour devenir des composantes 8 bits (ex: 7 devient 77).
rgb(r,g,b)
Couleur RGB avec les composantes entières entre 0 et 255.
rgb(r%,g%,b%)
Couleurs RGB avec les composantes en pourcentage.

La spécification prévoit aussi l'utilisation de 16 mots clefs tirés de la palette VGA de Windows. Les couleurs correpondant à ces mots clefs ne sont pas définies dans la spécification.