Es gibt verschiedene Möglichkeiten, CSS-Farben zu schreiben

Es gibt 4 Möglichkeiten, CSS-Farben zu schreiben: 1. Verwenden Sie Farbnamen wie Rot, Schwarz, Grau usw.; 2. Verwenden Sie Hexadezimalwerte wie „#FF0033“. 3. RGB- oder RGBA-Werte wie „#FF0033“. „rgb(255 ,0,51)“; 4. HSL- oder HSLA-Wert, zum Beispiel „hsl(120,100%,25%)“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Mehrere Möglichkeiten, CSS-Farben zu schreiben

1. Verwenden Sie Farbnamen

Obwohl es derzeit etwa 184 benannte Farben gibt, werden sie tatsächlich von verschiedenen Browsern unterstützt und werden von der CSS-Spezifikation nur empfohlen 16 Arten von Namen, wie in der folgenden Tabelle gezeigt.

Tabelle 1: Von CSS-Spezifikationen empfohlene Farbnamen

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

Es wird nicht empfohlen, Farbnamen auf Webseiten zu verwenden, insbesondere bei der Verwendung in großem Maßstab, um zu vermeiden, dass einige Farbnamen von Browsern nicht analysiert werden oder dass verschiedene Browser Farben interpretieren anders.

【Empfohlenes Tutorial: CSS-Video-Tutorial】

2. Hexadezimale Farbe

Hex-Symbole #RRGGBB und #RGB (z. B. #ff0000). „#“, gefolgt von 6 oder 3 Hexadezimalzeichen (0-9, A-F).

Dies ist die am häufigsten verwendete Farbauswahlmethode, wie zum Beispiel:

#f03
#F03
#ff0033
#FF0033

3, RGB, Rot-Grün-Blau (RGB)

Gibt an, dass der Farbwert die Farbe des RGB-Codes ist, Funktionsformat For rgb(R,G,B), der Wert kann eine Ganzzahl oder ein Prozentsatz von 0-255 sein.

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

Erweiterung: RGBA, Rot-Grün-Blau-Alpha (RGBa)

RGBA erweitert den RGB-Farbmodus, der einen Alphakanal enthält und es ermöglicht, die Transparenz einer Farbe festzulegen. a steht für Transparenz: 0=transparent; 1=undurchsichtig.

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, Farbton-Sättigungs-Helligkeit (Hue-Saturation-Lightness)

Hue (Hue) stellt einen Winkel des Farbkreises dar (d. h. einen Ring, der einen Regenbogen darstellt).
Sättigung und Helligkeit werden in Prozent ausgedrückt.
100 % ist volle Sättigung, während 0 % eine Graustufe ist.
100 % Helligkeit ist weiß, 0 % Helligkeit ist schwarz und 50 % Helligkeit ist „normal“.

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

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

HSLa erweitert den HSL-Farbmodus, einschließlich des Alpha-Kanals, der die Transparenz einer Farbe festlegen kann. a steht für Transparenz: 0=transparent; 1=undurchsichtig.

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)   /* 完全不透明 */

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Möglichkeiten, CSS-Farben zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!