Le langage CSS/Valeurs et unités

Un livre de Wikilivres.
Aller à : navigation, rechercher


Distances et dimensions[modifier | modifier le wikicode]

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

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

Les couleurs[modifier | modifier le wikicode]

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.

Les 17 couleurs web officielles
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 (6^3) couleurs.

Références[modifier | modifier le wikicode]

« Les sélecteurs
Texte »