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 (en-US) und ::first-line (en-US). |
Vererbt | Ja |
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) . |
Animationstyp | Farbe |
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
- Der
<color>
Datentyp - Weitere Farbeigenschaften:
background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
(en-US),text-shadow
,caret-color
(en-US),column-rule-color
undcolor-adjust
(en-US)