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 und ::first-line.
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