Le langage CSS/Valeurs et unités

Distances et dimensions

modifier

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 (%).

Les unités sont résumées dans ce tableau :

Unités utilisables
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 :

Colonne_1_dont_le_contenu_dépasse_la_largeur
Colonne 2

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 :

Colonne_1_dont_le_contenu_dépasse_la_largeur
Colonne 2

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 :

Colonne_1_dont_le_contenu_dépasse_la_largeur
Colonne 2

Il existe plusieurs unités possibles pour spécifier un angle, résumées dans ce tableau :

Unités utilisables
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

modifier

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

modifier

Il 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 FF
  • rgb(R, V, B) où chaque lettre R, V et B est un nombre décimal entre 0 et 255
  • rgb(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) :

  • HWB : Hue, Whiteness, Blackness[1] ;
  • CYMK : Cyan, Yellow, Magenta, Black[2].

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

modifier

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.

Les 17 couleurs web initialement reconnues
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

modifier

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

modifier

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

modifier

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 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é.

Références

modifier
  1. https://www.w3schools.com/colors/colors_hwb.asp
  2. https://www.w3schools.com/colors/colors_cmyk.asp
  3. https://www.w3schools.com/colors/colors_names.asp
  4. https://www.w3.org/wiki/CSS/Properties/color/keywords