TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

CSS-Farben-Tutorial für Anfänger

18

Farben machen die Webseite aussagekräftig. Die Seite wird ohne verschiedene Farben schlicht und langweilig aussehen. Sie können zwei Arten von Farbeigenschaften mit CSS in einer Webseite verwenden. Eine davon ist die Vordergrundfarbe (im Allgemeinen als Farbe), um die Farbe des Textes oder der Schriftart zu ändern. Zweitens ist die Hintergrundfarbe, um verschiedenen HTML-Elementen eine Hintergrundfarbe hinzuzufügen. In diesem Tutorial erfahren Sie, wie Sie CSS-Farbeigenschaften mit verschiedenen Attributen verwenden.

Ändern der Textfarbe in CSS

Nehmen wir ein Beispiel für das Ändern der Farbe eines Absatzelements

zu rot. Sie können dies mit der folgenden Stildefinition in CSS tun:

p { color: red; }

Im Browser wird folgendes Ergebnis ausgegeben:

Dies ist ein roter Absatz.

Hintergrundfarben in CSS ändern

Sie können die Hintergrundfarbe jedes HTML-Elements ändern, indem Sie die folgende CSS-Stildefinition verwenden:

p { background-color:red;color:white; }

Es wird das folgende Ergebnis erzeugen:

Dies ist ein roter Absatz.

Beachten Sie, dass wir weiße Textfarbe verwendet haben, damit sie mit rotem Hintergrund gut lesbar ist.

Farben in CSS definieren

In den obigen Beispielen haben wir rote und weiße Farben mit dem Namen verwendet. Sie können Millionen von Farben erstellen, indem Sie die drei Grundfarben Rot, Blau und Grün kombinieren. Es ist nicht möglich sich den Namen der Farben zu merken und auch die meisten Farben haben keinen wirklichen Namen. Um die Verwendung zu vereinfachen, bietet CSS folgende Möglichkeiten, den Farbwert zu definieren:

  • Namen für Farben wie Rot, Grün oder Weiß
  • Verwendung einer Kombination aus roten, grünen und blauen Dezimalwerten wie rgb(20,50,200)
  • Verwenden von hexadezimalen Werten für Rot, Grün und Blau wie #ffffff
  • Prozentwert für rote, blaue und grüne Farben wie rgb (10%,80%,25%)
  • Verwendung von Farbton, Sättigung und Helligkeit wie hsl (0,80 %, 70 %)
  • Hinzufügen von Deckkraft zu RGB-Werten wie rgba(0,0,0,0.8)
  • Hinzufügen von Deckkraft zu HSL-Werten wie hsla(200,75%90%0,6)

Verwenden von Farbnamen in CSS

Wir haben bereits gesehen, wie Name in CSS-Eigenschaften für Farbe und Hintergrund verwendet wird. Es gibt nur etwa 150 Farbnamen, die Browser identifizieren können. Wir empfehlen Ihnen, Zahlen anstelle von Namen für Farben zu verwenden. Sie können sich in diesem Artikel auch die Farbcodes für beliebte Social-Networking-Sites ansehen.

Verwenden von RGB-Farben in CSS

Bei der RGB-Methode werden rote, blaue und grüne Farben mit Dezimalzahlen im Bereich von 0 bis 255 angegeben. Tomatenfarbe wird beispielsweise als rgb(255,99,71) angegeben.

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

Im Browser wird folgendes Ergebnis ausgegeben:

Dieser Text hat einen tomatenfarbenen Hintergrund mit dem RGB-Wert als rgb(255,99,71).

Sie können mehr als 16 Millionen Farben erstellen, indem Sie die drei Basisfarbwerte variieren. Achten Sie jedoch darauf, die richtige Textfarbe zu verwenden, damit sie leicht zu lesen ist. Am besten wählen Sie websichere Farben wie flache UI-Farben für Ihre Website.

Verwenden von hexadezimalen Farbwerten

Die Tomatenfarbe rgb(255,99,71) kann in einen äquivalenten Hexadezimalwert als FF6347 umgewandelt werden. Dies ist eine bloße Konvertierung von 255 in FF, 99 in 63 und 71 in 47. Sie können Farbkonverter-Tools verwenden, um zwischen RGB- in Hex-Codes umzuwandeln.

Sie können hexadezimale Farbwerte in CSS wie folgt verwenden:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Das "padding:15px;" wird verwendet, um dem Textinhalt innerhalb des

Element. Im Browser wird folgendes Ergebnis ausgegeben:

Dieser Text hat einen tomatenfarbenen Hintergrund mit dem Hex-Code-Wert als #FF6347. Denken Sie daran, das #-Symbol vor dem Hex-Code-Wert zu verwenden und die Textfarbe als #FFFFFF zu verwenden. Außerdem führen sowohl der kleine Fall #ff6347 als auch der große Fall #FF6347 zum gleichen Ergebnis.

Verwenden von RGB-Werten als Prozentsatz

