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

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.

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.

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é" , 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 (${\displaystyle 6^{3}}$) couleurs.

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