[Note CSS 9] Unités et valeurs

1. Valeur de couleur
Les paramètres de couleur dans les pages Web sont très importants, notamment la couleur de la police (color), la couleur d'arrière-plan (background-color), la couleur de la bordure (border), etc. Il existe également de nombreuses façons de définir les couleurs. :

1. Couleur de commande en anglais

Cette méthode de réglage est souvent utilisée dans les sections précédentes :

p{color:red;}

2. Couleur RVB

Ceci est cohérent avec la couleur RVB dans Photoshop et correspond au rapport de trois couleurs : R (rouge), G (vert) et B (bleu).

p{color:rgb(133,45,200);}

La valeur de chaque élément peut être un entier compris entre 0 et 255, ou un pourcentage compris entre 0% et 100%. Par exemple :

p{color:rgb(20%,33%,25%);}

3. Couleur hexadécimale

Cette méthode de réglage des couleurs est une méthode plus couramment utilisée maintenant, et son principe est en fait le réglage RVB. la valeur de chaque élément est passée de 0-255 à hexadécimal 00-ff.

p{color:#00ffff;}

2. Valeur de longueur

Pour résumer les unités de longueur, px (pixel), em et % sont couramment utilisés. Il convient de noter que ces trois unités sont en fait des unités relatives.

1. Pixel

Pourquoi le pixel est-il une unité relative ? Parce que les pixels font référence à de petits points sur l'écran (la spécification CSS suppose « 90 pixels = 1 pouce »). La situation réelle est que le navigateur utilise la valeur réelle des pixels de l'affichage. À l'heure actuelle, la plupart des concepteurs ont tendance à utiliser les pixels (px) comme unité.

2. em

est la valeur de la taille de police de la police donnée de cet élément. Si la taille de la police de l'élément est de 14 px, alors 1em = 14 px ; est de 18px, alors 1em =18px. Le code suivant :

p{font-size:12px;text-indent:2em;}

Le code ci-dessus peut réaliser l'indentation de la première ligne d'un paragraphe de 24px (c'est-à-dire la distance entre deux tailles de police).

Notez un cas particulier ci-dessous :

Mais lors de la définition de l'unité de taille de police sur em, la norme de calcul à ce moment est basée sur la taille de police de l'élément parent de p. Le code suivant :

html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}

Par conséquent, la taille de police "exemple" en span est de 11,2 px (14 * 0,8 = 11,2 px).

3. Pourcentage

p{font-size:12px;line-height:130%}

Définissez la hauteur de ligne (espacement des lignes) à 130 % de la police (12 * 1,3 = 15,6 px).

Ce qui précède est le contenu des unités et des valeurs dans [CSS Note 9]. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !