Unités CSS en français

Introduction aux unités CSS

Dans le monde du développement web, CSS (Cascading Style Sheets) utilise des unités pour définir les valeurs de diverses propriétés. On distingue principalement deux catégories d’unités : les unités absolues et les unités relatives.

Unités Absolues

Les unités absolues sont des unités CSS mesurant des longueurs fixes, sans tenir compte d'autres styles. Voici quelques exemples d'unités absolues courantes :

• px : Pixels, l'unité la plus fréquente
• pt : Points
• mm : Millimètres

Ces unités sont idéales pour des mesures précises, indépendamment du contexte.

Unités Relatives

À l'inverse, les unités relatives dépendent d'une autre mesure. Elles s'adaptent selon le contexte, telles que :

• La taille de la police de l'élément parent
• La taille de police par défaut du corps HTML
• La taille de la fenêtre d’affichage

Parmi les unités relatives, on trouve fréquemment :

• em : La taille est relative à la taille de police de l'élément parent.
• rem : Elle se base sur la taille de police de l'élément racine.
• vw : Représente un pourcentage de la largeur de la fenêtre d'affichage.
• vh : Représente un pourcentage de la hauteur de la fenêtre d'affichage.

Syntaxe des unités

La syntaxe se présente de la manière suivante :

: ;

Où :
- <length> désigne toute propriété mesurable (comme border, background-color, margin, etc.)
- <length-unit> est la valeur attribuée à la propriété mesurable (ex. : 2px, 30em, 10pt).

Exemple d'utilisation

Voici un exemple typique d'utilisation :

border-width: 30px;  

Cet exemple définit la largeur de la bordure à 30 pixels.