Detaillierte grafische Erläuterung der vier Darstellungsmethoden von Farben in CSS

Farbe wird zwangsläufig im Seitenlayout verwendet. Eine gute Farbanpassung fügt der Seite viel Farbe hinzu. Wissen Sie, wie man die Farbe auf der Seite einstellt? In diesem Artikel erfahren Sie mehr über verschiedene Möglichkeiten, Farben auszudrücken. Freunde, die nicht wissen, wie man Farbwerte ausdrückt, können sich darauf beziehen.

1. Englische Wörter für Farbe

Der direkteste und einfachste Weg ist, englische Wörter für Farbe zu verwenden. Zum Beispiel: rot können wir Farbe schreiben: rot.

Nachteile: Es gibt Tausende von Farben, nicht jede Farbe hat ein entsprechendes englisches Wort und es gibt Einschränkungen bei der Verwendung.

II. Hexadezimale Darstellung der Farbe

Die Komponenten der hexadezimalen Farbe sind: #RRGGBB, wobei RR (rot), GG (grün) und BB (blau), Alle Werte müssen zwischen 0 und FF liegen. Laienhaft ausgedrückt ist die Essenz der Hexadezimalzahl RGB, und alle zwei Ziffern repräsentieren eine Farbe. Wenn die Werte der beiden Ziffern gleich sind, können sie beispielsweise als Farbe: #fc0 abgekürzt werden.

Hex-Farbwerte werden von allen gängigen Browsern unterstützt und empfohlen.

3. RGB steht für Farbe

In RGB steht R für Rot, G für Grün und B für Blau.

RGB-Schrift: RGB (0,0,0). Der Wertebereich liegt zwischen 0 und 255. Je größer der Wert, desto dunkler die Farbe. Zusätzlich zur Verwendung numerischer Werte kann RGB auch Prozentsätze verwenden, wobei die Werte zwischen 0 % und 100 % liegen. Beispiel: RGB (0,0,255) und RGB (0 %, 0 %, 100 %) repräsentieren dieselbe Farbe.

RGB-Darstellung gängiger Farben. Rot: RGB(255,0,0); Weiß: RGB(255,255,255); Schwarz: RGB(0,0,0)

Alle gängigen Browser unterstützen RGB-Farbwerte.

4. HSL stellt Farbe dar

HSL-Farbwerte repräsentieren: Farbton, Sättigung und Helligkeit.

Der Farbton ist ein Grad auf dem Farbkreis (von 0 bis 360) – 0 (oder 360) ist Rot, 120 ist Grün und 240 ist Blau. Die Sättigung ist ein Prozentwert, 0 % bedeutet Grautöne und 100 % bedeutet Vollfarbe. Die Helligkeit ist ebenfalls ein Prozentsatz, 0 % ist Schwarz und 100 % ist Weiß.

Hinweis: IE9, Firefox, Chrome, Safari und Opera 10+ unterstützen HSL-Farbwerte.

Zum Beispiel: Verwenden Sie die oben genannten vier Methoden, um verschiedene Farben darzustellen. Der Code lautet wie folgt:

HTML-Teil:

<div class="color1">床前明月光</div>
<div class="color2">疑是地上霜</div>
<div class="color3">举头望明月</div>
<div class="color4">低头思故乡</div>

CSS-Teil:

<style type="text/css">
	.color1{background-color:orange;}
	.color2{background-color:#FFFF00;}
	.color3{background:rgb(0,255,0);}
	.color4{background-color:hsl(360,50%,50%);}
</style>

Rendering:

Die Hintergrundfarbe des Div mit dem Klassennamen color1 ist orange, direkt ausgedrückt in englischen Worten, die Hintergrundfarbe des div mit dem Klassennamen color2 ist Gelb, ausgedrückt in Hexadezimalzahl #FFFF00 bedeutet; die Hintergrundfarbe des Div mit dem Klassennamen color3 ist grün, dargestellt durch rgb(0,255,0); die Hintergrundfarbe des div mit dem Klassennamen color4 ist dunkelrot und die Sättigung und Helligkeit sind beide auf 50 % eingestellt, dargestellt durch hsl(360,50 %,50 %).

Zusammenfassung: Das Obige stellt vier Methoden zum Ausdruck von Farben vor, von denen jede unterschiedlich ist, abhängig von persönlichen Gewohnheiten und Arbeitsanforderungen. Anfänger können sie selbst ausprobieren und mit der Farbe kombinieren Enzyklopädie. Probieren Sie verschiedene Farben aus, ich hoffe, es hilft.

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung der vier Darstellungsmethoden von Farben in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!