Die Eigenschaft color beschreibt die Farbe des Textinhalts und der Textdekorationen. Die Webfarben finden Sie in der Abteilung HTML-Farben. Versuchen Sie, Ihre bevorzugten Farben mit unserem Farbwähler auszuwählen. Der Standardwert dieser Eigenschaft variiert von Browser zu Browser.
| Anfangswert | Unterschiedlich von Browser zu Browser |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter and ::first-line. |
| Geerbt | Ja |
| Animierbar | Ja, die Farbe ist animierbar. |
| Version | CSS1 |
| DOM Syntax | object.style.color = "#1c87c9"; |
Syntax
color: color | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft color</h2>
<p>Zum Beispiel ist das ein Absatz.</p>
<p class="blue">Das ist ein Absatz mit blauer Farbe.</p>
<p>Zum Beispiel ist das ein Absatz.</p>
</body>
</html>
Sie können hexadezimale, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft color einstellen.
Ein weiteres Beispiel, wo der Wert eine benannte Farbe ist:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft color</h2>
<p>Zum Beispiel ist das ein Absatz.</p>
<p class="blue">Das ist ein Absatz mit dem Farbnamen blau.</p>
<p>Zum Beispiel ist das ein Absatz.</p>
</body>
</html>Ein weiteres Beispiel, wo ein hexadezimaler Wert für die Eigenschaft color eingestellt ist:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft color</h2>
<p>Zum Beispiel ist das ein Absatz.</p>
<p class="color">Das ist ein Absatz mit hexadezimalem Farbenwert (#8ebf42 für grün).</p>
<p>Zum Beispiel ist das ein Absatz.</p>
</body>
</html>Ein anderes Beispiel für die Eigenschaft color mit einem RGB-Wert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft color</h2>
<p>Zum Beispiel ist das ein Absatz.</p>
<p class="color">Das ist ein Absatz mit einem RGB-Farbenwert.</p>
<p>Zum Beispiel ist das ein Absatz.</p>
</body>
</html>Ein weiteres Beispiel für die Eigenschaft color mit einem HSL-Wert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.color{
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft color</h2>
<p>Zum Beispiel ist das ein Absatz.</p>
<p class="color">Das ist ein Absatz mit einem HSL-Farbenwert.</p>
<p>Zum Beispiel ist das ein Absatz.</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| color | Der Wert definiert die Farbe des Textes und die Textdekoration. Die Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. |
| initial | Es setzt die Eigenschaft auf den Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| 1.0+ | 12.0+ | 1.0+ | ✓ | ✓ |
Übe dein Wissen
Was ist die CSS-Eigenschaft 'color'?
Richtig!
Falsch!