Zusammenfassung der Beschreibung des CSS-Farbsystems

Apropos CSS-Farbe, jeder kennt sie. Dieser Artikel ist meine persönliche systematische Zusammenfassung und mein Wissen über das CSS-Farbsystem, das ich gerne mit Ihnen teilen möchte.

Verwenden Sie zunächst ein Bild, um intuitiv zu spüren, welche Inhalte in Bezug auf CSS-Farben grob abgedeckt sind.

Der folgende Inhalt wird wahrscheinlich in dieser Reihenfolge sein. Der Inhalt ist sehr einfach. Sie können optional zum entsprechenden Inhalt springen.

Farbschlüsselwörter

Nun, die Farbschlüsselwörter sind leicht zu verstehen. Es stellt einen bestimmten Farbwert dar und unterscheidet nicht zwischen Groß- und Kleinschreibung. Beispielsweise ist das Rot in color:red ein Farbschlüsselwort.

Vor CSS3, also CSS Standard 2, gab es insgesamt 17 Grundfarben, nämlich:

Und in CSS3 das Schlüsselwort color ist Es wurde stark auf 147 erweitert. Das Folgende ist nur eine unvollständige Liste:

Es ist zu beachten, dass unbekannte Schlüsselwörter CSS-Eigenschaften ungültig machen.

Der Test hier test3 soll veranschaulichen, dass bei der Übergabe des falschen Farbschlüsselworts die CSS-Eigenschaft ungültig wird, anstatt stattdessen das aktuelle currentColor zu verwenden. currentColorEs wird weiter unten erklärt.

Welche Attribute können die Farbe festlegen?

Alle Stellen, an denen Farbwerte verwendet werden können, können durch Farbschlüsselwörter ersetzt werden, also in CSS, wo können Farbwerte verwendet werden?

Die Farbe des Textescolor:red

Die Hintergrundfarbe des Elementsbackground-color:red (einschließlich verschiedener Farbverläufe)

Der Rand des Elementsborder-color:red

-Element Der Boxschatten oder Textschatten box-shadow:0 0 0 1px red|text-shadow:5px 5px 5px red

wird in einigen Filtern verwendet filter: drop-shadow(16px 16px 20px red)

<hr />Die Farbe der horizontalen Linie

Einige können nicht direkt festgelegt werden, sondern können vom currentColor-Attribut des aktuellen Elements abgerufen oder geerbt werden: dem Alternativtext von

<img>. Das heißt, wenn das Bild nicht angezeigt werden kann, erbt der Text, der anstelle des Bildes erscheint, diesen Farbwert.

Die Punkte von ul-Listenelementen

Ich werde keine Beispiele für einige der häufigeren Elemente nennen. Lassen Sie uns über den Alternativtext von <hr/> und <img> und die Punkte von sprechen ul-Listenelemente.

Nach dem Testen kann der Farbwert von <hr/> ausgedrückt werden, indem der Farbwert seines Randes festgelegt wird. Der Alternativtext von

<img> und die Punkte des ul-Listenelements erben das currentColor-Attribut des aktuellen Elements.

Für die Formularsteuerung <input type="radio"><input type="checkbox"> habe ich keine gute Möglichkeit gefunden, die Farbe direkt zu ändern. Wenn Sie davon wissen, hoffe ich, dass Sie mir einen Rat geben können.

transparent

Transparent bedeutet wörtlich transparent. Es wird verwendet, um eine vollständig transparente Farbe darzustellen, d. h. die Farbe erscheint als Hintergrundfarbe.

kann auch als Abkürzung von rgba(0,0,0,0) verstanden werden.

Es ist erwähnenswert:

Vor CSS3 war das Schlüsselwort transparent keine echte Farbe und konnte nur in background-color und border-color verwendet werden, um A auszudrücken transparente Farbe. In Browsern, die CSS3 unterstützen, wird es als echte Farbe neu definiert und transparent kann überall dort verwendet werden, wo ein color-Wert erforderlich ist, wie zum Beispiel das Farbattribut.

Was nützt dieser Transparenzwert? Lassen Sie uns einfach einige Beispiele auflisten:

transparent wird für Ränder und das Zeichnen von Dreiecken verwendet.

Dies ist die häufigste Verwendung von transparent und wird zum Zeichnen von Dreiecken verwendet.

Wenn Sie die obigen Abbildungen 1 und 2 kombinieren, können Sie sehen, dass Sie mit einem p mit einer Höhe und Breite von 0 dessen Rand festlegen können. Wenn die Rahmenfarbe aller drei Seiten transparent ist, können Sie ein p mit beliebiger Ausrichtung erhalten . Dreieck.

Wie oben erwähnt, ist diese Methode gut kompatibel und kann in vielen Szenarien verwendet werden, da transparent in Rahmen und Hintergrund in Browsern niedrigerer Versionen (IE78) verwendet werden kann.

Transparent wird als Rand verwendet, um den Klick-Hot-Bereich zu vergrößern

