Académique Documents
Professionnel Documents
Culture Documents
Learn
more ✨
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez
également contribuer en rejoignant la communauté francophone sur MDN Web
Docs.
Note : Vous verrez également des valeurs CSS appelées types de données. Les
termes sont interchangeables — Quand vous voyez quelque chose en CSS
identifié comme type de données, c'est juste une façon différente de dire type de
valeur. Le terme valeur se rapporte à n'importe quelle expression particulière
supportée par un type de valeur que vous avez choisi d'utiliser.
Note : Oui, les types de valeurs CSS tendent à être indiqués par des chevrons,
pour les différencier des propriétés CSS (ex : la propriété color , comparée au
type de données <color>). Vous pourriez aussi être désorienté entre les types de
données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais
c'est peu probable — ils sont utilisés dans des contextes très différents.
Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé,
et la couleur de fond en utilisant la fonction rgb() :
h1 {
color: black;
background-color: rgb(197,93,161);
Un type de valeur en CSS est une manière de définir un ensemble de valeurs autorisées.
Cela signifie que si vous voyez <color> comme valide, vous n'avez pas besoin de vous
demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions
rgb() , etc. Vous pouvez utiliser n'importe quelle valeur <color> disponible, en
supposant qu'elle soit supportée par votre navigateur. La page MDN pour chaque valeur
vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous
regardez la page <color> , vous verrez que la section sur la compatibilité des navigateurs
liste différents types de valeurs pour "color" et le support.
Observons quelques-uns des types de valeurs et d'unités que vous pouvez fréquemment
rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs
possibles.
Nombres, longueurs et pourcentages
Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. Les types
qui suivent sont classés comme numériques :
Type de Description
donnée
Une valeur de type <integer> est un nombre entier comme
1024 ou -55 .
<integer>
Longueurs
Le type numérique que vous rencontrerez le plus souvent est le type <length> . Par
exemple : 10px (pixels) ou 30em . Il existe deux types de longueurs en CSS : les
longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est
important pour comprendre la taille que les éléments obtiendront.
Unités de longueur absolue
La liste qui suit contient uniquement des unités de longueur absolue. Ces quantités ne
sont pas relatives à quoi que ce soit d'autre et leur taille sera considérée comme
constante.
Unité Relative à
Pour les propriétés typographiques comme font-size , relative à la taille de
em la police de l'élément parent. Pour les autres propriétés comme width ,
relative à la taille de la police de l'élément;
ex La hauteur d'x de la police de l'élément.
Unité Relative à
ch La chasse/avance du glyphe « 0 » pour la police de l'élément.
rem La taille de la police pour l'élément racine.
lh La hauteur de ligne pour l'élément.
vw 1% de la largeur du viewport (la zone d'affichage).
vh 1% de la hauteur du viewport (la zone d'affichage).
vmin 1% de la plus petite dimension du viewport (la zone d'affichage).
vmax 1% de la plus grande dimension du viewport (la zone d'affichage).
I am
10vw
wide
I am 10em wide
Interactive editor
.wrapper {
font-size: 1em;
.px {
width: 200px;
.vw {
width: 10vw;
.em {
width: 10em;
<div class="wrapper">
</div>
ems et rems
em et rem sont deux unités de longueur relative que vous rencontrerez fréquemment dès
que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre
leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des
sujets plus complexes comme la mise en forme du texte ou les dispositions CSS.
L'exemple qui suit fournit une démonstration.
Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et
les exemples partagent tous le même code HTML. La seule différence est que le premier
utilise une classe ems et que le second utilise une classe rems.
Pour commencer, on définit la taille de la police à 16px sur l'élément <html> .
Pour récapituler, l'unité em signifie « la taille de police de l'élément parent » pour ce
qui concerne la typographie. Les éléments <li> à l'intérieur de <ul> et qui ont un
attribut class avec ems prendront donc leur taille en fonction de celle de leur parent.
Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de
1.3em soit 1,3 fois plus grand que la taille de police pour l'élément parent.
Pour récapituler, l'unité rem signifie « la taille de police de l'élément racine » (rem est
l'acronyme anglais de « root em » qu'on pourrait traduire par « em racine ».) Les éléments
<li> à l'intérieur de <ul> et qui ont un attribut class avec rems prendront leur taille à
partir de l'élément racine ( <html> ). Cela signifie que les niveaux successifs ne gagneront
pas en largeur.
Toutefois, si vous modifier la taille de la police avec font-size pour <html> dans la
feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant
celles qui utilisent rem que celles qui utilisent em .
Pourcentages
Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourcentage
est toujours relatif à une autre valeur. Ainsi, si vous définissez la propriété font-size
d'un élément avec un pourcentage, ce pourcentage sera relatif à la valeur de font-size
de l'élément parent. Si vous utilisez un pourcentage pour width , la valeur obtenue sera le
pourcentage de la valeur de width pour l'élément parent.
Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux
boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque
ensemble est dimensionné respectivement avec 40% et 200px.
La différence est que le deuxième ensemble avec les deux boîtes se situe dans un
contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que
dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de
40% de 400px ce qui est beaucoup plus étroit que l'autre !
Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour
voir comment cela fonctionne.
Le prochain exemple utilise des tailles de police définies en pourcentages. Chaque
élément <li> a font-size avec 80%, ainsi les éléments de listes imbriqués deviennent
de plus en plus petits en héritant de la taille de leur parent.
On notera que, bien que de nombreuses propriétés acceptent une longueur ou un
pourcentage, il en existe certaines qui n'acceptent que des longueurs. Vous pouvez voir
cette information sur les pages de référence de chaque propriété sur MDN. Si les valeurs
autorisées incluent le type <length-percentage> , on peut utiliser une longueur ou un
pourcentage. Si les valeurs autorisées n'incluent que <length> , il n'est pas possible
d'utiliser un pourcentage.
Nombres
Certains types de valeur acceptent des nombres, sans unité. Une telle propriété est, par
exemple, opacity qui contrôle l'opacité d'un élément. Cette propriété acceptera une
valeur numérique (sans unité) comprise entre 0 (transparence complète) et 1
(complètement opaque).
Dans l'exemple qui suit, essayez de modifier la valeur de la propriété opacity en
utilisant différentes valeurs décimales entre 0 et 1 afin de voir comment la boîte et
son contenu changent en opacité.
Note : Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être
écrit avec des guillemets ou quotes autour.
Couleur
Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus
récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être
utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur
d'arrière-plan ou de toute autre couleur.
Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits,
ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de
canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256
= 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.
Note : Dans ce tutoriel, nous verrons les méthodes communément utilisées pour
définir les couleurs et qui disposent d'une bonne prise en charge des
navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et
sont moins fréquentes.
Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement
comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour
une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui
représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de 0
pour le canal alpha, la couleur sera complètement transparente tandis qu'avec 1 , elle sera
complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs
d'opacité.
Note : Définir un canal alpha sur une couleur n'est pas exactement la même
chose qu'utiliser la propriété opacity dont nous avons parlé auparavant.
Lorsqu'on utilise opacity , c'est tout l'élément et ce qu'il contient qui devient
plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA,
seule la couleur est plus ou moins opaque.
Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes
colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous
pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la
valeur du canal alpha est faible.
Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir
comment la couleur est modifiée.
Note : Avec la spécification CSS Colors Level 4, rgba() est un alias pour
rgb() et hsla() est un alias pour hsl() (voir ci-après). Pour les navigateurs
qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes
paramètres et se comportent de la même façon. Essayez de modifier l'exemple
qui précède pour passer de fonctions rgba() à des fonctions rgb() pour voir
si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que
de vous mais séparer les définitions de couleurs transparentes et de couleurs
non-transparentes fournira une prise en charge navigateur (légèrement) meilleure
tout en explicitant visuellement (dans votre code) où les couleurs transparentes
sont définies.
Position
Le type de valeur <position> représente un ensemble de coordonnées sur deux
dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via
background-position ). Ces valeurs peuvent être indiquées avec des mots-clés comme
top , left , bottom , right , et center afin d'aligner les objets sur les bords d'une
boîte en deux dimensions et avec des longueurs qui représentent les décalages par
rapport au coin supérieur gauche de la boîte.
Une position se compose généralement de deux valeurs : la première indiquant la position
horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie,
l'autre valeur sera center par défaut.
Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et
vers la droite du conteneur en utilisant un mot-clé.
Manipulez, modifiez ces valeurs pour voir comment décaler l'image dans le
conteneur.
Chaînes de caractères et identifiants
Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont
utilisés comme valeur (par exemple <color> qui peut utiliser des mots-clés comme red ,
black , rebeccapurple , et goldenrod ). Si on veut être plus précis, on dira que ces
mots-clés sont des identifiants, une valeur spéciale comprise par le moteur CSS. Ces
identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas
des chaînes de caractères.
À d'autres endroits en CSS, on utilise des chaînes de caractères, comme lorsqu'on définit
du contenu généré. Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour
indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des
mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour
du contenu généré.
Functions
Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une
fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de
réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou
de l'ordinateur. Les fonctions sont généralement associées à des langages comme
JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées
comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à
propos des couleurs : rgb() , hsl() , etc. La valeur utilisée pour récupérer une image à
partir d'un fichier, url() est également une fonction.
Une fonction qui est peut-être plus proche des langages de programmation traditionnels
est la fonction CSS calc() . Cette fonction permet de réaliser des calculs simples à
l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui
ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce
sera le navigateur qui pourra les déterminer lors de l'exécution.
Dans le prochain exemple, on utilise calc() afin que la boîte soit large de 20% +
100px . Les 20% sont calculés à partir de la largeur du conteneur parent : .wrapper et
changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être
effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%.
Aussi, on utilise calc() pour indiquer au navigateur de réaliser ce calcul.