color

├ťbersicht

Die CSS Eigenschaft color setzt die Vordergrundfarbe des Textinhalts eines Elements und seiner Dekorationen. Sie hat keinen Einfluss auf andere Charakteristiken des Elements; sie sollte eigentlich text-color genannt werden, jedoch wurde sie aus historischen Gr├╝nden und ihrem Auftreten in CSS Level 1 so genannt.

Beachte, dass der Farbwert eine gleichm├Ą├čige Farbe sein muss, welche seit CSS3 einen Transparenzwert beinhalten kann. Sie kann kein <gradient> sein, welcher in CSS ein <image> ist.

InitialwertVariiert von einem Browser zum anderen
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US).
VererbtJa
Berechneter WertFalls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schl├╝sselwort wird zu rgb(0,0,0).
AnimationstypFarbe

Syntax

/* Eine CSS Level 1 Farbe */
color: red;

/* Die einzige in CSS Level 2 (Revision 1) hinzugef├╝gte Farbe */
color: orange;

/* CSS Level 3 Farbe, manchmal SVG- oder X11-Farbe genannt */
color: antiquewhite;

/* Die Farbe lindgr├╝n in der 3-Zeichen-Notation */
color: #0f0;

/* Die Farbe lindgr├╝n in der 6-Zeichen-Notation */
color: #00ff00;

/* Eine Farbe, die die verf├╝gbaren funktionalen Notationen verwendet */
color: rgba(34, 12, 64, 0.3);

/* Verwende die Farbe des direkten Vorfahren des Elements */
color: currentcolor;

/* Globale Werte */
color: inherit;
color: initial;
color: unset;

Werte

<color>
Ist ein <color> Wert, der die Farbe von Textelementen innerhalb des Elements bestimmt.

Formale Syntax

<color>

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Beispiele

Die folgenden Zeilen sind Beispiele, wie der Text des Elements rot eingef├Ąrbt werden kann:

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255, 0, 0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }

Spezifikationen

Spezifikation Status Kommentar
CSS Transitions
Die Definition von 'color' in dieser Spezifikation.
Arbeitsentwurf Definiert color als animierbar.
CSS Color Module Level 3
Die Definition von 'color' in dieser Spezifikation.
Empfehlung Markiert Systemfarben als veraltet; f├╝gt SVG-Farben hinzu; f├╝gt die funktionalen Notationen rgba(), hsl(), hsla() hinzu.
CSS Level 2 (Revision 1)
Die Definition von 'color' in dieser Spezifikation.
Empfehlung F├╝gt die Farbe orange und die Systemfarben hinzu.
CSS Level 1
Die Definition von 'color' in dieser Spezifikation.
Empfehlung Urspr├╝ngliche Definition

Browser Kompatibilit├Ąt

BCD tables only load in the browser

Siehe auch