Anwenden von Farbe auf HTML-Elemente mit CSS

Auf der Elementebene kann alles in HTML mit Farbe versehen werden. Schauen wir uns die verschiedenen auf der Seite gerenderten Elemente an — wie Text, Ränder usw. Wir werden Listen der CSS-Eigenschaften bereitstellen, die Farbe auf jedes anwenden.

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

Wann immer ein Element gerendert wird, werden diese Eigenschaften verwendet, um die Farbe des Textes, seinen Hintergrund und eventuelle Dekorationen auf dem Text zu bestimmen.

color

Die Farbe, die beim Zeichnen des Textes und aller Textdekorationen (wie das Hinzufügen von Unter- oder Überstrichen, Durchstreichlinien usw.) verwendet werden soll.

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 die Basisfarbe des Schattens (die dann basierend auf den anderen Parametern verwischt und mit dem Hintergrund vermischt wird). Siehe Textschlagschatten, um mehr zu erfahren.

text-decoration-color

Die Standardfarbe für Textdekorationen (wie Unterstreichungen, Durchstreichungen usw.) ist currentcolor. Dieses Schlüsselwort repräsentiert den aktuellen Wert der color-Eigenschaft. Sie können diesen Wert jedoch überschreiben und mit der text-decoration-color-Eigenschaft eine andere Farbe verwenden.

text-emphasis-color

Die Farbe, die beim Rendern von Emphasissymbolen neben jedem Zeichen im Text verwendet wird. Diese wird hauptsächlich beim Zeichnen von Text für ostasiatische Sprachen verwendet.

caret-color

Die Farbe, die beim Zeichnen des Cursors (manchmal auch als Texteingabecursor bezeichnet) innerhalb des Elements verwendet wird. Dies ist nur in bearbeitbaren Elementen nützlich, wie <input> und <textarea> oder Elementen, deren HTML-Attribut contenteditable auf true gesetzt ist.

Jedes Element ist eine Box mit einem bestimmten Inhalt und hat einen Hintergrund und einen Rand zusätzlich zu dem, was die Box möglicherweise auch enthält.

Ränder

Siehe den Abschnitt Ränder für eine Liste der CSS-Eigenschaften, die Sie verwenden können, um die Farben der Ränder einer Box festzulegen.

background-color

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

box-shadow

Konfiguriert Einfassungs- und Schlagschatteneffekte auf der Box. Zu den Optionen für jeden Schatten gehört die Basisfarbe des Schattens (die dann basierend auf den anderen Parametern verwischt und mit jedem Hintergrund vermischt wird).

column-rule-color

Die Farbe, die beim Zeichnen der Linie verwendet wird, die Spalten von Text bei Verwendung eines CSS-Mehrspaltenlayouts trennt.

outline-color

Die Farbe, die beim Zeichnen einer Umrandung um das äußere Element verwendet wird. Diese Umrandung unterscheidet sich vom Rand, da für sie im Dokument kein Platz reserviert wird. Umrandungen nehmen nicht am Boxmodell teil und überlappen andere Inhalte. Umrandungen werden im Allgemeinen als Fokusindikatoren verwendet, die anzeigen, welches Element derzeit den Fokus hat und Ereignisse für Tastatureingaben empfängt.

Jedes Element kann einen um es herum gezeichneten Rand haben. Ein grundlegender Rand eines Elements ist eine Linie, die um die Kanten des Inhalts des Elements gezeichnet wird. Siehe Das Boxmodell, um mehr über die Beziehung zwischen Elementen und ihren Rändern zu erfahren, und den Artikel Stilvorlagen für Ränder mit CSS, um mehr über das Anwenden von Stilen auf Ränder zu erfahren.

