Maison > interface Web > tutoriel CSS > [Note CSS 9] Unités et valeurs

[Note CSS 9] Unités et valeurs

黄舟
Libérer: 2016-12-29 13:57:39
original
1263 Les gens l'ont consulté

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;}
Copier après la connexion

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);}
Copier après la connexion
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%);}
Copier après la connexion
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;}
Copier après la connexion
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;}
Copier après la connexion
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;}
Copier après la connexion
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%}
Copier après la connexion
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 (m.sbmmt.com) !



Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal