Maison > interface Web > tutoriel CSS > le corps du texte

Il existe plusieurs façons d'exprimer les couleurs en CSS

青灯夜游
Libérer: 2023-01-04 09:38:47
original
13606 Les gens l'ont consulté

Il existe 6 façons d'exprimer les couleurs en CSS, qui sont : 1. Les mots anglais, tels que rouge, bleu ; 2. Les valeurs hexadécimales, telles que "#FF0000" ; 3. RVB, telles que "RGB ; ( 255,0,0)" ; 4. RGBA, par exemple "RGB(255,0,0,0.5)" ; 5. HSL ; 6. HSLA.

Il existe plusieurs façons d'exprimer les couleurs en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css3, ordinateur Dell G3.

Recommandations du didacticiel : Tutoriel vidéo CSS

Plusieurs façons d'exprimer les couleurs en CSS

1. pages Définissez les couleurs, utilisez des mots anglais pour représenter les couleurs telles que le rouge, le bleu, etc.

2. Valeur hexadécimale

hexadécimal à trois chiffres tel que #F00 (chaque couleur est représentée par un ; nombre hexadécimal)

Nombre hexadécimal à six chiffres tel que #FF0000 (chaque couleur est représentée par deux nombres hexadécimaux)

3. Méthode d'expression RVB

RVB trois couleurs primaires : RVB(255,0,0) Les trois paramètres donnés représentent les valeurs de couleur du rouge, du vert et du bleu, exprimées en décimal de 0 à 225

RVB, RVB (100%, 0%, 0 %), utilisez le signe pourcentage pour exprimer

Remarque : Les expressions ci-dessus appartiennent toutes au système de couleurs RVB (rouge, vert, bleu)

4 , RGBA : Identique à RVB, juste avec une transparence supplémentaire, telle que RVB(255,0,0,0.5). La quatrième valeur va de 0 à 1, 0 est complètement transparent, 1 est complètement opaque

5. HSL (plus utilisé pour un ajustement ultérieur des couleurs dans l'apprentissage) : teinte, saturation, luminosité. Par exemple, HSL(360,100%,50%).

Teinte : C'est l'attribut de base de la couleur, c'est ce que l'on appelle habituellement le nom de la couleur, comme le rouge, etc.

Saturation : fait référence à la pureté de la couleur la plus élevée. c'est le cas, plus la couleur est pure, et plus elle est faible, la couleur changera progressivement. Gris, prend une valeur de 0-100%

Luminosité : C'est la luminosité de la couleur. luminosité de la couleur, plus la couleur est claire ; plus la luminosité de la couleur est foncée, plus la couleur est foncée.

(Lorsque vous souhaitez que la page utilise un système de couleurs, vous pouvez utiliser HSL)

6 HSLA : Il a plus de transparence que HSL.

Utilisation :

①color:blue

La première méthode consiste à appeler l'attribut color et à saisir le mot anglais de la couleur après les deux points; pour le séparer. Le numéro se termine.

Cette méthode est simple, mais elle peut représenter très peu de types de couleurs.

②color:#000000;

Le deuxième type commence par '#', chaque chiffre peut être : 0, 1, 2, 3, 4, 5, 6, 7, 8,

9, a, b, c, d, e, f. Les 1 et 2 premiers chiffres représentent le rouge, les 3 et 4 chiffres représentent le vert et les 5 et 6

chiffres représentent le bleu. Semblable à l'idée de représentation des couleurs RVB, les trois couleurs primaires rouge, vert et bleu sont utilisées pour combiner

différentes couleurs, et il en existe de nombreux types.

③color:rgb(0,0,0);

La troisième méthode est la représentation RVB. Il existe deux types de valeurs : les valeurs numériques, toutes les valeurs sont comprises entre 0 et 255 ; les valeurs en pourcentage

, toutes les valeurs sont comprises entre 0 % et 100 %. Leur caractéristique commune est que la première valeur représente le rouge, la deuxième valeur

représente le vert et la troisième valeur représente le bleu. Grâce à la combinaison, différentes couleurs peuvent être représentées.

④color:rgba(0,0,0,0.5);

La quatrième représentation RGBA. Il s'agit d'une version améliorée de la représentation RVB et ajoute un nouvel attribut de transparence.

Les trois premières valeurs d'attribut sont identiques à la notation RVB. La plage de valeurs de la quatrième valeur d'attribut est 0-1, ce qui peut être

précis à deux décimales près.

⑤color:hsl (0, 100%, 100%);

La cinquième méthode, représentation HSL. Sa signification : H représente la teinte, la plage de valeurs est de 0 à

360, 0 et 360 représentent le rouge, 120 représente le vert et 240 représente le bleu. S représente la saturation

et la plage de valeurs est comprise entre 0 % et 100 %. L représente la luminosité, la plage de valeurs est de 0 % à 100 %.

⑥color:hsla(0,100%,100%,0.5);

Sixièmement, représentation HSLA. Il s'agit d'une version améliorée de la représentation HSL, ajoutant la valeur de l'attribut de transparence

, avec une plage de valeurs de 0 à 1.

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
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