Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Il existe plusieurs types de propriétés CSS à notre portée : des valeurs numériques, aux couleurs, jusqu'aux fonctions accomplissant une action particulière (comme charger une image de fond, ou appliquer une rotation sur un élément). Certains d'entre eux s'appuient sur des unités particulières pour spécifier les valeurs qui les accompagnent (ex: créer un bloc d'une largeur de 30 pixels , de 30 centimètres, ou de 30 ems ?). Dans ce guide, nous examinerons les valeurs les plus courantes telles que la longueur, la couleur, et des fonctions simples. Mais nous aborderons aussi d'autres unités moins communes, telles que les degrés et même les valeurs numériques sans unité.

Prérequis : Connaissances de base en informatique, installation de logiciels, connaissances de base sur comment travailler avec des fichiers, bases en HTML (voir Introduction au HTML), et avoir une idée du fonctionnement des CSS (voir les articles précédents dans ce module.)
Objectifs : Apprendre les types de propriété CSS les plus utilisés et leurs unités associées.

Il existe plusieurs types de valeurs en CSS, certaines d'entre elles assez courantes, d'autres que vous rencontrerez plus rarement. Dans cet article, nous ne les traiterons pas toutes de façon exhaustive; juste celles que vous serez susceptibles de trouver les plus utiles dans votre parcours pour maitriser les CSS. Dans cet article, nous aborderons donc les valeurs CSS suivantes:

  • Les valeurs numériques : Valeurs de longueur pour spécifier, par exemple, la largeur d'un élément, l'épaisseur d'une bordure, une taille de font, et des entiers sans unité pour spécifier, par exemple, la largeur relative d'une ligne, ou le nombre d'itérations d'une animation.
  • Pourcentages : Peuvent être aussi utilisés pour spécifier une taille ou une longueur — relative à la largeur ou la hauteur du conteneur parent, ou à la font-size par défaut.
  • Couleurs : Pour préciser la couleur de fond, la couleur du texte, etc.
  • Coordonnées : Par exemple pour définir la position d'un élément positionné relativement au bord supérieur gauche de l'écran.
  • Fonctions :  Pour spécifier des images de fond par exemple, ou des dégradés.

Vous verrez aussi des exemples d'utilisation de ces unités tout au long de votre parcours dans ce guide sur les CSS, mais aussi dans toutes les autres ressources CSS que vous pourrez consulter ! Vous vous approprierez ainsi ces notions en un rien de temps.

Note: Vous trouverez un traitement plus exhaustif des unités CSS dans la Référence CSS; les unités y sont les entrées qui sont entourées par des crochets <>,  par exemple <color>.

Valeurs numériques

Vous verrez que les nombres sont largement utilisés dans les unités CSS. Cette section aborde les types de valeurs numériques les plus courants.

Longueur et taille

Vous utiliserez très souvent les unités de longueur/taille (voir <length> pour référence)  dans vos CSS pour la mise en page, typographie et plus. Jetons un oeil sur ce simple exemple — tout d'abord le HTML:

<p>Ceci est un paragraphe.</p>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un paragraphe.</p>

Et maintenant le CSS :

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

Le résultat est le suivant :

Dans ce code, nous réalisons les choses suivantes :

  • Définir les margin, padding et border-width de chaque paragraphe à respectivement 5 pixels, 10 pixels et 2 pixels. Si une valeur unique est donnée pour le margin/padding, cela signifie que les quatre côtés sont définis avec cette même valeur. L'épaisseur de la bordure est réglée par le biais de la valeur donnée pour le raccourci border.
  • Définir la width des trois paragraphes à des valeurs en pixels de plus en plus grandes, signifiant que plus on va vers le bas, plus les blocs sont larges.
  • Définir la font-size des trois paragraphes avec des valeurs en pixel de plus en plus grandes, ce qui implique que la taille du texte sera de plus en plus grande à mesure que l'on descend dans la page. La font-size fait référence à la hauteur de chaque caractère.

