Anwenden von Farbe auf HTML-Elemente mit CSS

Eigenschaften, die Farbe enthalten können

Auf Elementebene kann auf alles in HTML Farbe angewendet werden. Sehen wir uns die verschiedenen auf der Seite dargestellten Elemente an — beispielsweise Text, Rahmen usw. Wir stellen Listen der CSS-Eigenschaften bereit, die auf jedes davon Farbe anwenden.

Auf einer grundlegenden Ebene definiert die Eigenschaft color die Vordergrundfarbe des Inhalts eines HTML-Elements, und die Eigenschaft background-color definiert die Hintergrundfarbe des Elements. Diese können auf nahezu jedes Element angewendet werden.

Text

Wenn ein Element dargestellt wird, bestimmen diese Eigenschaften die Farbe des Textes, seines Hintergrunds und jeglicher Textdekorationen.

color

Die Farbe, die beim Zeichnen des Textes und jeglicher Textdekorationen verwendet wird, etwa beim Hinzufügen von Unter- oder Überstreichungen, Durchstreichungen usw.

background-color

Die Hintergrundfarbe des Textes.

text-shadow

Konfiguriert einen Schatteneffekt, der auf Text angewendet wird. Zu den Optionen für den Schatten gehört dessen Grundfarbe, die anschließend anhand der anderen Parameter weichgezeichnet und mit dem Hintergrund vermischt wird. Weitere Informationen finden Sie unter Schlagschatten für Text.

text-decoration-color

Die Farbe der standardmäßigen Textdekorationen, etwa Unterstreichungen, Durchstreichungen usw., ist currentColor. Dieses Schlüsselwort stellt den aktuellen Wert der Eigenschaft color dar. Sie können diesen Wert jedoch überschreiben und mit der Eigenschaft text-decoration-color eine andere Farbe dafür verwenden.

text-emphasis-color

Die Farbe, die beim Darstellen von Hervorhebungssymbolen neben jedem Zeichen im Text verwendet wird. Dies wird hauptsächlich beim Zeichnen von Text für ostasiatische Sprachen verwendet.

caret-color

Die Farbe, die beim Zeichnen der Einfügemarke verwendet wird, die manchmal als Texteingabecursor bezeichnet wird. Dies ist nur bei bearbeitbaren Elementen nützlich, beispielsweise <input> und <textarea>, oder bei Elementen, deren HTML-Attribut contenteditable auf true gesetzt ist.

Boxen

Jedes Element ist eine Box mit einer Art von Inhalt und verfügt neben dem möglichen Inhalt der Box über einen Hintergrund und einen Rahmen.

Rahmen

Eine Liste der CSS-Eigenschaften, mit denen Sie die Farben der Rahmen einer Box festlegen können, finden Sie im Abschnitt Rahmen.

background-color

Die Hintergrundfarbe, die in Bereichen des Elements ohne Vordergrundinhalt verwendet wird.

box-shadow

Konfiguriert Innenschatten- und Schlagschatteneffekte für die Box. Zu den Optionen für jeden Schatten gehört dessen Grundfarbe, die anschließend anhand der anderen Parameter weichgezeichnet und mit einem Hintergrund vermischt wird.

column-rule-color

Die Farbe, die beim Zeichnen der Linie verwendet wird, welche Textspalten bei Verwendung des CSS-Mehrspaltenlayouts trennt.

outline-color

Die Farbe, die beim Zeichnen einer Umrandung außerhalb des Elements verwendet wird. Diese Umrandung unterscheidet sich vom Rahmen dadurch, dass im Dokument kein Platz für sie reserviert wird. Umrandungen nehmen nicht am Box-Modell teil und überlappen anderen Inhalt. Umrandungen werden im Allgemeinen als Fokusanzeigen verwendet und geben an, welches Element aktuell den Fokus hat und Tastatureingabeereignisse empfängt.

Rahmen

Jedes Element kann mit einem Rahmen versehen werden. Ein einfacher Elementrahmen ist eine Linie, die um die Kanten des Elementinhalts gezeichnet wird. Informationen zur Beziehung zwischen Elementen und ihren Rahmen finden Sie unter Das Box-Modell. Weitere Informationen zum Anwenden von Stilen auf Rahmen finden Sie im Artikel Gestalten von Rahmen mit CSS.