Schaltflächen sind ein sehr wichtiger Teil unseres Webdesigns, und das Design der Schaltflächen ist es auch Die Benutzererfahrung hängt eng zusammen. Wenn Sie es Benutzern erleichtern, auf Schaltflächen zu klicken, wird dies zweifellos das Benutzererlebnis verbessern. Insbesondere auf der mobilen Seite sind Schaltflächen normalerweise sehr klein, aber manchmal können wir aufgrund von Designentwurfsbeschränkungen die Höhe und Breite von Schaltflächenelementen nicht direkt ändern. Gibt es derzeit eine Möglichkeit, den Klick-Hotspot der Schaltfläche zu vergrößern, ohne ihre ursprüngliche Größe zu ändern?

Hier können wir es leicht mit Hilfe eines transparenten Randes erreichen (ich habe in einem früheren Artikel geschrieben, dass es auch mit Pseudoelementen erreicht werden kann, border:20px solid transparentwir können schreiben). so:

Versuchen Sie, den Cursor in die Nähe von Btn zu bewegen, und Sie werden feststellen, dass das interaktive Mausreaktionsereignis hover ausgelöst wurde, bevor der farbige Bereich erreicht wurde. Dies kann zum Erweitern der Schaltfläche verwendet werden Auf dem mobilen Endgerät ändert sich die Form der Schaltfläche selbst nicht. So:

Hmm, hier verwenden wir border, um den Mausklickbereich zu erweitern, aber die tatsächliche Situation ist, dass unsere Schaltflächen manchmal Rahmen verwenden müssen, und der Rahmen kann nur einmal festgelegt werden (mehrere Ränder können nicht wie box-shadow und 渐变 festgelegt werden). Wenn Sie diese Methode zu diesem Zeitpunkt noch verwenden müssen, können Sie den inneren Schatten box-shadow verwenden, um eine Randebene zu simulieren, wie folgt:

transparent wird für den Hintergrund verwendet und zeichnet Hintergrundbilder.

transparent wird für den Hintergrund verwendet und kann normalerweise eine Vielzahl von Hintergrundbildern erstellen. Hier ist ein einfaches Beispiel für die Verwendung transparenter Farbverläufe zur Implementierung einer Eckenschnittgrafik:

Verwenden Sie 线性渐变 linear-gradient, um den Wechsel von transparenter Farbe zu Volltonfarbe zu erreichen, und teilen Sie die vier Viertelgrößen (background-size: 50% 50%) auf Grafiken werden miteinander kombiniert, um eine abgeschrägte Grafik zu erzeugen.

Durch die Kombination von Transparenz und Farbverlauf können Sie auch eine Vielzahl wunderbarer Grafiken erstellen. Klicken Sie unten, um zu sehen:

Transparent wird für die Textfarbe verwendet

Mit Box-Shadow und Transparenz auf dem Text können Sie einen leuchtenden Texteffekt erzeugen:

Transparent hat tatsächlich viele Funktionen Jetzt können Sie die Diskussion gerne fortsetzen.

currentColor

Viele Menschen wissen nichts über currentColor. Wie transparent ist es auch ein Schlüsselwort und repräsentiert, wie der Name schon sagt, die aktuelle Farbe. Es stammt aus einem Eigengrundstück oder erbt von seinem Muttergrundstück.

kann einfach als die vom aktuellen CSS-Tag geerbte oder festgelegte Textfarbe verstanden werden, also als der Wert der Farbe.

Wie kann es konkret eingesetzt werden? Gemäß unserem Prinzip, CSS DRY (Don’t Repeat Yourself) zu schreiben, kann die Verwendung dieses Schlüsselworts den Arbeitsaufwand beim Ändern von CSS erheblich reduzieren. Nehmen Sie ein Beispiel:

Im obigen Beispiel habe ich die Farbe nur in Farbe geschrieben und das Attribut currentColor in Rahmen und Boxschatten verwendet. Wie Sie sehen, werden die Farbwerte dieser beiden Attribute auf die in Farbe festgelegten Werte festgelegt. Wenn wir dieselbe Farbleistung verwenden müssen, ist es besser, currentColor zu verwenden, um zukünftige Änderungen zu erleichtern.

currentColor ist jedoch neu in CSS3 und kann von älteren Browsern nicht erkannt werden. Ist es also nicht möglich, es in älteren Browserversionen zu verwenden? Es gibt immer noch einige Sonderfälle:

Wie Sie sehen, habe ich nur die Farbe geschrieben in der Farbe oben und der Rahmen darin ist 1px solid, ebenso wie box-shadow. Es trägt keinen Farbwert, verhält sich aber dennoch wie der Wert von currentColor. Dies liegt daran, dass die Rahmenfarbe und die Schattenfarbe standardmäßig auf die Textfarbe des aktuellen Felds eingestellt sind und der Rahmen eine gute Kompatibilität aufweist und bis IE6 unterstützt werden kann.

Natürlich sind Rahmen und Kastenschatten Sonderfälle, wenn nicht alle Eigenschaften, die einen Farbwert erfordern, standardmäßig den Textwert erben.

