<p> Mastering CSS -Farben: Ein umfassender Leitfaden

<p> In der vorherigen Lektion haben wir CSS -Selektoren untersucht. Lassen Sie uns nun auf diesem Wissen aufbauen, indem wir lernen, wie man das Erscheinungsbild ausgew?hlter Elemente manipuliert, beginnend mit der Farb?nderung. Dieser Leitfaden deckt verschiedene Methoden zum Definieren von Farben in CSS ab, einschlie?lich Farbnamen, Hex -Codes, RGB -Werten und HSL -Formaten.

<p> Wie zuvor gezeigt, k?nnen Sie nach Auswahl eines HTML -Elements (z. B. einem <p> -Perabschnitt) seine Textfarbe mit der color Eigenschaft:

?ndern:

p {
  color: red;
}

<p> background-color In ?hnlicher Weise ?ndert die Eigenschaft

den Hintergrund des Elements:

p {
  background-color: darkorange;
}

<p>

W?hrend CSS gemeinsame Farbnamen wie "Red" und "Darkorange" unterstützt, umfasst es nicht jeden m?glichen Farbton. Für pr?zise Farbkontrolle bieten RGB-, Hex- und HSL -Farbmodelle eine gr??ere Flexibilit?t.

RGB -Farbmodell <p> rgb() rgb (rot, grün, blau) bildet die Grundlage für die Farbdarstellung in Computersystemen. Das Mischen dieser drei Prim?rfarben erzeugt ein breites Farbtonspektrum. Die

-Funktion definiert RGB -Farben:

rgb(<red>, <green>, <blue>)

<p> red Jeder Parameter (green, blue,

) akzeptiert einen ganzzahligen Wert zwischen 0 und 255, der die Intensit?t jeder Farbkomponente darstellt. 0 zeigt die schw?chste Intensit?t an und 255 am st?rksten. Zum Beispiel:

p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}

<p>

Kombination verschiedener Intensit?ten schafft verschiedene Farben:

p {
  color: rgb(168, 189, 45);
}

<p>

Ein Farb -Picker -Tool wird dringend empfohlen, um die RGB -Werte visuell auszuw?hlen, da es schwierig ist, die resultierende Farbe allein aus numerischen Werten vorherzusagen. <p>

<p> rgba() Die Funktion rgb() erweitert sich

durch Hinzufügen eines Alpha -Kanals:

rgba(<red>, <green>, <blue>, <alpha>)

<p> alpha Der Parameter

(0,0 bis 1,0) steuert die Transparenz; 0.0 ist vollst?ndig transparent und 1,0 ist vollst?ndig undurchsichtig:

p {
  color: rgba(167, 189, 45, 0.408);
}

<p>

Hex -Farbmodell <p>

Sechskantfarben Verwenden Sie Hexadezimalnotation:

#rrggbb

<p> # Das Symbol rr geht dem sechsstelligen Hexadezimalcode voraus. Jedes Paar (gg, bb,

) repr?sentiert die rot-, grün- und blauen Komponenten, die zwischen 00 (0 Dezimal) bis FF (255 Dezimal) reichen. Zum Beispiel:

p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}

<p>

Transparenz kann mit achtstelligen Hex-Codes hinzugefügt werden:

#rrggbbaa

<p> aa

repr?sentiert den Alpha -Kanal (00 bis ff, Mapping auf 0,0 bis 1,0).

p {
  color: #a7bd2d68;
}

<p> rgba(167, 189, 45, 0.408) Dies entspricht

. <p>

HSL -Farbmodell

<p> HSL (Farbton, S?ttigung, Leichtigkeit) ist ein Farbmodell, das Grafikdesigner bekannt ist. Die Funktion hsl() verwendet:

p {
  color: red;
}

<p> hue repr?sentiert die Position der Farbe am Farbrad (0 bis 360 Grad).

<p>

<p> saturation (0% bis 100%) zeigt die Intensit?t der Farbe an (0% ist grau, 100% ist die volle Farbe).

<p>

<p> lightness (0% bis 100%) bestimmt die Menge an zugesetztem Schwarz oder Wei? (0% ist schwarz, 100% wei?).

<p>

<p> hsla() fügt einen Alpha -Kanal für Transparenz hinzu:

p {
  background-color: darkorange;
}

rgb(<red>, <green>, <blue>)

<p> Dies entspricht #a7bd2d68 und rgba(167, 189, 45, 0.408).

Weitere Erkundung

• Multi-S?ulen-Layouts mit CSS
erstellen
• Mastering CSS -Gitterlayouts
• Flexbox -Layouts mit CSS
erstellen

Das obige ist der detaillierte Inhalt vonErforschen von Farben in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!