Le langage CSS/Valeurs et unités
Distances et dimensions
Il existe plusieurs unités possibles pour spécifier une taille de texte, une taille de boîte ou encore une marge :
- en utilisant des dimensions absolues :
- en centimètres (cm)
- en millimètres (mm)
- en pouces (in)
- en points (pt), 1 point vaut 1/72 de pouce
- en picas (pc), 1 pica vaut 12 points
- en utilisant des dimensions relatives :
- à la police de caractères
- la taille de la police (em)
- la taille de la lettre x minuscule (ex)
- à la taille de l'écran et la résolution employée
- les pixels (px)
- à la dimension d'un élément parent ou une autre dimension du même élément
- en pourcentage de la place disponible (%).
- à la police de caractères
Les unités sont résumées dans ce tableau :
| Unité | Exemple | Description |
|---|---|---|
mm |
24mm |
Millimètres |
cm |
29.7cm |
Centimètres |
in |
5.1in |
Pouces (Inch en anglais) |
pc |
2.2pc |
Picas (12 points, 1/6 de pouce) |
pt |
14pt |
Points (1/72ème de pouce) |
px |
120px |
Pixels |
em |
0.9em |
Facteur de la taille de la police de caractère |
ex |
0.9ex |
Facteur de la hauteur de la lettre x minuscule |
ch |
0.9ch |
Facteur de la largeur du chiffre 0 |
rem |
0.9rem |
Facteur de la taille de la police de caractère de l'élément racine |
% |
40% |
Pourcentage de la place disponible / de la taille de la police de caractère |
vw |
10vw |
Pourcentage de la largeur de la vue |
vh |
10vh |
Pourcentage de la hauteur de la vue |
vmin |
10vmin |
Pourcentage de la dimension la plus petite (largeur ou hauteur) de la vue |
vmax |
10vmax |
Pourcentage de la dimension la plus grande (largeur ou hauteur) de la vue |
Le choix de l'unité dépendra du média auquel s'applique la feuille de style. Ainsi :
- les unités absolues sont destinées aux feuilles de styles d'impression,
- le pixel, à l'inverse, est destiné aux feuilles de styles d'affichage.
Pour les styles d'affichage, les valeurs les plus couramment employées sont les pixels (px), les tailles de police (em) et les pourcents (%).
La taille des polices de caractères s'exprime en général en points (pt) ou en pourcentage (%) de la police de l'élément parent.
Unité absolue ou relative
Exemple : Une page HTML contient une section <div> comportant deux colonnes <div> chaque colonne contenant des éléments de formulaire représentés ici par des éléments <div>.
Largeur maximale de la colonne 1 en pixels : max-width:180px;
<div ...> <!-- conteneur -->
<div ...> <!-- A: conteneur de colonne 1 -->
<div style="... max-width:180px;">Colonne_1_dont_le_contenu_dépasse_la_largeur</div>
</div>
<div ...> <!-- B: conteneur de colonne 2 -->
<div>Colonne 2</div>
</div>
</div>
Résultat :
Description : On obtient une colonne tronquée et la colonne 2 à côté comme attendu.
Largeur maximale de la colonne 1 en pourcentage : max-width:60%;
<div ...> <!-- conteneur -->
<div ...> <!-- A: conteneur de colonne 1 -->
<div style="... max-width:60%;">Colonne_1_dont_le_contenu_dépasse_la_largeur</div>
</div>
<div ...> <!-- B: conteneur de colonne 2 -->
<div>Colonne 2</div>
</div>
</div>
Résultat :
Description : On obtient une colonne tronquée à la même largeur que précédemment mais la colonne 2 est en dessous. En changeant seulement le type d'unité utilisé pour exprimer la même largeur (60% de 300 pixels = 180 pixels), la colonne 2 se retrouve à la ligne suivante. Cet effet est du à l'ordre de calcul de la taille des éléments :
- Le conteneur a une largeur de 300 pixels ;
- Le conteneur A occupe 100% du parent (300 pixels), largeur a priori nécessaire pour le long contenu ;
- La largeur de la colonne 1 est réduite à 60% de la largeur.
La taille du conteneur A est déterminée selon celle des éléments qu'il contient, tandis que celle de la colonne 1 est déterminée selon celle du conteneur A. Dans un tel cas de conflit, l'ordre des éléments est pris en compte.
La solution est de spécifier la largeur en pourcentage sur l'élément conteneur (conteneur A).
Largeur maximale de la colonne 1 sur l'élément parent en pourcentage : max-width:60%;
<div ...> <!-- conteneur -->
<div style="... max-width:60%;"> <!-- A: conteneur de colonne 1 -->
<div ...>Colonne_1_dont_le_contenu_dépasse_la_largeur</div>
</div>
<div ...> <!-- B: conteneur de colonne 2 -->
<div>Colonne 2</div>
</div>
</div>
Résultat :
Angles
Il existe plusieurs unités possibles pour spécifier un angle, résumées dans ce tableau :
| Unité | Exemple | Description |
|---|---|---|
deg |
90deg |
Degrés |
rad |
1.57rad |
Radians |
grad |
100grad |
Gradians |
turn |
0.25turn |
Tours |
1turn = 360deg = 400grad ≈ 6.283185rad
Les couleurs
Les couleurs peuvent être spécifiées soit par mot-clefs, soit par valeur RVB (composantes rouge, vert, bleu), soit par valeur TSL (Teinte, Saturation, Luminosité, HSL en anglais : Hue Saturation Lightness) .
Composantes
Il y a plusieurs notations autorisées pour les composantes RVB :
#RVBoù chaque lettre R, V et B est un chiffre hexadécimal entre 0 et F#RRVVBBoù chaque paire de lettres RR, VV et BB est un nombre hexadécimal entre 00 et FFrgb(R, V, B)où chaque lettre R, V et B est un nombre décimal entre 0 et 255rgb(R%, V%, B%)où chaque lettre R, V et B est un nombre décimal entre 0 et 100 représentant un pourcentage de la valeur maximale.
Pour les valeurs par composantes Teinte, Saturation, Luminosité :
hsl(H, S%, L%)où H est la teinte (angle de direction de 0 à 360°), S la saturation et L la luminosité en pourcentage. Exemple :hsl(0, 100%, 50%)Modèle:Couleur
D'autres modélisations des couleurs pourraient être utilisées dans une prochaine version de CSS (CSS4) :
On passe de la notation #RVB à la #RRVVBB en dédoublant chaque chiffre. Bien évidemment, 100% équivaut aussi à 255 et à #FF. Par exemple les notations suivantes sont équivalentes :
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
Remarque : les majuscules dans la notation hexadécimale ne sont pas du tout obligatoires.
Couleurs nommées
Dans les premières versions des standards du web, 17 noms de couleurs étaient reconnus : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, et yellow. Le standard a évolué, et désormais 149 noms de couleurs sont reconnus[3].
Les couleurs et les codes #RRVVBB correspondants sont présentés dans le tableau ci-dessous.
D'autres noms de couleurs élargissant cette palette de base ont été définis de manière propriétaire par des navigateurs. Mais en pratique, les concepteurs utilisent majoritairement la notation normalisée #RRVVBB.
Il existe aussi des noms pour les couleurs systèmes, obsolètes en CSS3[4] :
- Modèle:Couleur
Background: Fond de bureau, - Modèle:Couleur
ActiveBorder: Bordure de la fenêtre active, - Modèle:Couleur
ActiveCaption: Titre de la fenêtre active, - Modèle:Couleur
AppWorkspace: Fond d'interface multi-documents, - Modèle:Couleur
ButtonFace: Fond des boutons, - Modèle:Couleur
ButtonHighlight: Bordure éclairée pour les boutons en 3D, - Modèle:Couleur
ButtonShadow: Bordure ombrée pour les boutons en 3D, - Modèle:Couleur
ButtonText: Texte des boutons, - Modèle:Couleur
CaptionText: Texte des labels et titres, - Modèle:Couleur
GrayText: Texte grisé - Modèle:Couleur
Highlight: Fond d'item sélectionné - Modèle:Couleur
HighlightText: Texte d'item sélectionné - Modèle:Couleur
InactiveBorder: Bordure de fenêtre inactive, - Modèle:Couleur
InactiveCaption: Titre de fenêtre inactive, - Modèle:Couleur
InactiveCaptionText: Texte des labels et titres inactifs, - Modèle:Couleur
InfoBackground: Fond des bulles d'info (tooltip), - Modèle:Couleur
InfoText: Texte des bulles d'info (tooltip), - Modèle:Couleur
Menu: Fond des menus, - Modèle:Couleur
MenuText: Texte des menus, - Modèle:Couleur
Scrollbar: Partie grisée des barres de défilement, - Modèle:Couleur
ThreeDDarkShadow: Bordure externe côté sombre d'élément 3D, - Modèle:Couleur
ThreeDFace: Fond d'élément 3D, - Modèle:Couleur
ThreeDHighlight: Bordure externe côté éclairé d'élément 3D, - Modèle:Couleur
ThreeDLightShadow: Bordure interne côté éclairé d'élément 3D, - Modèle:Couleur
ThreeDShadow: Bordure interne côté sombre d'élément 3D, - Modèle:Couleur
Window: Fond de fenêtre, - Modèle:Couleur
WindowFrame: Cadre de fenêtre, - Modèle:Couleur
WindowText: Texte de fenêtre.
Valeur spéciale
La valeur spéciale currentcolor permet de faire référence à la couleur courante (propriété color) pour en définir une autre, par exemple pour que la couleur de bordure soit identique à la couleur courante du texte.
Palette standard
Il existe également une palette standard de 216 couleurs de "sécurité" [1], pour tout navigateur, pour les affichages en 256 couleurs. La représentation de ces couleurs en hexadécimal sur 3 chiffres (format #RVB) n'utilise que des chiffres multiples de 3 : 0 3 6 9 C et F. Ces 6 chiffres combinés donnent les 216 () couleurs.
Valeurs spéciales
Certaines valeurs spéciales sont déterminées selon le contexte. Elles sont en général applicables à toutes les propriétés.
inherit- Utiliser la valeur héritée de l'élément parent. Voir [[../Héritage|le chapitre « Héritage »]].
unset- Utiliser la valeur par défaut, comme si la propriété n'était pas définie (unset en anglais).
none- Désactiver une propriété.