Anstelle von Dezimalzahlenbereichen von 0 bis 255 können Sie auch den Prozentwert für Rot, Grün und Blau angeben.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Es wird das folgende Ergebnis erzeugen:

Dieser Text hat einen tomatenfarbenen Hintergrund mit dem Hex-Code-Wert als #FF6347. Denken Sie daran, das #-Symbol vor dem Hex-Code-Wert zu verwenden. Auch das kleine Gehäuse #ff6347 und das große Gehäuse #FF6347 führen zum gleichen Ergebnis.

Hinzufügen von Deckkraft zu RGB-Farben

In CSS3 haben Sie die Möglichkeit, den Alpha- oder Deckkraftwert für die Farben anzugeben. Als vierter Wert wird der Alpha-Wert als Dezimalzahl zwischen 0,0 bis 1,0 addiert. Der Wert 0 steht für vollständig transparent, was einer Deckkraft von 0 % entspricht, und 1,0 bedeutet, dass die Deckkraft bei 100 % Deckkraft liegt.

Unten ist die Syntax für die Verwendung des Alpha-Werts in RGB-Farbe mit 20% Deckkraft:

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

Lassen Sie uns die rote Farbe mit 20 %, 40 %, 60 %, 800 % und 100 % der Deckkraftwerte darstellen, um sie verständlicher zu machen.

CSS-Farben-Tutorial für Anfänger

Denken Sie daran, dass es auch eine separate CSS-Eigenschaft namens „opacity:” gibt, die auch für den gleichen Zweck verwendet werden kann. Der Vorteil der Deckkraft ist, dass sie auch auf Bildern verwendet werden kann. Es wird jedoch nicht von allen Browsern unterstützt. Im Folgenden erfahren Sie, wie Sie die Deckkraft-Eigenschaft separat verwenden können:

p { background-color: rgb(255,0,0); opacity: 0.5; }

Verwenden von HSL-Farben in CSS

CSS3 hat eine zusätzliche Option, um eine Farbe mit der HSL-Methode zu definieren. HSL steht für Farbton, Sättigung, Helligkeit und hat drei Werte:

  • Der Farbton ist ein Grad, der in einem Farbkreis mit Referenzen wie 0 = Rot, 120 = Grün und 240 Blau angezeigt wird.
  • Die Sättigung ist ein prozentualer Grauwert in einer Farbe.
  • Helligkeit ist ein Prozentwert von hell oder dunkel, wobei 0 % dunkel (schwarz) und 100 % hell (weiß) sind.

Unten ist ein Beispiel für die Erstellung eines grünen Hintergrunds mit HSL-Farbe in CSS:

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

HSL mit Opazität

Ähnlich wie bei RGBA können Sie HSL-Farben auch als vierten Wert Deckkraft hinzufügen. Die Deckkraft oder Alpha wird in einer Dezimalzahl zwischen 0.0 und 1.0 angegeben, wobei 0.0 für vollständig transparent und 1.0 für opak steht. Unten sehen Sie ein Beispiel für das Erstellen einer grünen Farbe mit 50 % Deckkraft unter Verwendung der HSLA-Deklaration in CSS.

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

Die folgenden Kästchen zeigen die grüne Farbe auf verschiedenen Alpha-Stufen:

CSS-Farben-Tutorial für Anfänger

Vollständiges Beispiel für die Verwendung von Farben in CSS

Bis jetzt haben wir verschiedene Möglichkeiten gesehen, Farben in CSS zu definieren. Lassen Sie uns ein Beispiel in voller Länge zum Erstellen von Vordergrund- und Hintergrundfarben zeigen:

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

Das Endergebnis wird wie folgt angezeigt:

Hier ist ein Absatzelement.

Dies ist eine H2-Überschrift.

Hier ist ein weiterer Absatz.
Dies ist hervorgehobener Text innerhalb des Absatzes.
Dies ist hervorgehobener Text außerhalb des Absatzes.

  • Wenn Sie mehrere Farben in CSS für dasselbe Element definieren, hat die neueste Vorrang vor allen vorherigen Deklarationen. Im obigen Beispiel hat der Absatz aus diesem Grund die Farbe #ffffff.
  • Bestimmte Stile haben Vorrang vor dem übergeordneten oder generischen Stil. Die h1-Farbe ist #008754 und nicht gelb.
  • Sie können auch die Hintergrund-Kurzschrift-Eigenschaft verwenden, um die Hintergrundfarbe zu definieren.

Wenn die Hintergrundfarbe nicht erwähnt wird, hat das Element einen transparenten Hintergrund. Da Browser einen weißen Hintergrund verwenden, werden Sie feststellen, dass die meisten Seiten im Web einen weißen Hintergrund haben. Tatsächlich sind die Elemente der Seiten mit weißem Hintergrund deklariert, um eine ordnungsgemäße Anzeige zu gewährleisten, da Benutzer die Hintergrundfarbe des Browsers ändern können.

Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen