Farben in CSS

Farben spielen eine sehr wichtige Rolle bei der Gestaltung einer Webseite. In CSS werden die Farben am häufigsten verwendet, um den Hintergrund, den Text und den Rand zu färben. Hier ist der Punkt, wie man die Farbe in CSS einstellen/definiert?

Also! In CSS können Farben durch verschiedene Methoden definiert werden, z. B. durch die Verwendung vordefinierter Farbnamen, hexadezimale Werte usw. In diesem Artikel werden die folgenden Methoden erörtert, um die Hintergrundfarbe, die Textfarbe und die Randfarben festzulegen:

• Vordefinierte Farbnamen wie Rot, Grün, Orange usw.
• Hexadezimale Farbwerte wie #rrggbb, #00ff00 usw.
• RGB -Farbwerte wie RGB (255, 0, 0); RGB (0, 255, 255) usw.
• RGBA -Farbwerte wie RGB (255, 255, 0, 0.7), RGB (255, 0, 0, 0, 0.1) usw.
• HSL -Farbwerte wie HSL (0, 100%, 50%), HSL (240, 100%, 50%) usw
• HSLA -Farbwerte wie HSL (0, 100%, 50%, 0.5), HSL (240, 100%, 50%, 0.2) usw

Alle oben genannten Farbkonventionen werden mit Beispielen erörtert. Beginnen wir diese Reise mit den vordefinierten Farbnamen.

CSS vordefinierte Farbnamen

CSS liefert zahlreiche vordefinierte Farbnamen beispielsweise Rot, Gelb, Grün usw. Diese Farbnamen können zum Styling des Hintergrunds, des Textes usw. verwendet werden.

Lassen Sie uns das Konzept der vordefinierten Farbnamen mit dem folgenden Beispiel verstehen

Beispiel

Nehmen wir an, wir haben eine

Element und wir möchten seine Textfarbe mit vordefinierten Farbwerten stylen:

Html

Willkommen bei LinuxHint.com

CSS

P
Farbe blau;

Weisen Sie den Farbnamen einfach der Farbeigenschaft zu und erhalten daher die folgende Ausgabe:

CSS -Hexadezimalfarbe

Die hexadezimalen Farben werden durch ein "definiert"#Symbol mit sechs Ziffern Code. Es dauert Werte von 0 bis 15.

Da Hexadezimal ein sechsstelliger Code ist, i ist.E #e3e3e3, die ersten beiden Slots für die rote Farbe, die nächsten zwei für Grün und die letzten beiden für blaue Farbe. Die Kombination dieser sechs Ziffern gibt eine neue Farbe E an e.G. #Ffff00 repräsentiert die gelbe Farbe.

Beispiel

Die untergegebenen Linien setzen die grüne Hintergrundfarbe auf

Element mit hexadezimalen Werten:

Html

Willkommen bei LinuxHint.com

CSS

P
Hintergrundfarbe: #00ff00;

Oben Code bietet die folgende Ausgabe:

CSS RGB -Farbe

Die RGB -Farbe ist Kombination aus Rot, Grün und Blau. Die Funktion rgb () nimmt Werte von 0 bis 255 an. Das Angeben verschiedener Werte in der Funktion rgb () führt zu verschiedenen Farbkombinationen. Zum Beispiel erzeugt RGB (255, 0, 0) die rote Farbe.

Beispiel

Das folgende Stück Code gibt den RGB -Wert an, um die graue Textfarbe des Absatzes festzulegen:

Html

Willkommen bei LinuxHint.com

CSS

P
Hintergrundfarbe: RGB (128, 128, 128);

Der Ausgang legt die graue Hintergrundfarbe fest:

CSS RGBA -Farbe

Der Transparenzfaktor kann zu den RGB -Farben hinzugefügt werden, indem der Alpha -Wert darin hinzugefügt wird. Der Alpha -Parameter nimmt die Werte zwischen 0 und 1. Der niedrigere Wert macht die Farbe transparent, während der höhere Wert die Farbe undurchsichtig macht. Zum Beispiel 0 addieren 0.0 macht die Farbe transparent, während 1.0 macht die Farbe vollständig undurchsichtig.

Beispiel

Fügen wir den Alpha -Parameter im obigen Beispiel hinzu.

Html

Willkommen bei LinuxHint.com

CSS

P
Hintergrundfarbe: RGBA (128, 128, 128, 0.2);

Im obigen Code 0.2 wird als Wert des Alpha -Parameters hinzugefügt, wodurch die Hintergrundfarbe transparent ist:

CSS HSL Farbe

HSL ist ein Abkürzung für Farbton, Sättigung und Leichtigkeit.

• Der Begriff Hue definiert den Engel im Farbrad.
• Sättigung definiert die Intensität der Farbe.
• Leichtigkeit gibt die Leichtigkeit an.

Leichtigkeit und Sättigung werden durch das % Zeichen dargestellt.

Beispiel

Lassen Sie uns den Hintergrund von färben

Element unter Verwendung von HSL -Farbwerten.

Html

Willkommen bei LinuxHint.com

CSS

P
Hintergrundfarbe: HSL (334, 80%, 56%);

Der obige Code setzt den rosa Hintergrund der

Element.

CSS HSLA -Farbe

Die HSL -Farbkonvention kann auf die HSLA ausgedehnt werden. Das A repräsentiert den Alpha -Parameter, der verwendet wird, um die Transparenzeffekte auf die Farbe hinzuzufügen.

Beispiel

Erweitern wir das vorherige Beispiel ein wenig und fügen Sie auch den Alpha -Parameter hinzu:

Html

Willkommen bei LinuxHint.com

CSS

P
Hintergrundfarbe: HSL (334, 80%, 56%, 0.3);

Der obige Code zeigt die folgende Ausgabe an:

Abschluss

CSS liefern mehrere Farben und Methoden, um die Farbe eines Elements wie vordefinierte Farbnamen, die Kombination von Werten zwischen 0 und 255 innerhalb des RGB () oder die Werte für Farbton, Sättigung und Licht zu verwenden. Darüber hinaus kann ein Alpha -Parameter mit RGB und HSL verwendet werden, um den Transparenzeffekt auf die Farbe hinzuzufügen. In diesem Artikel stellte ein umfassender und ausgearbeiteter Überblick über die CSS-Farben und verschiedene Methoden zum Einstellen der Farben in CSS vor.