Sie können die Kurzform-Eigenschaft border verwenden, mit der Sie alles zum Rahmen auf einmal konfigurieren können, einschließlich nicht farbbezogener Eigenschaften des Rahmens, etwa seiner Breite, seines Stils (durchgezogen, gestrichelt usw.) und weiterer Eigenschaften.

Kurzform border-color

Gibt eine einzelne Farbe an, die für jede Seite des Elementrahmens verwendet wird.

border-left-color, border-right-color, border-top-color und border-bottom-color

Ermöglichen es Ihnen, die Farbe der entsprechenden Seite des Elementrahmens festzulegen.

border-block-start-color und border-block-end-color

Damit können Sie die Farbe festlegen, die zum Zeichnen der Rahmen verwendet wird, welche dem Anfang und Ende des Blocks, den der Rahmen umgibt, am nächsten liegen. In einem Schreibrichtungssystem von links nach rechts, wie es beispielsweise für Englisch verwendet wird, ist der Blockanfangsrahmen die obere Kante und das Blockende die untere Kante. Dies unterscheidet sich von Inline-Anfang und -Ende, die die linke und rechte Kante sind und den Stellen entsprechen, an denen jede Textzeile in der Box beginnt und endet.

border-inline-start-color und border-inline-end-color

Damit können Sie die Kanten des Rahmens einfärben, die dem Anfang und Ende der Textzeilen in der Box am nächsten liegen. Welche Seite dies ist, hängt von den Eigenschaften writing-mode, direction und text-orientation ab, die üblicherweise, jedoch nicht immer, verwendet werden, um die Textrichtung entsprechend der dargestellten Sprache anzupassen. Wenn beispielsweise der Text der Box von rechts nach links dargestellt wird, wird border-inline-start-color auf die rechte Seite des Rahmens angewendet.

Farben als Werte in Stylesheets angeben

Da Sie nun wissen, welche CSS-Eigenschaften Ihnen das Anwenden von Farbe auf Elemente ermöglichen, können Sie beginnen, Ihren Websites Farben hinzuzufügen. Sehen wir uns einige Beispiele für die Verwendung von Farbe in einem Stylesheet an. In diesem Beispiel verwenden wir mehrere zuvor erwähnte Eigenschaften, wobei das Konzept zum Anwenden von Farben in CSS unabhängig von der Eigenschaft gleich ist.

Sehen wir uns zunächst das Ergebnis an, bevor wir den Code betrachten, den wir dafür benötigen:

HTML

Das HTML, das für die Erstellung des obigen Beispiels verantwortlich ist, wird hier gezeigt:

<div class="wrapper">
  <div class="boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="boxRight">
    <p>This is the second box.</p>
  </div>
</div>

Hier haben wir ein umschließendes <div>, das zwei untergeordnete <div>s enthält, die jeweils einen einzelnen untergeordneten Absatz (<p>) enthalten. Jedes Inhalts-<div> erhält ein anderes Erscheinungsbild.

CSS

Sehen wir uns das CSS, das das obige Ergebnis erzeugt, Schritt für Schritt an.

.wrapper {
  height: 110px;
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  border: 6px solid mediumturquoise;
}

div {
  flex: 1;
}

Die Klasse .wrapper wird verwendet, um dem <div>, das unseren gesamten anderen Inhalt umschließt, Stile zuzuweisen. Sie legt die Höhe des Containers mit height fest, wodurch die Breite dieses Block-Level-Elements standardmäßig 100 % seines Elternelements beträgt. Das Setzen von display auf flex und das Hinzufügen eines gap von 10px erstellt einen Flex-Container, um die Kindelemente nebeneinander mit einem Abstand zwischen allen Kindelementen des Containers anzuordnen. Wir verwenden flex, damit die Flex-Kindelemente wachsen und den Container ausfüllen können; dies beeinflusst nicht den Flex-Container selbst.

Für unsere Diskussion hier interessanter ist die Verwendung der Eigenschaft border, um einen Rahmen um die Außenkante des Elements festzulegen. Dieser Rahmen ist eine durchgezogene, 6 Pixel breite Linie in der benannten Farbe mediumturquoise.

