nach oben gehen
von: Steffen Domaschke - veröffentlicht: 17.08.2021
Webseiten Netz
css3-logo

CSS lernen - Farben im CSS

In diesem Tutorial lernen Sie die verschiedenen Methoden zum Definieren von Farbwerten in CSS kennen.

Webseiten Netz

Einstellen der Farbeigenschaft

Die color-Eigenschaft definiert die Textfarbe (im Allgemeinen auch die Vordergrundfarbe) eines Elements. Im body-Selektor definiert color die Standardtextfarbe für die gesamte Seite. Schauen Sie sich folgendes Beispiel an:


body {
    color: #ff5722;
}

Achtung: Die color-Eigenschaft erbt normalerweise den Farbwert von ihrem übergeordneten Element(Ausnahme sind hier Ankerelemente). Wenn Sie beispielsweise wie oben color für das body-Element angeben, wird es automatisch an die Überschriften, Absätze usw. weitergegeben.

Definition von Farbwerten

Farben in CSS werden am häufigsten in den folgenden Formaten angegeben:

  • ein Farbschlüsselwort - wie red, blue, white, transparent usw.
  • ein HEX-Wert - wie #ff0000, #00ff00 usw.
  • ein RGB-Wert - wie rgb(255, 0, 0)
  • Mit der Einführung von CSS3 sind weitere Farbformate wie z.B: HSL, HSLA, RGBA hinzugekommen, welche eine Transparenz von Farbdefinitionen erlauben. Wir werden sie im später im CSS3-Farbkapitel genauer kennenlernen.

    Bleiben wir zunächst bei den grundlegenden Methoden zum Definieren der Farbwerte:

    Farbschlüsselwörter

    CSS definiert die wenigen Farbschlüsselwörter, mit denen Sie Farbwerte auf einfache Weise angeben können.

    Diese grundlegenden Farbschlüsselwörter sind: black, blue, aqua, fuchsia, gray, navy, olive, purple, red, green, lime, maroon, silver, teal, white und yellow. Bei den Farbnamen wird die Groß-/Kleinschreibung nicht beachtet.

    Beispiel:

    
    h1 {
        color: red;
    }
    
    

    Moderne Webbrowser unterstützen viel mehr Farbnamen, als im CSS-Standard definiert sind. Sicherheitshalber sollten Sie aber HEX odr RGB-Farben verwenden.

    HEX-Farbwerte

    Hex (kurz für Hexadezimal) ist bei weitem die am häufigsten verwendete Methode zum Definieren von Farben im Web.

    Hex stellt Farben mit einem sechsstelligen Code dar, dem ein Rautezeichen vorangestellt ist, wie #rrggbb, wobei rr, gg, und bb die rote, grüne bzw. blaue Komponente der Farbe darstellt.

    Der Wert jeder Komponente kann von 00 (keine Farbe) und FF (Vollfarbe) in hexadezimaler Schreibweise oder 0 und 255 in dezimaler äquivalenter Schreibweise variieren. Somit repräsentiert #ffffff die weiße Farbe und #000000 die schwarze Farbe.

    Beispiel der Schreibweise:

    
    h1 {
        color: #ffa500;
    }              
    
    

Beachte: Hexadezimal oder Hex bezieht sich auf ein Nummerierungsschema, das 16 Zeichen als Basis verwendet. Es verwendet die Zahlen 0 bis 9 und die Buchstaben A, B, C, D, E und F, die den Dezimalzahlen 10, 11, 12, 13, 14 bzw. 15 entsprechen. Erfahre hier mehr über das Hexadezimalsystem

Tipp: Wenn der Hexadezimalcode einer Farbe Wertepaare enthält, kann er auch in Kurzschreibweise geschrieben werden, um zusätzliche Eingaben zu vermeiden, z.B. kann der Hex-Farbwert #ffffff auch als #fff, #000000 als #000, geschrieben werden.

Definition von Farbwerten per RGB

Farben können im RGB-Modell (Rot, Grün und Blau) unter Verwendung der rgb()-Notation definiert werden. Die rgb()-Funktion akzeptiert drei durch Kommas getrennte Werte, die den Rot-, Grün- und Blauanteil der Farbe angeben. Diese Werte werden üblicherweise als Ganzzahlen zwischen 0 und 255 angegeben, wobei 0 keine Farbe und 255 volle oder maximale Farbe darstellt. Im folgenden Beispiel wird dieselbe Farbe wie im vorherigen Beispiel angegeben, jedoch in RGB-Notation.


h1 {
    color: rgb(255, 165, 0);
}             

Hinweis: Sie können RGB-Werte auch rgb()in Prozent innerhalb der Funktion angeben, wobei 100 % Vollfarbe und 0 % (nicht eine einfache 0) keine Farbe darstellen. Sie können beispielsweise die rote Farbe entweder als rgb(255, 0, 0) oder rgb(100%, 0%, 0%) angeben.

Einfluss der Farbeigenschaft auf Ränder und Konturen

Die color-Eigenschaft gilt nicht nur für Textinhalte, sondern für alles im Vordergrund, was einen Farbwert annehmen kann. Wenn zum Beispiel border-color oder outline-color nicht explizit für das Element definiert wurde, wird stattdessen der Farbwert verwendet. Schauen wir uns ein Beispiel an:


p.border {
    color: #0000ff;
    border: 2px solid;
}
p.outline {
    color: #00ff00;
    outline: 2px solid;
}            

Internetagentur SEO Lausitz Webdesign, Webseiten erstellen, Betreuung und Wartung von Webseiten, WP Support Anonym hat 5,00 von 5 Sternen 13 Bewertungen auf ProvenExpert.com

Kontaktieren Sie uns - wir sind gern für Sie da!

css, webdesign, css3, css tutorial, css farben, css lernen, webdesign