TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Les unités

Nombre de propriétés CSS expriment des dimensions : hauteur largeur, marges, position, épaisseur de bordure, taille de police.

Les unités utilisées à disposition du concepteur sont nombreuses.

Unités absolues

pt (point)

Unité de mesure typographique. 1 point = 1/72 pouce

pc (pica)

Unité de mesure typographique. 1 pica = 12 points = 1/6 pouce

in (inch)

1 pouce correspond à 2.54 centimètres.

mm (millimètre)

1/1000 de mètre

cm (centimètre)

1/100 de mètre

Unités relatives

px (pixel)

Unité dépendante, donc relative au périphérique de sortie utilisé.

em

Rapport à la taille de police de l'élément ou de l'élément parent dans le cas de la propriété "font-size". 

Un font size défini à 2 em aura une police de taille double de celle de sont parent, tandis qu'une taille de 0,5 em aura pour taille, la moitié de celle de son parent.

<p style="font-size:24px">taille du texte de référence : 24px,
<span style="font-size: 2em;">texte à 2 em (48px) </span>
<span style="font-size: 0.5em;">texte à 0.5 em (12px)</span>
</p>

taille du texte de référence : 24px, texte à 2 em (48px) texte à 0.5 em (12px)

ex

les "ex" fonctionne selon le même principe que les "em". Certains navigateurs ficz la taille de l'unité "ex à 0.5em, d'autres utilsent les caractéristiques pour établir ce rapport ex/em qui en conséquence peut varier. Aussi on utilisera préférentiellement les "em" dont l'effet est semblable d'un navigateur à l'autre.

pour plus de détails : http://covertprestige.info/test/19-rapport-entre-les-unites-em-et-ex.html

%

Proportion relative à la dimension de l'élément parent ou la taille de la police selon la propriété.

Quelles unités - pour quoi faire

Pour les feuilles de style destinées à un media de type écran on utilise essentiellement :

Sur un écran, les unités absolues (pt pc in cm mm) sont approximés par un nombre de pixels dépendant de la seule résolution de l'écran

C'est pourquoi elles sont plutôt utilisées dans le cadre de CSS destinées à un media de type imprimante

L'unité "ex" étant variablement implémentée selon les navigateur, est délaissés aux profits des "em" qui tiennent un rôle similaire.

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007