Il existe plusieurs façons d'écrire des couleurs CSS

Il existe 4 façons d'écrire les couleurs CSS : 1. Utilisez des noms de couleurs, tels que rouge, noir, gris, etc. 2. Utilisez des valeurs hexadécimales, telles que "#FF0033" ; valeurs, telles que "rgb(255,0,51)" ; 4. Valeur HSL ou HSLA, par exemple "hsl(120,100%,25%)".

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

Plusieurs façons d'écrire des couleurs CSS

1. Utiliser des noms de couleurs

Bien que ce soit le cas. été Il existe environ 184 couleurs nommées, mais il n'existe que 16 noms de couleurs véritablement pris en charge par divers navigateurs et recommandés en tant que spécifications CSS, comme indiqué dans le tableau ci-dessous.

Tableau 1 : Noms de couleurs recommandés par les spécifications CSS

/*名 称	颜 色	名 称	颜 色	名 称	颜 色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白*/

Il n'est pas recommandé d'utiliser des noms de couleurs dans les pages Web, en particulier lors d'une utilisation à grande échelle, pour éviter que certains noms de couleurs ne soient pas analysés par le navigateur ou sont différents. Différences dans la façon dont les navigateurs interprètent les couleurs.

[Tutoriel recommandé : Tutoriel vidéo CSS ]

2. Couleur hexadécimale

Symbole hexadécimal #RRGGBB et #RGB ( comme #ff0000). "#" suivi de 6 ou 3 caractères hexadécimaux (0-9, A-F).

Il s'agit de la méthode de sélection des couleurs la plus couramment utilisée, par exemple :

#f03
#F03
#ff0033
#FF0033

3 RVB, rouge-vert-bleu (RVB)

. Spécifie que la valeur de couleur est la couleur du code RVB, le format de la fonction est RVB (R, V, B) et la valeur peut être un nombre entier ou un pourcentage compris entre 0 et 255.

rgb(255,0,51)
rgb(255, 0, 51)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)

Extensions : RGBA, Rouge-Vert-Bleu-Alpha (RGBa)

RGBA étend le mode de couleur RVB pour inclure un canal alpha, permettant de définir la transparence d'une couleur. a représente la transparence : 0=transparent ; 1=opaque.

rgba(255,0,0,0.1)    /* 10% 不透明 */  
rgba(255,0,0,0.4)    /* 40% 不透明 */  
rgba(255,0,0,0.7)    /* 70% 不透明 */  
rgba(255,0,0,  1)    /* 不透明，即红色 */

4. HSL, teinte-saturation-luminosité (Teinte-saturation-luminosité)

Teinte (Teinte) représente le cercle de couleur (c'est-à-dire un cercle représentant un anneau arc-en-ciel) en biais.
La saturation et la luminosité sont exprimées en pourcentage.
100 % correspond à une saturation totale, tandis que 0 % correspond à une échelle de gris.
100 % de luminosité est blanc, 0 % de luminosité est noir et 50 % de luminosité est « normal ».

hsl(120,100%,25%)    /* 深绿色 */  
hsl(120,100%,50%)    /* 绿色 */       
hsl(120,100%,75%)    /* 浅绿色 */

Extension : HSLA, Hue-Saturation-Lightness-Alpha (HSLa)

HSLa étend le mode couleur HSL, y compris le canal alpha, qui peut spécifier la transparence d'une couleur. a représente la transparence : 0=transparent ; 1=opaque.

hsla(240,100%,50%,0.05)   /* 5% 不透明 */   
hsla(240,100%,50%, 0.4)   /* 40% 不透明 */  
hsla(240,100%,50%, 0.7)   /* 70% 不透明 */  
hsla(240,100%,50%,   1)   /* 完全不透明 */

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de 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!