HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
View in English Always switch to English
Mit CSS gibt es viele Möglichkeiten, HTML-Elementen Farben zuzuweisen und so das gewünschte Erscheinungsbild zu gestalten. Dieser Leitfaden führt in die Anwendung von Farben auf HTML-Elemente mit CSS ein. Er enthält Listen der CSS-Eigenschaften, deren Werte Farben festlegen können, und zeigt, wie Sie Farben sowohl in Stylesheets als auch auf andere Weise verwenden können.
Hinweis: Es ist wichtig, Farben mit Bedacht einzusetzen. Wählen Sie stets geeignete Farben und achten Sie auf einen ausreichenden Kontrast zwischen Text und Hintergrund, damit der Text gut lesbar ist. Berücksichtigen Sie dabei immer auch die Bedürfnisse von Menschen mit unterschiedlichen Sehfähigkeiten.
Weitere Informationen über CSS-Farben als Datentyp finden Sie in der Referenz zum CSS-Datentyp <color> und im Leitfaden zu CSS-Farbwerten.
Auf Elementebene lässt sich allem in HTML eine Farbe zuweisen. Betrachten wir die verschiedenen Bestandteile, die auf einer Seite dargestellt werden – etwa Text oder Rahmen. Für jeden Bestandteil listen wir die CSS-Eigenschaften auf, mit denen sich seine Farbe festlegen lässt.
Grundsätzlich legt die Eigenschaft color die Vordergrundfarbe des Inhalts eines HTML-Elements fest, während background-color seine Hintergrundfarbe bestimmt. Beide können für nahezu jedes Element verwendet werden.
Bei der Darstellung eines Elements bestimmen die folgenden Eigenschaften die Farbe des Textes, seines Hintergrunds und seiner Textdekorationen.
Die Farbe, mit der der Text und etwaige Textdekorationen dargestellt werden, beispielsweise Unterstreichungen, Überstreichungen oder durchgestrichene Linien.
Die Hintergrundfarbe des Textes.
Konfiguriert einen Schatteneffekt für den Text. Zu den Einstellungen gehört die Grundfarbe des Schattens, die anhand der übrigen Parameter weichgezeichnet und mit dem Hintergrund überblendet wird. Weitere Informationen finden Sie unter Textschatten.
Die Farbe von Textdekorationen wie Unterstreichungen und Durchstreichungen ist standardmäßig currentColor. Dieses Schlüsselwort steht für den aktuellen Wert der Eigenschaft color. Mit text-decoration-color können Sie stattdessen eine andere Farbe festlegen.
Die Farbe der Hervorhebungszeichen, die neben jedem Zeichen des Textes dargestellt werden. Dies wird vor allem bei Texten in ostasiatischen Sprachen verwendet.
Die Farbe der Einfügemarke, die auch als Texteingabecursor bezeichnet wird. Diese Eigenschaft ist nur bei bearbeitbaren Elementen sinnvoll, etwa <input> und <textarea> oder Elementen, deren HTML-Attribut contenteditable auf true gesetzt ist.
Jedes Element ist eine Box mit einem Inhalt sowie einem Hintergrund und einem Rahmen.
Im Abschnitt Rahmen finden Sie eine Liste der CSS-Eigenschaften, mit denen Sie die Farben der Rahmen einer Box festlegen können.
Die Hintergrundfarbe für Bereiche des Elements, in denen kein Vordergrundinhalt dargestellt wird.
Konfiguriert innere Schatten und Schlagschatten für die Box. Zu den Einstellungen jedes Schattens gehört seine Grundfarbe, die anhand der übrigen Parameter weichgezeichnet und mit dem jeweiligen Hintergrund überblendet wird.
Die Farbe der Trennlinie zwischen Textspalten bei Verwendung eines mehrspaltigen CSS-Layouts.
Die Farbe einer Konturlinie um die Außenseite des Elements. Anders als für einen Rahmen wird für diese Konturlinie im Dokument kein Platz reserviert. Konturlinien sind nicht Teil des Box-Modells und können andere Inhalte überlagern. Sie werden in der Regel als Fokusindikatoren verwendet und zeigen an, welches Element gerade den Fokus hat und Tastatureingaben empfängt.
Jedes Element kann von einem Rahmen umgeben sein. Ein einfacher Elementrahmen ist eine Linie um die Ränder des Elementinhalts. Unter Das Box-Modell erfahren Sie mehr über das Verhältnis zwischen Elementen und ihren Rahmen. Der Artikel Rahmen mit CSS gestalten erläutert die Gestaltung von Rahmen.
Mit der Kurzschreibweise border können Sie sämtliche Rahmeneigenschaften auf einmal festlegen, darunter auch Eigenschaften, die keine Farben sind, etwa die Breite und den Stil (durchgezogen, gestrichelt usw.).
Legt eine einzige Farbe für alle Seiten des Elementrahmens fest.
Legen die Farbe der jeweiligen Seite des Elementrahmens fest.
Legen die Farbe der Rahmenseiten am Anfang und Ende der Blockachse fest. Bei einer Schreibrichtung von links nach rechts, wie im Deutschen, ist der Blockanfang die obere und das Blockende die untere Kante. Davon unterscheiden sich Anfang und Ende der Inline-Achse: Sie entsprechen der linken und rechten Kante, an denen die Textzeilen innerhalb der Box beginnen beziehungsweise enden.
Legen die Farben der Rahmenseiten am Anfang und Ende der Textzeilen innerhalb der Box fest. Welche Seiten das sind, hängt von den Eigenschaften writing-mode, direction und text-orientation ab. Diese werden üblicherweise, aber nicht ausschließlich, verwendet, um die Textrichtung an die dargestellte Sprache anzupassen. Wird der Text in der Box beispielsweise von rechts nach links dargestellt, gilt border-inline-start-color für die rechte Rahmenseite.
Nachdem Sie wissen, mit welchen CSS-Eigenschaften Sie Elementen Farben zuweisen können, können Sie Ihre Websites einfärben. Sehen wir uns einige Beispiele für die Verwendung von Farben in einem Stylesheet an. In diesem Beispiel verwenden wir mehrere der bereits erwähnten Eigenschaften. Das Grundprinzip der Farbzuweisung mit CSS bleibt unabhängig von der jeweiligen Eigenschaft gleich.
Sehen wir uns zuerst das Ergebnis an, bevor wir den dafür benötigten
Code betrachten:
Das HTML für das obige Beispiel sieht so aus:
Hier enthält ein umschließendes <div> zwei untergeordnete <div>-Elemente, die jeweils einen einzelnen Absatz (<p>) enthalten. Die