Sie können die Kurzform-Eigenschaft border verwenden, die es Ihnen ermöglicht, alles über den Rand in einem Durchgang zu konfigurieren (einschließlich nicht-farbiger Merkmale von Grenzen, wie ihre Breite, Stil (durchgezogen, gestrichelt usw.) und so weiter.

border-color Kurzform

Gibt eine einzelne Farbe an, die für jede Seite des Randes des Elements verwendet werden soll.

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

Ermöglicht Ihnen das Festlegen der Farbe der entsprechenden Seite des Randes des Elements.

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

Mit diesen können Sie die Farbe festlegen, die verwendet wird, um die Ränder zu zeichnen, die dem Start und Ende des Blocks am nächsten sind, den der Rand umgibt. In einem von links nach rechts gerichteten Schreibmodus (wie bei der englischen Sprache) ist der Block-Start-Rand die obere Kante und der Block-Ende der untere. Dies unterscheidet sich vom Inline-Start und -Ende, das die linken und rechten Kanten sind (entsprechend dem Ort, an dem jede Textzeile im Block beginnt und endet).

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

Diese ermöglichen es Ihnen, die Kanten des Randes einzufärben, die dem Anfang und dem Ende der Anfangszeilen des Textes innerhalb der Box am nächsten liegen. Welche Seite das ist, hängt von den Eigenschaften writing-mode, direction, und text-orientation ab, die typischerweise (aber nicht immer) verwendet werden, um die Richtung des Textes basierend auf der dargestellten Sprache anzupassen. Beispielsweise wird, wenn der Text der Box von rechts nach links gerendert wird, die border-inline-start-color auf die rechte Seite des Randes angewendet.

Nachdem Sie nun wissen, welche CSS-Eigenschaften es Ihnen ermöglichen, Farben auf Elemente anzuwenden, können Sie beginnen, Farben zu Ihren Webseiten hinzuzufügen. Schauen wir uns einige Beispiele für die Verwendung von Farbe innerhalb eines Stylesheets an. In diesem Beispiel verwenden wir mehrere zuvor erwähnte Eigenschaften, wobei das Konzept der Farbverwendung in CSS unabhängig von der Eigenschaft gleich ist.

Schauen wir uns zuerst das Ergebnis an, bevor wir auf den Code eingehen, den wir dazu erstellen müssen:

Das für die Erstellung des obigen Beispiels verantwortliche HTML 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 einen Wrapping-<div>, der zwei untergeordnete <div>-Elemente enthält, von denen jedes einen einzelnen untergeordneten Paragraphen (<p>) hat. Jedes Inhalts-<div> erhält ein anderes Aussehen und Gefühl.

Schauen wir uns das CSS an, das das obige Ergebnis Stück für Stück erstellt.

.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 .wrapper-Klasse wird verwendet, um Stile auf das <div> anzuwenden, das all unseren anderen Inhalt umschließt. Dadurch wird die Höhe des Containers mit height festgelegt, wobei die Breite dieses Blocklevel-Elements standardmäßig auf 100 % des übergeordneten Elements eingestellt wird. Das Festlegen von display auf flex und das Hinzufügen einer 10px gap erstellt einen flexiblen Container, um die Kinder nebeneinander mit einem Abstand zwischen allen Kindern des Containers zu layouten. Wir verwenden flex, um die flexiblen Kinder den Container ausfüllen zu lassen; es wirkt sich nicht auf den flexiblen Container selbst aus.

Für unser Thema von Interesse ist die Verwendung der border-Eigenschaft, um einen Rand um die Außenkante des Elements zu erstellen. Dieser Rand ist eine durchgezogene Linie, 6 Pixel breit, in der benannten Farbe mediumturquoise.

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

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

Die .boxLeft-Klasse, die zum Stylen der Box links verwendet wird, legt die Farbe des Hintergrunds und des Rahmens fest:

• Die Hintergrundfarbe der Box wird durch Ändern des Wertes der CSS-background-color-Eigenschaft auf rgb(245 130 130) festgelegt, wobei das rgb() Funktionsnotierung verwendet wird.
• Ein Rahmen wird für die Box definiert. Im Gegensatz zur häufiger verwendeten border-Eigenschaft wirkt sich outline überhaupt nicht auf das Layout aus; es zeichnet über alles, was sich außerhalb der Box des Elements befinden könnte, anstatt Platz wie border zu schaffen. Dieser Rahmen ist eine durchgezogene, dunkelrote Linie, die zwei Pixel dick ist. Beachten Sie die Verwendung des darkred-Schlüsselworts bei der Angabe der Farbe.
• Beachten Sie, dass wir die Textfarbe nicht ausdrücklich festlegen. Das bedeutet, dass der Wert von color von dem nächstgelegenen enthaltenen Element geerbt wird, das ihn definiert. Standardmäßig ist diese Farbe Schwarz.

.boxRight {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 100% 100%);
  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 .boxRight-Klasse mehrere Stile für die Box fest, die rechts gezeichnet wird. Dann werden die folgenden Farben festgelegt (mit fünf verschiedenen Arten der Deklarierung von Farbwerten):

• Die background-color wird mit hwb() Funktionsnotierung festgelegt — hwb(270deg 63% 13%). Dies ist eine mittelschattige Lila Farbe.
• Der Rahmen der Box wird mit einem vier Pixel dicken gestrichelten Rahmen versehen, dessen Farbe ein etwas tieferer Lilaton ist, mit dem sechsstelligen <hex-color> #6e1478.
• Die Vordergrundfarbe (Text) wird durch Festlegen der color-Eigenschaft mit hsl() Funktionsnotierung angegeben — hsl(0deg 100% 100%). Dies ist eine der vielen Möglichkeiten, die Farbe Weiß anzugeben.
• Wir fügen eine grüne gewellte Linie unter den Text mit der text-decoration-Kurzform hinzu, zusammen mit der Langformkomponente für die Browser-Kompatibilität. Wir verwendeten den 3-stelligen <hex-color> #8f8, was dem Wert #88ff88 entspricht.
• Schließlich wird dem Text ein wenig Schatten mit text-shadow hinzugefügt. Sein color-Parameter ist auf black, einen <named-color>-Wert, gesetzt.

Wir haben fünf verschiedene Farbsyntaxen verwendet, um zu demonstrieren, was möglich ist. In der realen Welt wählen Sie und Ihr Team vorzugsweise eine bevorzugte Farbschreibweise, wobei jeder, der an einem Code-Basis arbeitet, dieselbe Farbsyntax verwendet.

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

Die HTML Canvas API

Ermöglicht das Zeichnen von 2D-Bitmap-Grafiken in einem <canvas>-Element. Siehe unser Canvas-Tutorial, um mehr zu erfahren.

SVG (Scalable Vector Graphics)

Erlaubt das Erstellen von Bildern mithilfe von Befehlen, die bestimmte Formen, Muster und Linien zeichnen. SVG-Befehle sind als XML formatiert und können direkt in eine Webseite eingebettet oder mit dem <img>-Element auf der Seite platziert werden, genau wie bei jedem anderen Bildtyp.

WebGL

Die Web Graphics Library ist eine auf OpenGL ES basierende API zum Zeichnen von leistungsstarken 2D- und 3D-Grafiken im Web. Sehen Sie sich unser WebGL-Tutorial an, um mehr zu erfahren. Siehe auch WebGPU, einen Nachfolger von WebGL für moderne GPUs.

• <color> Datentyp
• Leitfaden zu CSS-Farbwerten
• Farben weise verwenden
• CSS-Farbmodul
• Grafiken zeichnen