Anwenden von Farbe auf HTML-Elemente mit CSS

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

Auf fundamentaler 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 jedem Element verwendet werden.

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

color

Die Farbe, die beim Zeichnen des Textes und jeglicher Textdekorationen verwendet wird (wie das Hinzufügen von Unter- oder Überstrichen, Durchstreichlinien 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 die Grundfarbe des Schattens (die dann basierend auf den anderen Parametern unscharf und mit dem Hintergrund vermischt wird). Sehen Sie sich Textschlagschatten an, um mehr zu erfahren.

text-decoration-color

Die Standardfarbe der Textdekorationen (wie Unterstreichungen, Durchstreichungen usw.) ist currentColor. Dieses Schlüsselwort steht für den aktuellen Wert der color-Eigenschaft. Sie können diesen Wert jedoch überschreiben und eine andere Farbe für sie verwenden, indem Sie die text-decoration-color-Eigenschaft verwenden.

text-emphasis-color

Die Farbe, die bei der Darstellung von Betonungszeichen 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 Carets (manchmal auch als Texteingabecursor bezeichnet) innerhalb des Elements verwendet wird. Dies ist nur in bearbeitbaren Elementen nützlich, wie <input> und <textarea> oder Elemente, deren HTML-Attribut contenteditable auf true gesetzt ist.

Jedes Element ist eine Box mit irgendeiner Art von Inhalt und hat neben dem eigentlichen Inhalt des Elements einen Hintergrund und einen Rahmen.

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 Einschlüsse und Schlagschatteneffekte auf der Box. Zu den Optionen für jeden Schatten gehört die Grundfarbe des Schattens (die dann basierend auf den anderen Parametern unscharf und mit jedem Hintergrund vermischt wird).

column-rule-color

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

outline-color

Die Farbe, die verwendet wird, wenn eine Umrandung um das äußere Element gezeichnet wird. Diese Umrandung unterscheidet sich vom Rahmen darin, dass sie keinen Raum im Dokument reserviert. Umrisse nehmen nicht am Boxmodell teil, sondern überlappen andere Inhalte. Umrisse werden allgemein als Fokusindikatoren verwendet, um anzuzeigen, welches Element derzeit den Fokus hat und Tastatureingabeereignisse erhält.

Jedes Element kann einen umrandeten Rahmen gezeichnet haben. Ein grundlegender Elementrahmen ist eine Linie, die um die Kanten des Inhalts des Elements gezeichnet wird. Sehen Sie sich Das Boxmodell an, um mehr über das Verhältnis zwischen Elementen und ihren Rändern zu erfahren, und den Artikel Styling von Rändern mit CSS, um mehr darüber zu erfahren, wie man Stile auf Ränder anwendet.

Sie können die border-Kurzform-Eigenschaft verwenden, die es Ihnen ermöglicht, alles über den Rahmen auf einmal zu konfigurieren (einschließlich nicht-Farbenmerkmale von Rahmen, wie seine Breite, Stil (solide, gestrichelt usw.) und so weiter.

border-color-Kurzform

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

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

Ermöglicht es Ihnen, die Farbe der entsprechenden Seite des Rahmen des Elements festzulegen.

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

Mit diesen können Sie die Farbe festlegen, die zum Zeichnen der Ränder verwendet wird, die dem Anfang und Ende des Blockes am nächsten liegen, den der Rand umgibt. In einem von links nach rechts verlaufenden Schreibmodus (wie es im Englischen der Fall ist) ist der Blockanfang-Rand die obere Kante und das Blockende die untere. Dies unterscheidet sich vom Inline-Anfang und -Ende, die die linke und rechte Kanten sind (entsprechend dem Punkt, an dem jede Textzeile im Kasten beginnt und endet).

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

Diese ermöglichen es Ihnen, die Kanten des Rahmens zu färben, die dem Anfang und Ende der Zeilenanfänge im Kasten am nächsten liegen. Welche Seite dies ist, variiert je nach writing-mode, direction und text-orientation-Eigenschaften, die typischerweise (aber nicht immer) verwendet werden, um die Richtung des Textes basierend auf der angezeigten Sprache anzupassen. Beispielsweise wird, wenn der Text des Kastens von rechts nach links gerendert wird, die border-inline-start-color-Eigenschaft auf die rechte Seite des Rahmens angewendet.

Da Sie nun wissen, welche CSS-Eigenschaften es Ihnen ermöglichen, Farbe auf Elemente anzuwenden, können Sie damit beginnen, Farben zu Ihren Websites hinzuzufügen. Schauen wir uns einige Beispiele dafür an, wie Farbe in einem Stylesheet verwendet wird. In diesem Beispiel verwenden wir mehrere vorher erwähnte Eigenschaften, wobei das Konzept der Anwendung von Farben in CSS dasselbe bleibt, unabhängig von der Eigenschaft.

Schauen wir uns zuerst das Ergebnis an, bevor wir uns anschauen, welchen Code wir benötigen, um es zu erstellen:

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 einen Wrapper-<div>, der zwei Kind-<div>-Elemente enthält, die jeweils ein einzelnes Kind-Absatz-(<p>) enthalten. Jeder Inhalt-<div> hat ein unterschiedliches Aussehen und Gefühl.

Schauen wir uns 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 unsere anderen Inhalte umschließt. Dies legt die Höhe des Containers fest, und erlaubt es, die Breite dieses Blockebenelements standardmäßig auf 100% seines Elternteils einzustellen. Durch das Setzen von display auf flex und das Hinzufügen eines 10px gap wird ein Flex-Container erstellt, der die Kinder nebeneinander mit einem Abstand zwischen allen Kindern des Containers anordnet. Wir verwenden flex, um den Flex-Kindern das Wachstum zu erlauben und den Container zu füllen; es hat keinen Effekt auf den Flex-Container selbst.

Für unsere Diskussion hier ist von größerem Interesse die Verwendung der border-Eigenschaft, um einen Rahmen um die äußere Kante des Elements zu etablieren. Dieser Rahmen 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 verwendet wird, um die Box auf der linken Seite zu stylen, legt die Hintergrundfarbe und die Umrandung fest:

• Die Hintergrundfarbe der Box wird durch Ändern des Werts der CSS-background-color-Eigenschaft auf rgb(245 130 130) festgelegt, wobei die rgb()-Funktionalnotation verwendet wird.
• Eine Umrandung wird für die Box definiert. Im Gegensatz zur häufiger verwendeten border beeinflusst outline das Layout überhaupt nicht; sie wird über das gezeichnet, was sich zufällig außerhalb des Boxelements befinden mag, anstatt wie border Platz zu schaffen. Diese Umrandung ist eine durchgezogene, dunkelrote Linie, die zwei Pixel dick ist. Beachten Sie die Verwendung des Keywords darkred bei der Angabe der Farbe.
• Beachten Sie, dass wir die Textfarbe nicht explizit einstellen. Das bedeutet, dass der Wert von color vom nächstgelegenen, enthaltenden Element geerbt wird, das es definiert. Standardmäßig ist dies 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 auf der Box fest, die rechts gezeichnet wird. Dann werden die folgenden Farben festgelegt (unter Verwendung von fünf verschiedenen Möglichkeiten zur Deklaration von Farbwerten):

• Die background-color wird mit der hwb()-Funktionalnotation festgelegt — hwb(270deg 63% 13%). Dies ist eine mittelviolette Farbe.
• Die outline der Box wird verwendet, um festzulegen, dass die Box in eine vier Pixel dicke gestrichelte Linie eingeschlossen werden soll, deren Farbe ein etwas tieferes Violett ist, das den sechsstelligen <hex-color>-Wert #6e1478 verwendet.
• Die Vordergrundfarbe (Textfarbe) wird durch das Setzen der color-Eigenschaft mittels der hsl()-Funktionalnotation festgelegt — hsl(0deg 100% 100%). Dies ist eine von vielen Möglichkeiten, die Farbe Weiß anzugeben.
• Wir fügen eine grüne gewellte Linie unter dem Text mit der text-decoration-Kurzform hinzu, zusammen mit der Langform-Komponente für die Browser-Kompatibilität. Wir verwendeten den 3-stelligen <hex-color>-Wert #8f8, der gleichbedeutend mit #88ff88 ist.
• Schließlich wird mit text-shadow ein kleiner Schatten zum Text hinzugefügt. Sein color-Parameter ist auf black gesetzt, einen <named-color>-Wert.

Wir haben fünf verschiedene Farbschreibweisen verwendet, um zu demonstrieren, was möglich ist. In der realen Welt werden Sie und Ihr Team vorzugsweise eine bevorzugte Farbschreibweise auswählen, wobei jeder, der an einer Codebasis arbeitet, dieselbe Farbschreibweise verwendet.

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

Die HTML Canvas API

Ermöglicht es Ihnen, 2D-Bitmaps in einem <canvas>-Element zu zeichnen. Sehen Sie sich unser Canvas-Tutorial an, um mehr zu erfahren.

SVG (Scalable Vector Graphics)

Ermöglicht es Ihnen, Bilder mit Befehlen zu erstellen, die spezifische Formen, Muster und Linien zeichnen. SVG-Befehle sind als XML formatiert und können direkt in eine Webseite eingebettet oder mit dem <img>-Element in die Seite eingebaut werden, genau wie jede andere Art von Bild.

WebGL

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

• <color> Datentyp
• CSS-Farbwerte Leitfaden
• Farben sorgfältig verwenden
• CSS-Farbmodul
• Grafiken zeichnen