Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

MDN Plus now available in your country! Support MDN and make it your own. Learn

MDN Plus now available in your country! Support MDN and make it your own. Learn more ✨ Valeurs et unités CSS Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes. Prérequis : Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS. Objectif : Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS. Qu'est-ce qu'une valeur CSS ? Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que <color> ou <length> . Quand vous voyez le type de valeur <color> , valide pour une 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. propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <color> . 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() : 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. 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. h1 { color: black; background-color: rgb(197,93,161); } 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 donnée Description <integer> Une valeur de type <integer> est un nombre entier comme 1024 ou -55 . <number> Une valeur de type <number> représente un nombre décimal (qui peut avoir ou ne pas avoir de partie décimale). Par exemple : 0.255 , 128 , ou -1.2 . <dimension> Une valeur de type <dimension> est une valeur de type <number> à laquelle est attachée une unité. Par exemple : 45deg , 5s , ou 10px . <dimension> est une catégorie de type qui inclut les types <length> , <angle> , <time> , et <resolution> . <percentage> Une valeur de type <percentage> représente une fraction relative à une autre valeur. Par exemple : 50% . Les valeurs de pourcentages sont toujours relatives à une autre quantité. Ainsi, la longueur d'un élément pourra être relative à la longueur de son élément parent. 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é Nom Équivalent à cm Centimètres 1cm = 38px = 25/64in mm Millimètres 1mm = 1/10th of 1cm Q Quarts de millimètre 1Q = 1/40th of 1cm in Pouces (inches) 1in = 2.54cm = 96px pc Picas 1pc = 1/6e de 1in pt Points 1pt = 1/72e de 1in px Pixels 1px = 1/96th de 1in La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas cm (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est px (pixels). Unités de longueur relative Les unités de longueur relative permettent d'exprimer des quantités relatives à quelque chose d'autre comme la taille de la police de l'élément parent ou la taille de la zone d'affichage (viewport). L'avantage d'utiliser des unités relatives est qu'avec un peu d'organisation, on peut faire que la taille du texte ou d'autres éléments se mette à l'échelle, relativement à quelque chose d'autre sur la page. La plupart des unités les plus utiles pour le développement web sont présentes dans le tableau qui suit. Unité Relative à em Pour les propriétés typographiques comme font-size , relative à la taille de 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). Exploration d'un exemple Dans l'exemple qui suit, vous pouvez observer le fonctionnement de certaines unités de longueur relative et absolue. La première boîte a la propriété width définie en pixels. Il s'agit d'une unité absolue et cette largeur restera donc la même, quels que soient les autres changements. La deuxième boîte a sa largeur définie avec l'unité vw (relative à la largeur de la zone d'affichage). Cette valeur est relative à la largeur du viewport. Ainsi, 10vw correspondra à 10 pourcents de la largeur de la zone d'affichage. Si vous changez la largeur de la fenêtre de votre navigateur, la taille de cette boîte devrait changer. Toutefois, si l'exemple est intégré dans la page avec un élément <iframe> , cela ne fonctionnera pas. Pour voir concrètement le résultat, vous devrez ouvrir l'exemple dans un nouvel onglet avant d'ajuster la taille de votre fenêtre . La troisième boîte utilise les unités em . Ces unités sont relatives à la taille de la police. On a défini une taille de police de 1em sur l'élément <div> englobant et qui a la classe .wrapper . Passez cette valeur à 1.5em et vous pourrez voir que la taille de la police de tous les éléments augmente mais que seul le dernier élément s'élargit du fait que sa largeur soit relative à cette taille de police. Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autrement pour voir ce que ça donne. I am 200px wide 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 class="box px">I am 200px wide</div> <div class="box vw">I am 10vw wide</div> <div class="box em">I am 10em wide</div> </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 uploads/Philosophie/ valeurs-et-unites-css-apprendre-le-developpement-web-mdn.pdf