Les unités

Les Css nous permettent de spécifier beaucoup de quantités, en utilisant différentes unités qu'il convient de connaître

Hauteur, largeur, taille de police

Unités de mesure

Unités absolues
Attention àleur utilisation le W3C recommande de les utiliser uniquement pour des médias de sortie connus : la résolution d'écran peut aller de 800x600 à plus de 1920x1440 : une taille exprimée en pixels ne sera pas rendu pareil. De méme pour un pda : une taille exprimée en mm n'aura pas la même apparence...
Attention pour les tailles de police : IE6 ne permet pas d'agrandir le texte dont la taille est exprimée en px.. Dommage pour les malvoyants.
  • Pixel : px
  • Point : pt (0.35mm)
  • Pica : pc (4.22mm)
  • Centimètre : cm
  • Millimètre : mm
  • Pouce : in (2.54cm)
Unités relatives
Utiles pour permettre l'agrandissement du texte sous IE6, l'adaptation à la résolution d'écran...
Attention cependant, les valeurs par défaut (des tailles de police, pour em et ex) sont différentes selon les navigateurs.
  • Largeur d'un "m" : em (1em = largeur de la lettre "m" dans la police courante)
  • Hauteur d'un "x" : ex (1ex = hauteur de la lettre "x" dans la police courante)
  • Pourcentage : % (relatif a la taille de référence dans le conteneur : différent s'il spécifie une hauteur ou une taille de police)
Attention : une taille de police spécifiée à 3em dans un paragraphe dans lequel le texte a pour taille 4em aura pour rendu final une taille de 12em : le calcul est fait selon la taille de police courante, et non celle par défaut

Mots clef pour les tailles de police

Il existe des mots clef : qu'on peut utiliser à la place des valeurs numériques.

Pseudo absolues
Ces valeurs sont pseudo absolues : les tailles diffèrent suivant les navigateurs : un texte en x-small n'aura pas le même rendu sous IE que sous Firefox
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
Relatives
  • smaller
  • larger

Couleur

Valeurs dans le systeme RGB (RVB)

Toutes les valeurs sont précédées du caractère # et comportent 6 chiffres en hexadecimal

Les 2 premiers donnent la valeur en Rouge, les 2 suivant la valeur en Vert et les deux dernier donnent la valeur en Bleu

Exemples : #FFFFFF (blanc), #FF0000 (rouge), #FF00FF (violet)
Pour choisir vos couleurs avec chromafiltre (flash) : www.pourpre.com

On peut aussi spécifier les valeurs en utilisant la chaine (rgb(r,v,b)) où r v et b sont des entiers compris entre 0 et 255

Exemples : rgb(255,255,255) (blanc), rgb(255,0,0) (rouge)

Valeurs RGB simplifées

ces valeurs sont uniquement utilisables pour des couleurs telles que #FFAA11 ou #00CC44 : toutes les paires de chiffres sont des doublons.

On peut remplacer alors ces valeurs par un nombre hexadecimal de 3 chiffres, où chaque chiffre représente un doublon dans la notation RGB

Exemple : #FF33CC se remplace par #F3C, #FF33C1 ne peut pas se remplacer

Mots-clé

On peut aussi utiliser les noms anglais des couleurs : black, white, yellow, maroon, red, green, silver, navy (bleu marine), cyan, fuschia, purple, lime (vert clair), teal (cyan foncé), olive.