Was sind dann die Elementfarbwerte, die das Element erhält oder erbt: der Textinhalt des Elements, der Umriss des Textes, das Rahmenelement, der Boxschatten des Elements, Filter:Drop -shadow()<img>s Alternativtext. Das heißt, wenn das Bild nicht angezeigt werden kann, erbt der Text, der anstelle des Bildes erscheint, diesen Farbwert. Der kleine schwarze Punkt und der Rand von Listenelementen sind in einigen Browsern (z. B. Chrome) die Rahmenfarbe der horizontalen Linie (<hr>). (Ohne den Rand wird die Farbe nicht beeinflusst).

Kompatibilität der aktuellen Farbe

rgb() und rgba()

Werfen wir einen kurzen Blick auf das Farbdarstellungsmodell.

rgb() stellt den Rot-Grün-Blau-Modus (RGB) der Farbe dar, rgba() hat noch ein a, das die Transparenz angibt, mit einem Wert von 0-1.

Das Farbmodell von RGB wird normalerweise durch einen Würfel dargestellt:

Wir wissen, dass wir es normalerweise verwenden, wenn wir keine Abkürzungen verwenden Verwenden Sie hexadezimale Symbole #RRGGBB,

In #RRGGBB steht RR für Rottöne, GG für Grüntöne und BB für Blautöne. Die Werte liegen zwischen 00 und FF. Je größer der Wert, desto dunkler ist die Farbe.

Wenn rgb(RR,GG,BB) verwendet wird, nimmt RR den Wert 0~255 oder Prozent an, 255 entspricht 100 % und F oder FF in hexadezimaler Schreibweise.

Wenn Sie die Bedeutung von rgb() verstehen, ist es tatsächlich sehr einfach, sich häufig verwendete Farbwerte zu merken. So wie der oben erwähnte RR die Tiefe von Rot darstellt, ist es so einfach, wird als Rot dargestellt, ebenso können wir #FF0000 für Grün und #00FF00 für Blau festlegen. #0000FF

Erinnern Sie sich an das Prinzip der Farbüberlagerung:

Wir können uns leicht merken,

Rot- und Blauüberlagerung bedeutet Lila, #FF00FF Überlagerung von Rot und Grün stellt Gelb dar, #FFFF00 Überlagerung von Blau und Grün stellt Cyan dar. #00FFFF

hsl() und hsla()

Zusätzlich zur RGB-Notation können Farben auch mit hsl() dargestellt werden. hsl() ist als Farbton-Sättigungs-Helligkeit (Hue-saturation-lightness) definiert, hsla() hat ein weiteres a, das seine Transparenz angibt, mit einem Wert von 0-1. .

Der Vorteil von HSL gegenüber RGB besteht darin, dass es intuitiver ist: Sie können die gewünschte Farbe abschätzen und sie dann feinabstimmen. Außerdem ist es einfacher, passende Farbkollektionen zu erstellen.

Das Farbmodell von HSL wird normalerweise durch einen Zylinder dargestellt:

Farbton (H) ist das Grundattribut von Farbe, das normalerweise so genannt wird der Farbname, z. B. Rot, Gelb usw. Die Sättigung (S) bezieht sich auf die Reinheit einer Farbe. Je höher sie ist, desto reiner ist die Farbe, und je niedriger sie ist, desto mehr wird die Farbe grau. Sie nimmt einen Wert von 0 bis 100 % an. Wert (V), Helligkeit (L), nehmen Sie 0-100 % an.

Tatsächlich ist es für unser Frontend bequemer, HSL zur Darstellung von Farben zu verwenden.

Nehmen Sie eine Schaltfläche als Beispiel, um den Hintergrundfarbwert der Schaltfläche im Normalzustand darzustellen. Wir hoffen, dass die Hintergrundfarbe beim Schweben dunkler und im aktiven Zustand heller ist. Wenn wir die RGB-Notation verwenden, benötigen wir drei völlig unterschiedliche Farben. Wenn wir jedoch die HSL-Notation verwenden, müssen wir nur den L-Wert (Licht, Helligkeit) des Farbwerts ändern, wenn wir darüber schweben und aktiv sind. Schauen wir uns noch einmal ein Beispiel an, das oben aufgetaucht ist:

Hier

Während ich den Mauszeiger darüber schwebe und aktiv bin, habe ich nur den dritten Wert des HSL-Farbwerts geändert, um den gewünschten Effekt zu erzielen. background:hsl(200, 60%, 60%)

Konvertierung von RGB in HSL

Hier ist ein kleiner Tipp, den manche Leute vielleicht nicht kennen. Während der Entwicklungsphase haben wir nur einen RGB-Wert , aber wenn Sie in einen HSL-Wert konvertieren möchten, können Sie dies ganz bequem mit den Chrome-Entwicklertools tun. Wie unten gezeigt, müssen wir nur den Farbwert auswählen, den wir konvertieren möchten, und die linke Tastatur

gedrückt halten. und klicken Sie auf das Farbdarstellungsfeld, um die Konvertierung durchzuführen: shift

Das Obige ist die vom Herausgeber eingeführte Zusammenfassung des CSS-Farbsystems Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Das obige ist der detaillierte Inhalt vonZusammenfassung der Beschreibung des CSS-Farbsystems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!