Le langage CSS/Valeurs et unités
Distances et dimensions
modifierIl 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
modifier
L'utilisation d'un type d'unité (absolue, relative au parent ou à la police employée) influence grandement la disposition des éléments.
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
modifierIl 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
modifierLes 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
modifierIl y a plusieurs notations autorisées pour les composantes RVB :
#RVB
où chaque lettre R, V et B est un chiffre hexadécimal entre 0 et F#RRVVBB
où 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%)
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
modifierDans 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.
nom | valeur | rendu |
---|---|---|
maroon | #800000 |
|
red | #ff0000 |
|
orange | #ffA500 |
|
yellow | #ffff00 |
|
olive | #808000 |
|
purple | #800080 |
|
fuchsia | #ff00ff |
|
white | #ffffff |
|
lime | #00ff00 |
|
green | #008000 |
|
navy | #000080 |
|
blue | #0000ff |
|
aqua | #00ffff |
|
teal | #008080 |
|
black | #000000 |
|
silver | #c0c0c0 |
|
gray | #808080 |
nom | valeur | rendu |
---|---|---|
aliceblue | #f0f8ff |
|
antiquewhite | #faebd7 |
|
aquamarine | #7fffd4 |
|
azure | #f0ffff |
|
beige | #f5f5dc |
|
bisque | #ffe4c4 |
|
blanchedalmond | #ffebcd |
|
blueviolet | #8a2be2 |
|
brown | #a52a2a |
|
burlywood | #deb887 |
|
cadetblue | #5f9ea0 |
|
chartreuse | #7fff00 |
|
chocolate | #d2691e |
|
coral | #ff7f50 |
|
cornflowerblue | #6495ed |
|
cornsilk | #fff8dc |
|
crimson | #dc143c |
|
cyan | #00ffff |
|
darkblue | #00008b |
|
darkcyan | #008b8b |
|
darkgoldenrod | #b8860b |
|
darkgray | #a9a9a9 |
|
darkgrey | #a9a9a9 |
|
darkgreen | #006400 |
|
darkkhaki | #bdb76b |
|
darkmagenta | #8b008b |
|
darkolivegreen | #556b2f |
|
darkorange | #ff8c00 |
|
darkorchid | #9932cc |
|
darkred | #8b0000 |
|
darksalmon | #e9967a |
|
darkseagreen | #8fbc8f |
|
darkslateblue | #483d8b |
|
darkslategray | #2f4f4f |
|
darkslategrey | #2f4f4f |
|
darkturquoise | #00ced1 |
|
darkviolet | #9400d3 |
nom | valeur | rendu |
---|---|---|
deeppink | #ff1493 |
|
deepskyblue | #00bfff |
|
dimgray | #696969 |
|
dimgrey | #696969 |
|
dodgerblue | #1e90ff |
|
firebrick | #b22222 |
|
floralwhite | #fffaf0 |
|
forestgreen | #228b22 |
|
gainsboro | #dcdcdc |
|
ghostwhite | #f8f8ff |
|
gold | #ffd700 |
|
goldenrod | #daa520 |
|
grey | #808080 |
|
greenyellow | #adff2f |
|
honeydew | #f0fff0 |
|
hotpink | #ff69b4 |
|
indianred | #cd5c5c |
|
indigo | #4b0082 |
|
ivory | #fffff0 |
|
khaki | #f0e68c |
|
lavender | #e6e6fa |
|
lavenderblush | #fff0f5 |
|
lawngreen | #7cfc00 |
|
lemonchiffon | #fffacd |
|
lightblue | #add8e6 |
|
lightcoral | #f08080 |
|
lightcyan | #e0ffff |
|
lightgoldenrodyellow | #fafad2 |
|
lightgray | #d3d3d3 |
|
lightgrey | #d3d3d3 |
|
lightgreen | #90ee90 |
|
lightpink | #ffb6c1 |
|
lightsalmon | #ffa07a |
|
lightseagreen | #20b2aa |
|
lightskyblue | #87cefa |
|
lightslategray | #778899 |
|
lightslategrey | #778899 |
|
lightsteelblue | #b0c4de |
|
lightyellow | #ffffe0 |
|
limegreen | #32cd32 |
|
linen | #faf0e6 |
|
magenta | #ff00ff |
|
mediumaquamarine | #66cdaa |
|
mediumblue | #0000cd |
|
mediumorchid | #ba55d3 |
|
mediumpurple | #9370db |
|
mediumseagreen | #3cb371 |
|
mediumslateblue | #7b68ee |
|
mediumspringgreen | #00fa9a |
|
mediumturquoise | #48d1cc |
|
mediumvioletred | #c71585 |
|
midnightblue | #191970 |
|
mintcream | #f5fffa |
|
mistyrose | #ffe4e1 |
|
moccasin | #ffe4b5 |
nom | valeur | rendu |
---|---|---|
navajowhite | #ffdead |
|
oldlace | #fdf5e6 |
|
olivedrab | #6b8e23 |
|
orangered | #ff4500 |
|
orchid | #da70d6 |
|
palegoldenrod | #eee8aa |
|
palegreen | #98fb98 |
|
paleturquoise | #afeeee |
|
palevioletred | #db7093 |
|
papayawhip | #ffefd5 |
|
peachpuff | #ffdab9 |
|
peru | #cd853f |
|
pink | #ffc0cb |
|
plum | #dda0dd |
|
powderblue | #b0e0e6 |
|
rebeccapurple | #663399 |
|
rosybrown | #bc8f8f |
|
royalblue | #4169e1 |
|
saddlebrown | #8b4513 |
|
salmon | #fa8072 |
|
sandybrown | #f4a460 |
|
seagreen | #2e8b57 |
|
seashell | #fff5ee |
|
sienna | #a0522d |
|
silver | #c0c0c0 |
|
skyblue | #87ceeb |
|
slateblue | #6a5acd |
|
slategray | #708090 |
|
slategrey | #708090 |
|
snow | #fffafa |
|
springgreen | #00ff7f |
|
steelblue | #4682b4 |
|
tan | #d2b48c |
|
thistle | #d8bfd8 |
|
tomato | #ff6347 |
|
turquoise | #40e0d0 |
|
violet | #ee82ee |
|
wheat | #f5deb3 |
|
whitesmoke | #f5f5f5 |
|
yellowgreen | #9acd32 |
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] :
-
Background
: Fond de bureau, -
ActiveBorder
: Bordure de la fenêtre active, -
ActiveCaption
: Titre de la fenêtre active, -
AppWorkspace
: Fond d'interface multi-documents, -
ButtonFace
: Fond des boutons, -
ButtonHighlight
: Bordure éclairée pour les boutons en 3D, -
ButtonShadow
: Bordure ombrée pour les boutons en 3D, -
ButtonText
: Texte des boutons, -
CaptionText
: Texte des labels et titres, -
GrayText
: Texte grisé -
Highlight
: Fond d'item sélectionné -
HighlightText
: Texte d'item sélectionné -
InactiveBorder
: Bordure de fenêtre inactive, -
InactiveCaption
: Titre de fenêtre inactive, -
InactiveCaptionText
: Texte des labels et titres inactifs, -
InfoBackground
: Fond des bulles d'info (tooltip), -
InfoText
: Texte des bulles d'info (tooltip), -
Menu
: Fond des menus, -
MenuText
: Texte des menus, -
Scrollbar
: Partie grisée des barres de défilement, -
ThreeDDarkShadow
: Bordure externe côté sombre d'élément 3D, -
ThreeDFace
: Fond d'élément 3D, -
ThreeDHighlight
: Bordure externe côté éclairé d'élément 3D, -
ThreeDLightShadow
: Bordure interne côté éclairé d'élément 3D, -
ThreeDShadow
: Bordure interne côté sombre d'élément 3D, -
Window
: Fond de fenêtre, -
WindowFrame
: Cadre de fenêtre, -
WindowText
: Texte de fenêtre.
Valeur spéciale
modifierLa 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
modifierIl 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
modifierCertaines 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 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é.