CSS color-Eigenschaft
Die color-Eigenschaft beschreibt die Farbe des Textinhalts und der Textdekorationen. Eine Hintergrundfarbe kann mit einer Textfarbe kombiniert werden, um den Text gut lesbar zu machen. Webfarben finden Sie in unserem Abschnitt HTML-Farben und können Ihre bevorzugten Farben mit unserem Farbauswahl-Tool ausprobieren. Der Standardwert dieser Eigenschaft ist currentcolor.
| Anfangswert | currentcolor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Ja. |
| Animierbar | Ja. Die Farbe ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.color = "#1c87c9"; |
Syntax
Syntax der CSS color-Eigenschaft
color: color | initial | inherit;Beispiel für die color-Eigenschaft:
Beispiel für die CSS color-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Ergebnis
INFO
Sie können hexadezimale Werte, RGB, HSL oder Farbnamen als Wert für die color-Eigenschaft festlegen. Hinweis: Der Anfangswert ist currentcolor, was bedeutet, dass er die Textfarbe vom Elternelement erbt.
Beispiel für die color-Eigenschaft mit einem benannten Farbwert:
Beispiel für die CSS color-Eigenschaft mit benanntem Farbwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Beispiel für die color-Eigenschaft mit einem hexadezimalen Wert:
Beispiel für die CSS color-Eigenschaft mit hexadezimalem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Beispiel für die color-Eigenschaft mit einem RGB-Wert:
Beispiel für die CSS color-Eigenschaft mit RGB-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Beispiel für die color-Eigenschaft mit einem HSL-Wert:
Beispiel für die CSS color-Eigenschaft mit HSL-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| color | Beschreibt die Farbe des Textes und der Textdekorationen. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Wie lauten die drei Möglichkeiten, Farben in CSS gemäß dem Inhalt der angegebenen URL anzugeben?