Text & Hintergrund Farbe

In diesem Artikel wird erläutert, wie einfach es ist, Text- und Hintergrundfarben auf Ihre Webseiten anzuwenden. Beginnen wir mit der Textfarbe.

Ändern der Textfarbe

Wenn Sie die Kapitel über Text und Schrift in CSS bereits gelesen haben, könnten Sie versucht sein, den Namen der Eigenschaft zu erraten, die zur Steuerung der Textfarbe verwendet wird - wie steht es mit der Schriftfarbe oder der Textfarbe aus? Nein, da das, was wir ändern, häufig als Vordergrund (Text) und Hintergrund bezeichnet wird, wird die CSS-Eigenschaft, mit der die Farbe des Texts gesteuert wird, einfach als Farbe bezeichnet.

Also, wie können wir es benutzen? Es ist sehr, sehr einfach - schauen Sie sich dieses Beispiel an:

<p style="color: Red;">Red text</p>
<p style="color: Blue;">Blue text</p>

Und das ist alles was Sie brauchen. Wie Sie sehen, verwende ich sogenannte Named Colors. CSS hat eine ganze Reihe davon, aber natürlich ist nicht jede Farbe auf der Welt mit einem Namen versehen - dazu später mehr.

Ändern der Hintergrundfarbe

Ebenso einfach ist das Arbeiten mit der Hintergrundfarbe. Zu diesem Zweck haben wir eine Eigenschaft namens background-color. Damit können wir die Hintergrundfarbe eines Elements genauso einfach ändern wie die Textfarbe, und die beiden Eigenschaften können natürlich kombiniert werden:

<p style="background-color: Silver; color: Red;">Red text</p>
<p style="background-color: Gold; color: Blue;">Blue text</p>

Wie Sie sehen, passen die beiden Eigenschaften gut zusammen, müssen jedoch nicht gleichzeitig verwendet werden, wenn Sie bereits mit der aktuellen Hintergrund- oder Textfarbe zufrieden sind. Da sowohl die Text- als auch die Hintergrundfarben von ihrem übergeordneten Element geerbt werden, können Sie sich in einer Situation befinden, in der Sie nur eines davon verwenden müssten:

<p style="background-color: Silver; color: Red;">
	This is red text and <span style="background-color: Gray;">and this text has a darker background</span>.
</p>

Beachten Sie, dass das span-Element die vom übergeordneten Absatzelement übernommene rote Textfarbe beibehält, während wir die Hintergrundfarbe mit einer dunkleren Variante der silbernen Farbe überschreiben.

Zusammenfassung

Das Ändern der Text- und Hintergrundfarbe ist mit CSS sehr einfach. Bisher haben wir nur einige grundlegende Beispiele gezeigt, aber um darüber hinaus zu gehen und erweiterte Farbkombinationen zu verwenden, müssen Sie ein bisschen mehr über die Art und Weise wissen, wie Farbwerte mit CSS erstellt werden. Wir werden das im nächsten Kapitel besprechen.