CSS - Unités de mesure

CSS prend en charge un certain nombre de mesures, y compris des unités absolues telles que pouces, centimètres, points, et ainsi de suite, ainsi que des mesures relatives telles que les pourcentages et em unités. Vous avez besoin de ces valeurs tout en spécifiant différentes mesures dans vos règles de style, par exemple border = "1px rouge solide".

Nous avons énuméré toutes les unités de mesure CSS avec des exemples appropriés –

Les unités de mesure absolues :

1-      PICA : pc

La typographie classique définie au XVIIIe siècle par le français Didot repose sur un système en base 12. L'unité de base est le Cicero qui vaut 12 points, soit 4.513 mm

Dans le système anglo-saxon, également en base 12, l'unité standard est le Pica. Un Pica vaut 12 Points. Sa longueur est égale à 4.212 mm soit 1/6 d'Inch. 

Du fait de la diffusion des logiciels de PAO d'origine américaine, le Pica est universellement accepté comme unité de mesure typographique.

p {font-size: 20pc;}

2-      Point : pt 

C'est l'unité la plus petite en typographie. Elle correspond à 1/12 pc ou à 1/72 in. Exprimé dans le système métrique, un point vaut 0.351mm

body {font-size: 18pt;}

3-      Inch : in

L'Inch correspond au Pouce en français et mesure 2.54 cm. Cette unité de mesure est très largement répandue dans les pays anglo-saxons qui ne connaissent pas le système métrique.
Un Inch correspond à 6 Pica et 72 Points.

p {word-spacing: .15in;}

4-      Millimètre : mm 

Le millimètre peut être utilisé pour définir une marge, l'espace entre les mots, l'espace entre les lettres.

p {word-spacing: 15mm;}

Unités de mesure relatives :

1. Pixel : px

Pixel signifie Picture Elément. C'est une unité de mesure relative qui dépend des dimensions de la zone utile de l'écran et du mode vidéo utilisé.
Selon les définitions vidéo, le nombre de pixels varie grandement pour un même écran:

·        Mode VGA : 640x480 pixels

·        Mode SVGA-I : 800x600 pixels

·        Mode SVGA-II: 1024x768 pixels.

p {padding: 25px;}

2. Hauteur de la lettre : em

Cette unité de mesure est relative à la hauteur des caractères de la police utilisée dans l'élément HTML spécifié.

body {font-size: 12 pt; text-indent: 3em; } 

Dans cet exemple, la taille des caractères est de 12 points et l'indentation du texte est de 36 points.

3. Pourcentage : % 

Les valeurs en pourcentage sont toujours relatives à une unité de longueur.

Exemple de style : 

p {line-height: 120% } 

Si la taille des caractères, définie par "font-size", est de 10 Points, la hauteur de ligne sera de 12 Points (120% de 10 points).

les notations pour les couleurs :

4. Notation hexadécimale

Les trois couleurs fondamentales (rouge, vert, bleu) sont codées séparément en base 16, une couleur pouvant prendre les valeurs de 00 à FF (soit 0 à 255 en base 10). Les combinaisons des trois couleurs donnent des triplets.
Chaque triplet correspond à une couleur composite. Il y a au total 16 777 216 couleurs possibles.

h1 { color: #f00 }                                                                  

On passe de la notation simplifiée à la notation complète en dédoublant les chiffres :

#f00 est équivalent à #ff0000 –la couleur rouge-

#f69 est équivalent à #ff6699

5. La notation décimale

La notation décimale est strictement identique à la notation hexadécimale à la base près.
Les couleurs RVB sont notées de 0 à 255, ce qui correspond à 16.7 millions de couleurs.

p { color: rgb(255,0,0) }  /* Couleur rouge */ 

On notera la présence de la virgule comme séparateur des trois couleurs fondamentales et l'indication rgb (red, green, blue)

   6.La notation en pourcentage :

La notation en pourcentage est strictement identique à la notation hexadécimale ou à la notation décimale.
Les couleurs RVB sont notées de 0 à 100%, ce qui correspond à 1 million de couleurs possibles.

p {color: rgb(100%,0%,0%) } /* Couleur rouge */ 

On notera la présence de la virgule comme séparateur des trois couleurs fondamentales et l'indication rgb (red, green, blue)