Voir la source de Le langage CSS/Valeurs et unités

<noinclude>{{CSS}}</noinclude>

== 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 :
{| class="wikitable"
|+ Unités utilisables
! Unité !! Exemple !! Description
|-
| <code>mm</code> || <code>24mm</code> || Millimètres
|-
| <code>cm</code> || <code>29.7cm</code> || Centimètres
|-
| <code>in</code> || <code>5.1in</code> || Pouces (''Inch'' en anglais)
|-
| <code>pc</code> || <code>2.2pc</code> || Picas (12 points, 1/6 de pouce)
|-
| <code>pt</code> || <code>14pt</code> || Points (1/72ème de pouce)
|-
| <code>px</code> || <code>120px</code> || Pixels
|-
| <code>em</code> || <code>0.9em</code> || Facteur de la taille de la police de caractère
|-
| <code>ex</code> || <code>0.9ex</code> || Facteur de la hauteur de la lettre x minuscule
|-
| <code>ch</code> || <code>0.9ch</code> || Facteur de la largeur du chiffre 0
|-
| <code>rem</code> || <code>0.9rem</code> || Facteur de la taille de la police de caractère de l'élément racine
|-
| <code>%</code> || <code>40%</code> || Pourcentage de la place disponible / de la taille de la police de caractère
|-
| <code>vw</code> || <code>10vw</code> || Pourcentage de la largeur de la vue
|-
| <code>vh</code> || <code>10vh</code> || Pourcentage de la hauteur de la vue
|-
| <code>vmin</code> || <code>10vmin</code> || Pourcentage de la dimension la plus petite (largeur ou hauteur) de la vue
|-
| <code>vmax</code> || <code>10vmax</code> || 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 ===

{{Attention|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 <code>&lt;div&gt;</code> comportant deux colonnes <code>&lt;div&gt;</code> chaque colonne contenant des éléments de formulaire représentés ici par des éléments <code>&lt;div&gt;</code>.

Largeur maximale de la colonne 1 en pixels : <syntaxhighlight lang="css" inline>max-width:180px;</syntaxhighlight>
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

Résultat :

<div style="margin-left:2em; display:flex; flex-wrap:wrap; width:300px;">
<div style="flex-basis:0;flex-grow:1;max-width:100%;">
<div style="overflow:hidden;max-width:180px;">Colonne_1_dont_le_contenu_dépasse_la_largeur</div>
</div>
<div style="flex-basis:0;flex-grow:1;max-width:100%;">
<div>Colonne 2</div>
</div>
</div>

Description :
On obtient une colonne tronquée et la colonne 2 à côté comme attendu.

----

Largeur maximale de la colonne 1 en pourcentage : <syntaxhighlight lang="css" inline>max-width:60%;</syntaxhighlight>
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

Résultat :

<div style="margin-left:2em; display:flex; flex-wrap:wrap; width:300px;">
<div style="flex-basis:0;flex-grow:1;max-width:100%;">
<div style="overflow:hidden;max-width:60%;">Colonne_1_dont_le_contenu_dépasse_la_largeur</div>
</div>
<div style="flex-basis:0;flex-grow:1;max-width:100%;">
<div>Colonne 2</div>
</div>
</div>

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 : <syntaxhighlight lang="css" inline>max-width:60%;</syntaxhighlight>
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

Résultat :

<div style="margin-left:2em; display:flex; flex-wrap:wrap; width:300px;">
<div style="flex-basis:0;flex-grow:1;max-width:60%;">
<div style="overflow:hidden;">Colonne_1_dont_le_contenu_dépasse_la_largeur</div>
</div>
<div style="flex-basis:0;flex-grow:1;max-width:100%;">
<div>Colonne 2</div>
</div>
</div>

== Angles ==

Il existe plusieurs unités possibles pour spécifier un angle, résumées dans ce tableau :
{| class="wikitable"
|+ Unités utilisables
! Unité !! Exemple !! Description
|-
| <code>deg</code> || <code>90deg</code> || Degrés
|-
| <code>rad</code> || <code>1.57rad</code> || Radians
|-
| <code>grad</code> || <code>100grad</code> || Gradians
|-
| <code>turn</code> || <code>0.25turn</code> || 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 :
* <code>#RVB</code> où chaque lettre R, V et B est un [[Programmation/Abstraction#Le système hexadécimal|chiffre hexadécimal]] entre 0 et F
* <code>#RRVVBB</code> où chaque paire de lettres RR, VV et BB est un nombre hexadécimal entre 00 et FF
* <code>rgb(R, V, B)</code> où chaque lettre R, V et B est un nombre décimal entre 0 et 255
* <code>rgb(R%, V%, B%)</code> 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é :
* <code>hsl(H, S%, L%)</code> où H est la teinte (angle de direction de 0 à 360°), S la saturation et L la luminosité en pourcentage. Exemple : <code>hsl(0, 100%, 50%)</code> {{Couleur|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''<ref>https://www.w3schools.com/colors/colors_hwb.asp</ref> ;
* ''CYMK'' : ''Cyan, Yellow, Magenta, Black''<ref>https://www.w3schools.com/colors/colors_cmyk.asp</ref>.

On passe de la notation <code>#RVB</code> à la <code>#RRVVBB</code> en dédoublant chaque chiffre. Bien évidemment, 100% équivaut aussi à 255 et à #FF. Par exemple les notations suivantes sont équivalentes :

<syntaxhighlight lang="css">
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }      
p { color: rgb(100%, 0%, 0%); }
</syntaxhighlight>

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<ref>https://www.w3schools.com/colors/colors_names.asp</ref>.

Les couleurs et les codes #RRVVBB correspondants sont présentés dans le tableau ci-dessous.

<div class="flex-content">
<div class="flex-content-third">
{| class="wikitable"
|+ Les 17 couleurs web initialement reconnues
! nom || valeur || rendu
{{:Le langage CSS/Valeurs et unités/Couleur|maroon|800000}}
{{:Le langage CSS/Valeurs et unités/Couleur|red|ff0000}}
{{:Le langage CSS/Valeurs et unités/Couleur|orange|ffA500}}
{{:Le langage CSS/Valeurs et unités/Couleur|yellow|ffff00}}
{{:Le langage CSS/Valeurs et unités/Couleur|olive|808000}}
{{:Le langage CSS/Valeurs et unités/Couleur|purple|800080}}
{{:Le langage CSS/Valeurs et unités/Couleur|fuchsia|ff00ff}}
{{:Le langage CSS/Valeurs et unités/Couleur|white|ffffff}}
{{:Le langage CSS/Valeurs et unités/Couleur|lime|00ff00}}
{{:Le langage CSS/Valeurs et unités/Couleur|green|008000}}
{{:Le langage CSS/Valeurs et unités/Couleur|navy|000080}}
{{:Le langage CSS/Valeurs et unités/Couleur|blue|0000ff}}
{{:Le langage CSS/Valeurs et unités/Couleur|aqua|00ffff}}
{{:Le langage CSS/Valeurs et unités/Couleur|teal|008080}}
{{:Le langage CSS/Valeurs et unités/Couleur|black|000000}}
{{:Le langage CSS/Valeurs et unités/Couleur|silver|c0c0c0}}
{{:Le langage CSS/Valeurs et unités/Couleur|gray|808080}}
|}

{| class="wikitable"
! nom || valeur || rendu
{{:Le langage CSS/Valeurs et unités/Couleur|aliceblue|f0f8ff}}
{{:Le langage CSS/Valeurs et unités/Couleur|antiquewhite|faebd7}}
{{:Le langage CSS/Valeurs et unités/Couleur|aquamarine|7fffd4}}
{{:Le langage CSS/Valeurs et unités/Couleur|azure|f0ffff}}
{{:Le langage CSS/Valeurs et unités/Couleur|beige|f5f5dc}}
{{:Le langage CSS/Valeurs et unités/Couleur|bisque|ffe4c4}}
{{:Le langage CSS/Valeurs et unités/Couleur|blanchedalmond|ffebcd}}
{{:Le langage CSS/Valeurs et unités/Couleur|blueviolet|8a2be2}}
{{:Le langage CSS/Valeurs et unités/Couleur|brown|a52a2a}}
{{:Le langage CSS/Valeurs et unités/Couleur|burlywood|deb887}}
{{:Le langage CSS/Valeurs et unités/Couleur|cadetblue|5f9ea0}}
{{:Le langage CSS/Valeurs et unités/Couleur|chartreuse|7fff00}}
{{:Le langage CSS/Valeurs et unités/Couleur|chocolate|d2691e}}
{{:Le langage CSS/Valeurs et unités/Couleur|coral|ff7f50}}
{{:Le langage CSS/Valeurs et unités/Couleur|cornflowerblue|6495ed}}
{{:Le langage CSS/Valeurs et unités/Couleur|cornsilk|fff8dc}}
{{:Le langage CSS/Valeurs et unités/Couleur|crimson|dc143c}}
{{:Le langage CSS/Valeurs et unités/Couleur|cyan|00ffff}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkblue|00008b}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkcyan|008b8b}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkgoldenrod|b8860b}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkgray|a9a9a9}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkgrey|a9a9a9}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkgreen|006400}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkkhaki|bdb76b}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkmagenta|8b008b}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkolivegreen|556b2f}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkorange|ff8c00}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkorchid|9932cc}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkred|8b0000}}
{{:Le langage CSS/Valeurs et unités/Couleur|darksalmon|e9967a}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkseagreen|8fbc8f}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkslateblue|483d8b}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkslategray|2f4f4f}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkslategrey|2f4f4f}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkturquoise|00ced1}}
{{:Le langage CSS/Valeurs et unités/Couleur|darkviolet|9400d3}}
|}
</div>
<div class="flex-content-third">
{| class="wikitable"
! nom || valeur || rendu
{{:Le langage CSS/Valeurs et unités/Couleur|deeppink|ff1493}}
{{:Le langage CSS/Valeurs et unités/Couleur|deepskyblue|00bfff}}
{{:Le langage CSS/Valeurs et unités/Couleur|dimgray|696969}}
{{:Le langage CSS/Valeurs et unités/Couleur|dimgrey|696969}}
{{:Le langage CSS/Valeurs et unités/Couleur|dodgerblue|1e90ff}}
{{:Le langage CSS/Valeurs et unités/Couleur|firebrick|b22222}}
{{:Le langage CSS/Valeurs et unités/Couleur|floralwhite|fffaf0}}
{{:Le langage CSS/Valeurs et unités/Couleur|forestgreen|228b22}}
{{:Le langage CSS/Valeurs et unités/Couleur|gainsboro|dcdcdc}}
{{:Le langage CSS/Valeurs et unités/Couleur|ghostwhite|f8f8ff}}
{{:Le langage CSS/Valeurs et unités/Couleur|gold|ffd700}}
{{:Le langage CSS/Valeurs et unités/Couleur|goldenrod|daa520}}
{{:Le langage CSS/Valeurs et unités/Couleur|grey|808080}}
{{:Le langage CSS/Valeurs et unités/Couleur|greenyellow|adff2f}}
{{:Le langage CSS/Valeurs et unités/Couleur|honeydew|f0fff0}}
{{:Le langage CSS/Valeurs et unités/Couleur|hotpink|ff69b4}}
{{:Le langage CSS/Valeurs et unités/Couleur|indianred|cd5c5c}}
{{:Le langage CSS/Valeurs et unités/Couleur|indigo|4b0082}}
{{:Le langage CSS/Valeurs et unités/Couleur|ivory|fffff0}}
{{:Le langage CSS/Valeurs et unités/Couleur|khaki|f0e68c}}
{{:Le langage CSS/Valeurs et unités/Couleur|lavender|e6e6fa}}
{{:Le langage CSS/Valeurs et unités/Couleur|lavenderblush|fff0f5}}
{{:Le langage CSS/Valeurs et unités/Couleur|lawngreen|7cfc00}}
{{:Le langage CSS/Valeurs et unités/Couleur|lemonchiffon|fffacd}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightblue|add8e6}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightcoral|f08080}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightcyan|e0ffff}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightgoldenrodyellow|fafad2}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightgray|d3d3d3}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightgrey|d3d3d3}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightgreen|90ee90}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightpink|ffb6c1}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightsalmon|ffa07a}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightseagreen|20b2aa}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightskyblue|87cefa}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightslategray|778899}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightslategrey|778899}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightsteelblue|b0c4de}}
{{:Le langage CSS/Valeurs et unités/Couleur|lightyellow|ffffe0}}
{{:Le langage CSS/Valeurs et unités/Couleur|limegreen|32cd32}}
{{:Le langage CSS/Valeurs et unités/Couleur|linen|faf0e6}}
{{:Le langage CSS/Valeurs et unités/Couleur|magenta|ff00ff}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumaquamarine|66cdaa}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumblue|0000cd}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumorchid|ba55d3}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumpurple|9370db}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumseagreen|3cb371}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumslateblue|7b68ee}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumspringgreen|00fa9a}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumturquoise|48d1cc}}
{{:Le langage CSS/Valeurs et unités/Couleur|mediumvioletred|c71585}}
{{:Le langage CSS/Valeurs et unités/Couleur|midnightblue|191970}}
{{:Le langage CSS/Valeurs et unités/Couleur|mintcream|f5fffa}}
{{:Le langage CSS/Valeurs et unités/Couleur|mistyrose|ffe4e1}}
{{:Le langage CSS/Valeurs et unités/Couleur|moccasin|ffe4b5}}
|}
</div>
<div class="flex-content-third">
{| class="wikitable"
! nom || valeur || rendu
{{:Le langage CSS/Valeurs et unités/Couleur|navajowhite|ffdead}}
{{:Le langage CSS/Valeurs et unités/Couleur|oldlace|fdf5e6}}
{{:Le langage CSS/Valeurs et unités/Couleur|olivedrab|6b8e23}}
{{:Le langage CSS/Valeurs et unités/Couleur|orangered|ff4500}}
{{:Le langage CSS/Valeurs et unités/Couleur|orchid|da70d6}}
{{:Le langage CSS/Valeurs et unités/Couleur|palegoldenrod|eee8aa}}
{{:Le langage CSS/Valeurs et unités/Couleur|palegreen|98fb98}}
{{:Le langage CSS/Valeurs et unités/Couleur|paleturquoise|afeeee}}
{{:Le langage CSS/Valeurs et unités/Couleur|palevioletred|db7093}}
{{:Le langage CSS/Valeurs et unités/Couleur|papayawhip|ffefd5}}
{{:Le langage CSS/Valeurs et unités/Couleur|peachpuff|ffdab9}}
{{:Le langage CSS/Valeurs et unités/Couleur|peru|cd853f}}
{{:Le langage CSS/Valeurs et unités/Couleur|pink|ffc0cb}}
{{:Le langage CSS/Valeurs et unités/Couleur|plum|dda0dd}}
{{:Le langage CSS/Valeurs et unités/Couleur|powderblue|b0e0e6}}
{{:Le langage CSS/Valeurs et unités/Couleur|rebeccapurple|663399}}
{{:Le langage CSS/Valeurs et unités/Couleur|rosybrown|bc8f8f}}
{{:Le langage CSS/Valeurs et unités/Couleur|royalblue|4169e1}}
{{:Le langage CSS/Valeurs et unités/Couleur|saddlebrown|8b4513}}
{{:Le langage CSS/Valeurs et unités/Couleur|salmon|fa8072}}
{{:Le langage CSS/Valeurs et unités/Couleur|sandybrown|f4a460}}
{{:Le langage CSS/Valeurs et unités/Couleur|seagreen|2e8b57}}
{{:Le langage CSS/Valeurs et unités/Couleur|seashell|fff5ee}}
{{:Le langage CSS/Valeurs et unités/Couleur|sienna|a0522d}}
{{:Le langage CSS/Valeurs et unités/Couleur|silver|c0c0c0}}
{{:Le langage CSS/Valeurs et unités/Couleur|skyblue|87ceeb}}
{{:Le langage CSS/Valeurs et unités/Couleur|slateblue|6a5acd}}
{{:Le langage CSS/Valeurs et unités/Couleur|slategray|708090}}
{{:Le langage CSS/Valeurs et unités/Couleur|slategrey|708090}}
{{:Le langage CSS/Valeurs et unités/Couleur|snow|fffafa}}
{{:Le langage CSS/Valeurs et unités/Couleur|springgreen|00ff7f}}
{{:Le langage CSS/Valeurs et unités/Couleur|steelblue|4682b4}}
{{:Le langage CSS/Valeurs et unités/Couleur|tan|d2b48c}}
{{:Le langage CSS/Valeurs et unités/Couleur|thistle|d8bfd8}}
{{:Le langage CSS/Valeurs et unités/Couleur|tomato|ff6347}}
{{:Le langage CSS/Valeurs et unités/Couleur|turquoise|40e0d0}}
{{:Le langage CSS/Valeurs et unités/Couleur|violet|ee82ee}}
{{:Le langage CSS/Valeurs et unités/Couleur|wheat|f5deb3}}
{{:Le langage CSS/Valeurs et unités/Couleur|whitesmoke|f5f5f5}}
{{:Le langage CSS/Valeurs et unités/Couleur|yellowgreen|9acd32}}
|}
</div>
</div>

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 <code>#RRVVBB</code>.

