Erforschen von Farben in CSS

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

<code class="language-css">p {
  color: red;
}</code>

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

den Hintergrund des Elements:

<code class="language-css">p {
  background-color: darkorange;
}</code>

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

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

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

<code class="language-css">p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}</code>

<p>

Kombination verschiedener Intensitäten schafft verschiedene Farben:

<code class="language-css">p {
  color: rgb(168, 189, 45);
}</code>

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

<code class="language-css">rgba(<red>, <green>, <blue>, <alpha>)</code>

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

<code class="language-css">p {
  color: rgba(167, 189, 45, 0.408);
}</code>

<p>

Hex -Farbmodell <p>

Sechskantfarben Verwenden Sie Hexadezimalnotation:

<code class="language-css">#rrggbb</code>

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

<code class="language-css">p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}</code>

<p>

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

<code class="language-css">#rrggbbaa</code>

<p> aa

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

<code class="language-css">p {
  color: #a7bd2d68;
}</code>

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

<code class="language-css">p {
  color: red;
}</code>

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

<code class="language-css">p {
  background-color: darkorange;
}</code>

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

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