Les unités CSS
De nombreuses propriétés CSS peuvent se voir attribuer des
valeurs dans plusieurs unités possibles.
Voici un récapitulatif des unités utilisables.
ATTENTION : si vous spécifiez des valeurs décimales, vous devez utiliser la notation anglaise (un point à la place de la virgule). Exemple : "1.4em" et non pas "1,4em".
- En pixels. Exemple : width:100px;
Dans Explorer, les valeurs attribuées de cette façon sont fixes. Elles le resteront quelle que soient les variations de tailles des caractères et de la page. Dans les autres navigateurs, l'unité "px" varie avec la taille par défaut des polices.
Contrairement au point (pt), la taille du pixel (px) est dépendante de la résolution et de la taille de l'écran. C'est donc une unité relative dépendante du périphérique affichant votre page.
Lorsque vous définissez une valeur en px, vous devez utiliser un nombre entier. - En "%". Exemple : width:50%;
Les valeurs attribuées de cette façon permettent d'avoir une valeur proportionnelle à la taille de la fenêtre du navigateur ou à l'élément parent de celui pour lequel vous utilisez cette unité. Si vous utilisez des pourcentages dans une propriété liée à la taille des caractères, la valeur obtenue est proportionnelle à la taille de la police par défaut (1"em").
Lorsque vous définissez une valeur en %, vous devez utiliser un nombre entier. - En "em". Exemple : width:1.5em;
Les valeurs attribuées de cette façon permettent d'avoir une valeur proportionnelle à la taille des caractères utilisés dans la page. 1em correspond à une hauteur de ligne de 1 caractère, soit 12pt si l'utilisateur n'a pas modifié la taille standard des caractères. Si l'utilisateur modifie la taille par défaut des caractères (avec CTRL + et CTRL -, par exemple), les valeurs définies en "em" varieront en conséquence. Cette unité est donc trés pratique pour modifier votre mise en page en fonction de la taille des caractères choisie par l'utilisateur.
Vous pouvez utiliser des valeurs décimales du type "1.4em" - Autres unités. La norme CSS2 a mis en place de nombreuses autres unités qui sont des variantes des 3 précédentes. Voici un récapitulatif complet des unités utilisables en CSS :
Unités absolues
Toutes les unités absolues sont équivalentes selon le rapport suivant : 1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc.
Vous pouvez indifférement utiliser l'une ou l'autre en fonction de votre préférence. Le résultat sera identique si vous respectez les rapports définis au paragraphe précédent.
Unité Description cm Le centimètre in Le pouce (en anglais « inch ») correspondant à 2,54 cm mm Le millimètre pt Le point. Correspond à un soixante-douxième d'inch. pc Le pica (correspondant à 12 pt)
Unités relatives
Unité Description em Unité relative à la taille de police de l'élément.
1 em équivaut à 100% de cette taille.
Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la taille de la police de l'élément parent.ex Unité relative à la hauteur de la minuscule de l'élément. Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la hauteur de la minuscule de l'élément parent. px Le pixel. Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage % Le pourcentage est une unité relative à la taille de l'élément ou de son parent.
Le site ReedDesign propose un tableau d'équivalence de ces unités. Concernant les unités relatives, ces équivalences ne sont évidemment valables que dans des conditions "standards", c'est à dire si l'utilisateur à régler sa taille de police sur "moyenne" et si l'écran d'affichage à une résolution assez standard.
Les équivalences proposées pour les % ne sont applicables que pour la définition des tailles de caractères.
Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% 29pt 38px 2.35em 235% 30pt 40px 2.45em 245% 32pt 42px 2.55em 255% 34pt 45px 2.75em 275% 36pt 48px 3em 300%
Cette page a été réalisée
par css-faciles.
Pour plus de détail sur ce copyright,
consultez notre page consacrée
aux droits de copie.
-
Introduction
Premiers pas
Héritages
Eléments "blocs"
Mise en page
Problèmes
Des tableaux
Pseudo-frames
Menu déroulant
Styles
alternatifs
10
trucs à savoir
Couleurs
CSS
Unités
CSS
Classement
alphabétique
Classement
par familles
Reflexions
et prises de tête
Les fausses promesses
Tableaux contre CSS : le combat
Les ayatollahs
Recherche
Haut de page
Page précédente
Page suivante
