Le langage CSS/Valeurs et unités

Les sélecteurs

Texte

Le langage CSS

Introduction
- Premier exemple
- Structure et syntaxe
- Les sélecteurs
- Valeurs et unités utilisées
Mise en forme
Mise en page
Pour aller plus loin
Annexes

Version imprimable

[ Modifier le sommaire ]

Les sélecteurs

Texte

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

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

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

Angles

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

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 :

#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

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

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 ( $6^{3}$ ) 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 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

W3C : Color units
Pour une liste assez conséquente : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css
L'ensemble des propriétés CSS
Référence CSS W3schools.com

[1] ttps://www.w3schools.com/colors/colors_hwb.asp

[2] ttps://www.w3schools.com/colors/colors_cmyk.asp

[3] ttps://www.w3schools.com/colors/colors_names.asp

[4] ttps://www.w3.org/wiki/CSS/Properties/color/keywords

[1]

[2]

[3]

[4]