Les pixels (px) sont appelés unités absolues car ils auront toujours la même taille indépendamment des autres paramètres associés. Les autres unités absolues sont les suivantes :

  • mm, cm, in: Millimètres, centimètres, ou pouces (inches).
  • pt, pc: Points (1/72 d'un pouce) ou picas (12 points.)

Vous n'utiliserez probablement pas ces unités très souvent, sauf les pixels.

Il y a aussi des unités dites "relatives, qui sont relatives à la font-size de l'élément courant, ou à la taille du viewport :

  • em: 1em est la même que la taille de police de l'élément actuel (plus précisément, la largeur d'une lettre majuscule M). La font-size par défaut d'une page web, donnée par le navigateur avant que les styles CSS ne soient appliqués, est de 16 pixels, ce qui signifie que la valeur calculée d'un élément de 1em est de 16 pixels par défaut. Mais attention - les tailles de police des éléments sont héritées de leurs parents, donc si des tailles de police différentes ont été définies sur des éléments parents, l'équivalent en pixels d'un em peut commencer à devenir compliqué. Ne vous inquiétez pas trop à ce sujet pour l'instant - nous passerons en revue les notions d'héritage et la taille des polices plus en détail dans les articles et les modules suivants. Les em sont l'unité relative la plus commune que vous utiliserez dans le développement Web.
  • ex, ch: Il s'agit respectivement de la hauteur d'un x minuscule, et de la largeur du chiffre 0. Ces unités ne sont pas aussi couramment utilisées ni aussi bien supportées que les ems.
  • rem: L'unité rem (root em) fonctionne exactement de la même façon que l'em, sauf qu'il sera toujours égal à la taille de la police font-size par défaut ; les tailles de police héritées n'auront aucun effet, donc cela semble être une bien meilleure option que les em, bien que les rem ne fonctionnent pas dans les anciennes versions d'Internet Explorer (pour en savoir plus sur le support multi-navigateur, voir Debugging CSS.)
  • vw, vh: Représentent respectivement 1/100ième de la largeur du viewport, et 1/100ième de la hauteur du viewport. Là aussi, ces unités ne sont pas aussi largement supportées que lesrem.

L'usage d'unités relatives est très utile : vous pouvez dimensionner vos éléments HTML en fonction de la police ou de la taille de la fenêtre, ce qui signifie que la disposition restera correcte si la taille du texte est doublée sur l'ensemble du site par un utilisateur malvoyant.

Valeurs sans unités

Dans les CSS , vous pourrez parfois rencontrer des valeurs qui ne sont pas accompagnées d'une unité : il ne s'agit pas toujours d'une erreur, en fait, cela est autorisé dans certaines circonstances. Par exemple, si vous voulez totalement supprimer le margin ou le padding d'un élément, vous pouvez simplement utiliser le 0 sans unité. 0 vaut 0,  peu importe l'unité qui avait été choisie précédemment !

margin: 0;

Hauteur de ligne

Un autre exemple est line-height, qui définit la hauteur de chaque ligne de texte d'un élément. Vous pouvez utiliser des unités pour donner une hauteur de ligne spécifique, mais il est souvent plus facile de faire usage d'une valeur sans unité qui va agir comme un simple coefficent multiplicateur. Prenons pour exemple le code HTML suivant : 

<p>Blue ocean silo royal baby space glocal evergreen relationship housekeeping
native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary
virtuoso granularity catalyst wow factor loop back brainstorm. Core competency 
baked in push back silo irrational exuberance circle back roll-up.</p>

Et le CSS suivant :

p {
  line-height: 1.5;
}

Ceci va donner le résultat suivant :

Ici, la font-size est de 16px; la hauteur de ligne line-height sera 1.5 fois la font-size , soit 24px.

Nombre d'animations

Les animations CSS permettent d'animer des éléments HTML d'une page. Regardons un simple exemple d'animation qui applique une rotation à un paragraphe lorsque ce dernier est survolé avec la souris. Le HTML pour cet exemple est relativement simple :

<p>Hello</p>

Le CSS est un peu plus compliqué :

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

 

Ici, vous pouvez voir un certain nombre d'unités intéressantes dont nous ne parlerons pas explicitement dans cet article (<angle>s, <time>s, <timing-function>s, <string>s...), mais celle qui nous intéresse ici figure à la ligneanimation-iteration-count: 5; — ceci précise le nombre de fois ou cette animation doit être reproduite (dans ce cas-ci,  lorsque le paragraphe est survolé avec la souris), et il s'agit d'un simple nombre entier sans unité.