Il existe aussi des noms pour les couleurs systèmes, obsolètes en CSS3<ref>https://www.w3.org/wiki/CSS/Properties/color/keywords</ref> :
* {{Couleur|Background}} <code>Background</code> : Fond de bureau,
* {{Couleur|ActiveBorder}} <code>ActiveBorder</code> : Bordure de la fenêtre active,
* {{Couleur|ActiveCaption}} <code>ActiveCaption</code> : Titre de la fenêtre active,
* {{Couleur|AppWorkspace}} <code>AppWorkspace</code> : Fond d'interface multi-documents,
* {{Couleur|ButtonFace}} <code>ButtonFace</code> : Fond des boutons,
* {{Couleur|ButtonHighlight}} <code>ButtonHighlight</code> : Bordure éclairée pour les boutons en 3D,
* {{Couleur|ButtonShadow}} <code>ButtonShadow</code> : Bordure ombrée pour les boutons en 3D,
* {{Couleur|ButtonText}} <code>ButtonText</code> : Texte des boutons,
* {{Couleur|CaptionText}} <code>CaptionText</code> : Texte des labels et titres,
* {{Couleur|GrayText}} <code>GrayText</code> : Texte grisé
* {{Couleur|Highlight}} <code>Highlight</code> : Fond d'item sélectionné
* {{Couleur|HighlightText}} <code>HighlightText</code> : Texte d'item sélectionné
* {{Couleur|InactiveBorder}} <code>InactiveBorder</code> : Bordure de fenêtre inactive,
* {{Couleur|InactiveCaption}} <code>InactiveCaption</code> : Titre de fenêtre inactive,
* {{Couleur|InactiveCaptionText}} <code>InactiveCaptionText</code> : Texte des labels et titres inactifs,
* {{Couleur|InfoBackground}} <code>InfoBackground</code> : Fond des bulles d'info (''tooltip''),
* {{Couleur|InfoText}} <code>InfoText</code> : Texte des bulles d'info (''tooltip''),
* {{Couleur|Menu}} <code>Menu</code> : Fond des menus,
* {{Couleur|MenuText}} <code>MenuText</code> : Texte des menus,
* {{Couleur|Scrollbar}} <code>Scrollbar</code> : Partie grisée des barres de défilement,
* {{Couleur|ThreeDDarkShadow}} <code>ThreeDDarkShadow</code> : Bordure externe côté sombre d'élément 3D,
* {{Couleur|ThreeDFace}} <code>ThreeDFace</code> : Fond d'élément 3D,
* {{Couleur|ThreeDHighlight}} <code>ThreeDHighlight</code> : Bordure externe côté éclairé d'élément 3D,
* {{Couleur|ThreeDLightShadow}} <code>ThreeDLightShadow</code> : Bordure interne côté éclairé d'élément 3D,
* {{Couleur|ThreeDShadow}} <code>ThreeDShadow</code> : Bordure interne côté sombre d'élément 3D,
* {{Couleur|Window}} <code>Window</code> : Fond de fenêtre,
* {{Couleur|WindowFrame}} <code>WindowFrame</code> : Cadre de fenêtre,
* {{Couleur|WindowText}} <code>WindowText</code> : Texte de fenêtre.

=== Valeur spéciale ===

La valeur spéciale <code>currentcolor</code> permet de faire référence à la couleur courante (propriété <code>color</code>) 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é" [http://www.w3schools.com/Html/html_colors.asp], 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 (<math>6^3</math>) 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.

;<code>inherit</code>:Utiliser la valeur héritée de l'élément parent. Voir [[../Héritage|le chapitre « Héritage »]].
;<code>unset</code>:Utiliser la valeur par défaut, comme si la propriété n'était pas définie (''unset'' en anglais).
;<code>none</code>:Désactiver une propriété.

== Références ==

<references/>
* [http://www.w3.org/TR/CSS21/syndata.html#color-units 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
* [http://wiki.media-box.net/documentation/css L'ensemble des propriétés CSS]
* [http://www.w3schools.com/css/default.asp Référence CSS W3schools.com]

<noinclude>[[Catégorie:Glossaire de couleurs]]</noinclude>