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 :
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.
- Une boite de type bloc est une boite qui a forcément une forme rectangulaire, de plus elle prend par défaut la totalité de la largeur de la page.
- Une boite de type en ligne est une boite qui est générée par le flot de texte, elle s'étend tout autour du texte (pouvant même revenir à la ligne) et ne peut pas avoir de dimensions car elles sont calculées par rapport à la taille du texte contenu.
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.