Unités CSS
Unités CSS
CSS a plusieurs unités différentes pour exprimer une longueur.
De nombreuses propriétés CSS prennent des valeurs de “longueur”, telles que width, margin, padding,
font-sizeetc.
Longueur est un nombre suivi d’une unité de longueur, tel que 10px,
2emetc.
Exemple
Définissez différentes valeurs de longueur, en utilisant px (pixels) :
h1 {
taille de police : 60 px ;
}
p {
taille de police : 25 px ;
hauteur de ligne : 50px ;
}
Essayez-le vous-même »
Note: Un espace ne peut pas apparaître entre le nombre et l’unité. Cependant, si la valeur est
0l’unité peut être omise.
Pour certaines propriétés CSS, les longueurs négatives sont autorisées.
Il existe deux types d’unités de longueur : absolu et relatif.
Longueurs absolues
Les unités de longueur absolue sont fixes et une longueur exprimée dans l’une d’entre elles apparaîtra exactement comme cette taille.
Les unités de longueur absolue ne sont pas recommandées pour une utilisation à l’écran, car les tailles d’écran varient énormément. Cependant, ils peuvent être utilisés si le support de sortie est connu, comme pour la mise en page d’impression.
| Unité | Description |
|---|---|
| cm | centimètres Essayez-le |
| millimètre | millimètres Essayez-le |
| dans | pouces (1in = 96px = 2,54cm) Essayez-le |
| px * | pixels (1px = 1/96th of 1in) Essayez-le |
| pt | points (1pt = 1/72 de 1po) Essayez-le |
| pc | picas (1pc = 12 pt) Essayez-le |
* Les pixels (px) sont relatifs à l’appareil de visualisation. Pour les appareils à faible résolution, 1px correspond à un pixel (point) de l’appareil de l’affichage. Pour les imprimantes et les écrans haute résolution, 1px implique plusieurs pixels de périphérique.
Longueurs relatives
Les unités de longueur relative spécifient une longueur relative à une autre propriété de longueur. Les unités de longueur relative évoluent mieux entre différents supports de rendu.
| Unité | Description | |
|---|---|---|
| em | Relatif à la taille de la police de l’élément (2em signifie 2 fois la taille de la police actuelle) | Essayez-le |
| ex | Par rapport à la hauteur x de la police actuelle (rarement utilisée) | Essayez-le |
| ch | Par rapport à la largeur du “0” (zéro) | Essayez-le |
| rem | Relatif à la taille de police de l’élément racine | Essayez-le |
| vw | Par rapport à 1 % de la largeur de la fenêtre d’affichage* | Essayez-le |
| vh | Par rapport à 1% de la hauteur du viewport* | Essayez-le |
| vmin | Par rapport à 1 % de la plus petite dimension de la fenêtre d’affichage* | Essayez-le |
| vmax | Par rapport à 1 % de la plus grande dimension de la fenêtre d’affichage* | Essayez-le |
| % | Relatif à l’élément parent | Essayez-le |
Conseil: Les unités em et rem sont pratiques pour créer une mise en page parfaitement évolutive !
* Viewport = la taille de la fenêtre du navigateur. Si la fenêtre a une largeur de 50 cm, 1vw = 0,5 cm.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l’unité de longueur.
| Unité de longueur | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27,0 | 9.0 | 1.0 | 7.0 | 20,0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20,0 | 9.0 | 19.0 | 6.0 | 20,0 |
| vmin | 20,0 | 12.0 | 19.0 | 6.0 | 20,0 |
| vmax | 26,0 | 16.0 | 19.0 | 7.0 | 20,0 |
#Unités #CSS