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.

Initialwert	Variiert von einem Browser zum anderen
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Medien	visuell
Berechneter Wert	Falls 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)`.
Animierbar	ja, als Farbe
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
wobei 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Grundlegende Unterstützung	1.0	1.0 (1.7 oder früher)	3.0	3.5	1.0

Merkmal	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	1.0	1.0 (1)	6.0	6.0	1.0

Siehe auch

Der <color> Datentyp