Nous obtenons ainsi le résultat suivant :

Pourcentages

Vous pouvez également utiliser des valeurs en pourcentage pour spécifier la plupart des choses qui peuvent être définies par des valeurs numériques. Cela nous permet, par exemple, de créer des blocs dont la largeur varie en pourcentage de la largeur de leur conteneur parent.  
On peut comparer ces blocs dont la largeur est définie en pourcentage aux blocs dont la largeur est définie sur une certaine valeur unitaire (telle que le px ou l'em), qui elle, restera toujours la même longueur, même si la largeur de leur conteneur parent change.

Un exemple pour expliquer le propos :

D'abord, deux blocs similaires, définis en HTML:

<div>
  <div class="boxes">Fixed width layout with pixels</div>
  <div class="boxes">Liquid layout with percentages</div>
</div>

Et maintenant un peu de CSS pour les styliser :

div .boxes {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {
  background-color: blue;
  width: 75%;
}

Ce qui nous donne le résultat suivant :

Ici, nous définissons pour tous les blocs un margin,  une height, une font-size, une border ainsi qu'une color. Puis nous donnons à la premère et à la deuxième div des background-colors différents, de sorte à bien les diférencier. Nous définissons aussi la width de la première div à 650px, et la largeur de la deuxième à 75%. Cela a pour effet que la première div a toujours la même largeur, même si la fenêtre est redimensionnée (la première div commence à disparaitre quand la fenêtre devient moins large que le bloc), alors que la largeur de la deuxième div change en même temps que change la largeur de la fenêtre, de telle sorte que le bloc fasse 75% de la largeur de son parent. Dans ce cas, le parent de la div est l'élément <body>, qui par défaut fait 100% de la largeur de la fenêtre.

Note: You can see this effect in action by resizing the browser window this article is in; also try doing the same thing on the raw examples found on Github.

Nous avons aussi défini une font-size avec une valeur en pourcentage : 200%. Cela fonctionne d'une façon un peu différente de ce que qu'on peut attendre, mais cela a du sens — là encore, cette taille est relative à la font-size de son parent, tel que défini en ems. Dans ce cas, la font-size du parent est de 16px —  fotn-size par défaut de la page, donc la valeur calculée sera 200% de celle-ci, soit 32px. Cela fonctionne en fait d'une manière très similaire aux ems — concrètement 200% est l'équivalent de 2ems.

Ces deux types de mise en page sont souvent appelées mise en page fluide (change lorsque la taille du viewport du navigateur), et mise en page fixe (reste le même, peu importe la largeur du viewport). Les deux ont des usages différents, par exemple :

  • Une mise en page liquide peut être utilisée pour s'assurer qu'un document standard s'adapte toujours à l'écran et semble correct sur différentes tailles d'écran de périphérique mobile.
  • Une mise en page fixe peut être utilisée pour garder une carte en ligne de la même taille; la fenêtre du navigateur peut alors faire défiler la carte, en affichant seulement une certaine étendue à la fois. L'étendue que vous pouvez voir en une fois dépend de la taille de votre fenêtre d'affichage.

Vous en apprendrez plus sur le sujet plus tard dans le cours, dans les chapitres sur la mise en page CSS et le Responsive design (à déterminer).

Apprentissage actif : Jouer avec les longueurs

Pour cet exercice, il n'y a pas de bonnes réponses. Essayez simplement de jouer avec la width et la height des divs .inner et .outer pour constater les effets que peuvent avoir tous ces différents types de valeurs : définissez une valeur en pourcentage pour la largeur de la div  .inner et regardez comme elle s'ajuste lorsque la div  .outer change. Tentez des unités de valeurs fixes aussi, comme les pixels et les ems.

Si vous vous trompez, vous pouvez toujours recommencer à zéro grâce au bouton Reset.

Couleurs

Il existe plusieurs façons de spécifier une couleur en CSS, certaines ont été implémentées plus récemment que d'autres. Les mêmes valeurs de couleur peuvent être utilisées partout dans CSS, que vous spécifiiez la couleur du texte, la couleur d'arrière-plan ou de tout autre élément.

Le système couleur standard disponible sur les ordinateurs modernes est de 24 bits, ce qui permet d'afficher environ 16,7 millions de couleurs distinctes grâce à une combinaison de différents canaux rouge, vert et bleu avec 256 valeurs différentes par canal (256 x 256 x 256 = 16 777 216).

Parcourons les différents types de valeurs de couleur disponibles.

Note: Pour faire la conversion entre les différents systèmes de couleur abordés ci-dessous, vous aurez besoin d'un convertisseur de couleur. Il y a beaucoup de convertisseurs faciles à trouver en ligne, tels que HSL to RGB / RGB to HSL / Hex Colour Converter.

Les mots-clés

Les types de couleurs les plus simples et les plus anciens en CSS sont les mots-clés de couleur. Ce sont des chaînes spécifiques représentant des valeurs de couleur particulières. Par exemple, le code suivant :

<p>This paragraph has a red background</p>
p {
  background-color: red;
}

Ce qui donne :

Les mots-clés de couleur sont très facile à comprendre, bien qu'il ne permette que de spécifier des primitives de couleur évidentes. Il existe environ 165 mots-clés différents disponibles dans les navigateurs Web modernes — voir la full color keyword list.

Les valeurs héxadecimales

Le prochain système de couleurs ubiquitaires est constitué de couleurs hexadécimales ou de codes hexadécimaux. Chaque valeur hexadécimale consiste en un symbole hash / dièse (#) suivi de six chiffres hexadécimaux, dont chacun peut prendre une valeur comprise entre 0 et f (ce qui représente 15) — donc 0123456789abcdef. Chaque paire de valeurs représente l'un des canaux — rouge, vert et bleu — et permet de spécifier l'une des 256 valeurs disponibles pour chacune (16 x 16 = 256).

Ainsi, par exemple, ce code :

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

Donne le résultat suivant : 

Les valeurs héxadécimales sont un peu plus complexes et moins faciles à comprendre, mais elles sont beaucoup plus polyvalentes que les mots-clés — vous pouvez utiliser des valeurs hexadécimales pour représenter n'importe quelle couleur que vous souhaitez utiliser dans votre palette de couleurs.

RGB

Le troisième type de couleur dont nous parlerons ici est le RVB. Une valeur RVB est une fonction — rgb() — qui reçoit trois paramètres représentant les valeurs des canaux rouge, vert et bleu des couleurs, de la même manière que les valeurs hexadécimales. La différence avec RVB est que chaque canal est représenté non pas par deux chiffres hexadécimaux, mais par un nombre décimal compris entre 0 et 255.

Réécrivons notre dernier exemple pour utiliser les couleurs RVB :

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

Ce qui donne le résultat suivant :

Le système RVB est presque aussi bien supporté que les valeurs hexadécimales — vous ne rencontrerez probablement aucun navigateur qui ne les supporte pas dans votre travail. Les valeurs RVB sont sans doute un peu plus intuitives et faciles à comprendre que les valeurs hexadécimales.

Note: Pourquoi 255 et non 256 ? Les systèmes informatiques ont tendance à compter de 0, pas 1. Donc, pour permettre 256 valeurs possibles, les couleurs RVB prennent des valeurs dans la gamme de 0-255, pas de 1-256.

HSL

Le modèle HSL est un peu moins bien supporté que RVB (pas sur les anciennes versions de IE). Il a été mis en œuvre après beaucoup d'intérêt des concepteurs — la fonction hsl() accepte les valeurs de teinte (hue), de saturation et de luminosité , qui sont utilisées pour distinguer les 16,7 millions de couleurs, mais d'une manière différente :

  1. Teinte : la teinte de base de la couleur. Cela prend une valeur comprise entre 0 et 360, présentant les angles autour d'une roue de couleur.
  2. Saturation : à quel point la couleur est elle saturée ? Cela prend une valeur comprise entre 0 et 100%, où 0 n'est pas en couleur (il apparaîtra en gris) et 100% de saturation en couleur.
  3. Luminosité : Quelle est la quantité de lumière dans la couleur? Cela prend une valeur comprise entre 0 et 100%, où 0 n'est pas lumineux (il apparaîtra complètement noir) et 100% est plein (il apparaîtra complètement blanc).

Note: Un cylindre HSL est utile pour visualiser le fonctionnement de ce modèle de couleur. Voir l'article HSL et HSV sur Wikipedia.

Nous allons maintenant réécrire notre exemple en utilisant les couleurs HSL :

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

Ceci nous donne le résultat suivant :

Le modèle de couleur HSL est assez intuitif pour les concepteurs qui ont l'habitude de travailler avec de tels modèles de couleur. Il est utile, par exemple, pour trouver un ensemble de nuances qui vont ensemble dans un schéma de couleurs monochrome :

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA et HSLA

RGB et HSL ont tous les deux des modes correspondants - RGBA et HSLA — qui vous permettent de définir non seulement la couleur que vous voulez afficher, mais aussi la transparence que vous voulez que cette couleur ait. Leurs fonctions correspondantes prennent les mêmes paramètres, plus une quatrième valeur dans la plage 0-1 — qui définit la transparence, ou canal alpha. 0 est complètement transparent et 1 est complètement opaque.

Voici un autre exemple rapide — d'abord le HTML:

<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>

Maintenant, le CSS — ici nous déplaçons le premier paragraphe vers le bas avec un positionnement, pour montrer l'effet des chevauchements de paragraphes (vous en apprendrez plus sur le positionnement ultérieurement) :

p {
  height: 50px;
  width: 350px;
}

/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

Voici le résultat :

Les couleurs transparentes sont très utiles pour des effets visuels plus riches — mélange d'arrière-plans, d'éléments d'interface utilisateur semi-transparents, etc.

Opacité

Il existe un autre moyen de spécifier la transparence via CSS : la propriété opacity. Au lieu de définir la transparence d'une couleur particulière, cela définit la transparence de tous les éléments sélectionnés et de leurs enfants. Encore une fois, étudions un exemple pour voir la différence.

<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>

Maintenant le CSS :

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

Voici le résultat :

Notez la différence — le premier bloc, qui utilise la couleur RGBA, a seulement un fond semi-transparent, alors que tout dans la deuxième boîte est transparente, y compris le texte. Pensez-y au moment de l'utiliser — par exemple RGBA est utile lorsque vous voulez créer une légende d'image superposée où l'image s'affiche à travers la zone de légende mais que le texte est toujours lisible. l'opacité, d'un autre côté, est utile lorsque vous voulez créer un effet d'animation dans lequel un élément entier de l'interface utilisateur va de complètement visible à masqué.

Apprentissage actif : Jouer avec les couleurs

Pour cet exercice, il n'y a pas de bonnes réponses. Essayez simplement de jouer avec les valeurs de background-color pour les trois blocs ci-dessous qui sont légèrement superposés les uns sur les autres. Essayez les valeur en mots-clés, en hexadécimal, en RVB / HSL / RGBA / HSLA, et la propriété opacity. Amusez-vous bien !

Si vous vous trompez, vous pouvez toujours recommencer à zéro grâce au bouton Reset.

Functions

En programmation, une function est une portion de code réunitilsable qui peut être executée plusieurs fois pour réaliser une tâche répétitive avec un minimum d'effort de la part du développeur et de la machine. Les fonctions sont généralement associées à des langages comme JavaScript, Python, ou C++, mais elles existent aussi en CSS, en tant que valeurs de propriété. Nous avons déjà vu des fonctions en action dans la section Colors avec rgb(), hsl(), etc. :

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

Ces fonctions calculent la couleur à utiliser.

Mais vous verrez aussi des fonctions à d'autres endroits — à chaque fois que vous voyez un nom avec des parenthèses après, contenant une ou plusieurs valeurs séparées par des virgules, c'est que vous avez affaire à une fonction. Par exemple :

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

Il y a beaucoup de fonctionnalités bien utiles et passionnantes en CSS, autant de choses que vous allez apprendre , en temps voulu !

Summary

Nous espérons que vous avez apprécié ce topo sur  les valeurs et les unités CSS. Ne vous inquiétez pas si cela ne vous semble pas tout à fait logique. Vous finirez par vous approprier ces fondamentaux de la syntaxe CSS à mesure que vous avancerez dans votre pratique !

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : drenawak
 Dernière mise à jour par : drenawak,