Maison >interface Web >tutoriel CSS >Il existe plusieurs façons d'exprimer les couleurs en CSS
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.
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!