Erforschen von Farben in CSS-CSS-Tutorial-php.cn

Erforschen von Farben in CSS

Mary-Kate Olsen

Freigeben： 2025-01-30 00:10:09

Original

815 Leute haben es durchsucht

Mastering CSS -Farben: Ein umfassender Leitfaden

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.

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

ändern:

p {
  color: red;
}

Nach dem Login kopieren

background-color In ähnlicher Weise ändert die Eigenschaft

den Hintergrund des Elements:

p {
  background-color: darkorange;
}

Nach dem Login kopieren

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 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>)

Nach dem Login kopieren

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; */
}

Nach dem Login kopieren

Kombination verschiedener Intensitäten schafft verschiedene Farben:

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

Nach dem Login kopieren

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. Exploring Colors in CSS

rgba() Die Funktion rgb() erweitert sich

durch Hinzufügen eines Alpha -Kanals:

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

Nach dem Login kopieren

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);
}

Nach dem Login kopieren

Hex -Farbmodell

Sechskantfarben Verwenden Sie Hexadezimalnotation:

#rrggbb

Nach dem Login kopieren

# 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; */
}

Nach dem Login kopieren

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

#rrggbbaa

Nach dem Login kopieren

aa

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

p {
  color: #a7bd2d68;
}

Nach dem Login kopieren

rgba(167, 189, 45, 0.408) Dies entspricht

.

<🎜>

HSL -Farbmodell

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

p {
  color: red;
}

Nach dem Login kopieren

hue repräsentiert die Position der Farbe am Farbrad (0 bis 360 Grad).

saturation (0% bis 100%) zeigt die Intensität der Farbe an (0% ist grau, 100% ist die volle Farbe).

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

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

p {
  background-color: darkorange;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Weitere Erkundung

Multi-Säulen-Layouts mit CSS
Mastering CSS -Gitterlayouts
Flexbox -Layouts mit CSS

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!