Le langage CSS/Valeurs et unités
Un livre de Wikibooks.
Sections |
[modifier] 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)
- les points (pt), 1 point vaut 1/72 de pouce
- en picas (pc), 1 picas 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
- les pourcents (%)
- à la police de caractères
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 (%).
[modifier] Les couleurs
Les couleurs peuvent être spécifiées soit par mot-clefs soit par valeur RVB (composantes rouge, vert, bleu). 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
On passe de la notation #RVB à la #RRVVBB en dédoublant chaque valeur. 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.
Les mot-clefs officiellement reconnus sont au nombre de 17 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, et yellow. 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 |
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 é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 donne les 216 (63) couleurs.
[modifier] Références
- W3C : Color units
- Pour une liste assez conséquente : http://www.siteduzero.com/tuto-3-1938-1-liste-des-proprietes-css.html
- L'ensemble des propriétés CSS
- Référence CSS W3schools.com
