|
Forum |
|
Réagissez
dans les forums de JDN Développeurs
|
Les feuilles de style sont ouvertes à un grand nombre de mesures (et de cultures),
et les unités de longueur ne font pas exception : CSS permet de choisir parmi
un large éventail.
Démarcation
de taille : les unités de longueur sont divisées en deux groupes, les unités
absolues et les unités relatives (mesurées par rapport à une valeur supérieure
- elles peuvent donc être négatives) - voir les tableaux ci-dessous.
Il est conseillé de son cantonner aux unités %
et em pour un affichage fluide ou pour du texte,
et à px quand on a besoin de placer les
éléments au pixel près... Les autres valeurs doivent être
le plus souvent évitées.
CSS
: unités de mesure absolues
|
Unité
|
Description
|
cm
|
Valeur
en centimètres. Risque d'affichage différent sur plusieurs écrans. En
effet, les réglages et résolutions sont tellement variés que ce qui semble correspondre
à 1 cm sur un écran donné pourra être beaucoup plus grand ou plus petit sur un
autre.
|
mm
|
Valeur
en millimètres. Même remarque que pour les centimètres.
|
in
|
Valeur
en pouces (inches). Même remarque que pour les centimètres.
|
pt
|
Valeur
en point. Le point est une mesure typographique utilisée par les imprimeurs (d'où
les "points par pouce" de certaines résolutions) et les traitements de texte.
Ici encore, les remarques des centimètres s'appliquent.
|
pc
|
Valeur
en picas. Un autre terme de typographie, et donc, du fait de son origine "papier",
les remarques précédentes tiennent.
|
CSS
: unités de mesure relatives
|
Unité
|
Description
|
px
|
Valeur
en pixels. La définition d'un pixel étant "96 pixels/pouce",
le pixel n'est pas forcément recommandé dans tous les cas (cf.
les remarques précédentes).
|
em
|
Valeur
par rapport à la hauteur em d'une police. 1 em
correspond à 100% de la taille en cours de la police, 1.2 em
à 120 %, 0.8 em à 80%
Son usage est donc limité
aux polices.
|
ex
|
Valeur
par rapport à la hauteur x d'une police. Assez pauvrement implémentée, donc à
éviter.
|
%
|
Valeur
en pourcentage. L'élément définit prendra un pourcentage donné de la taille de
son élément parent.
|
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|