Innerhalb unseres Wrappers haben wir eine linke und eine rechte Box.

.boxLeft {
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}

Die Klasse .boxLeft, die zum Gestalten der linken Box verwendet wird, legt die Farbe des Hintergrunds und der Umrandung fest:

• Die Hintergrundfarbe der Box wird durch Ändern des Werts der CSS-Eigenschaft background-color auf rgb(245 130 130) festgelegt, wobei die funktionale Notation rgb() verwendet wird.
• Für die Box wird eine Umrandung definiert. Im Gegensatz zu dem häufiger verwendeten border beeinflusst outline das Layout überhaupt nicht; es wird über alles gezeichnet, was sich außerhalb der Box des Elements befinden kann, anstatt wie border Platz dafür zu schaffen. Diese Umrandung ist eine durchgezogene, dunkelrote Linie mit einer Stärke von zwei Pixeln. Beachten Sie die Verwendung des Schlüsselworts darkred bei der Angabe der Farbe.
• Beachten Sie, dass wir die Textfarbe nicht explizit festlegen. Das bedeutet, dass der Wert von color vom nächstgelegenen enthaltenden Element geerbt wird, das ihn definiert. Standardmäßig ist dies Schwarz.

.boxRight {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 95% 95%);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

Schließlich legt die Klasse .boxRight mehrere Stile für die rechts dargestellte Box fest. Anschließend werden die folgenden Farben festgelegt, wobei fünf verschiedene Arten zur Deklaration von Farbwerten verwendet werden:

• background-color wird mit der funktionalen Notation hwb() auf hwb(270deg 63% 13%) gesetzt. Dies ist ein mittlerer Lilaton.
• outline der Box wird verwendet, um anzugeben, dass die Box von einer vier Pixel dicken gestrichelten Linie umgeben sein soll, deren Farbe ein etwas dunkleres Violett ist, das mit dem sechsstelligen <hex-color> #6e1478 angegeben wird.
• Die Vordergrundfarbe (Textfarbe) wird durch Setzen der Eigenschaft color mithilfe der funktionalen Notation hsl() auf hsl(0deg 95% 95%) angegeben. Dies ist ein sehr heller Rosaton.
• Mit der Kurzform text-decoration fügen wir eine grüne gewellte Linie unter dem Text hinzu, zusammen mit der Langform-Komponente für Browser-Kompatibilität. Wir verwenden den dreistelligen <hex-color> #8f8, der dem Wert #88ff88 entspricht.
• Schließlich wird dem Text mit text-shadow ein wenig Schatten hinzugefügt. Dessen Parameter color wird auf black gesetzt, einen <named-color>-Wert.

Wir haben fünf verschiedene Farbsyntaxen verwendet, um zu demonstrieren, was möglich ist. In der Praxis werden Sie und Ihr Team vorzugsweise eine bevorzugte Farbnotation wählen, sodass alle Personen, die an einer Codebasis arbeiten, dieselbe Farbsyntax verwenden.

Andere Möglichkeiten zur Verwendung von Farbe

CSS ist nicht die einzige Webtechnologie, die Farbe unterstützt. Weitere Beispiele sind:

Die HTML-Canvas API

Ermöglicht es Ihnen, 2D-Bitmapgrafiken in einem <canvas>-Element zu zeichnen. Weitere Informationen finden Sie in unserem Canvas-Tutorial.

SVG (Scalable Vector Graphics)

Ermöglicht es Ihnen, Bilder mithilfe von Befehlen zu erstellen, die bestimmte Formen, Muster und Linien zeichnen. SVG-Befehle werden als XML formatiert und können direkt in eine Webseite eingebettet oder wie jeder andere Bildtyp mit dem Element <img> auf der Seite platziert werden.

WebGL

Die Web Graphics Library ist eine auf OpenGL ES basierende API zum Zeichnen leistungsfähiger 2D- und 3D-Grafiken im Web. Weitere Informationen finden Sie in unserem WebGL-Tutorial. Siehe auch WebGPU, einen Nachfolger von WebGL für moderne GPUs.

Siehe auch

• Datentyp <color>
• Leitfaden zu CSS-Farbwerten
• Farben sinnvoll einsetzen
• CSS-Farbmodul
• Grafiken zeichnen