Anwenden von Farbe auf HTML-Elemente mit CSS

Auf der Elementebene kann alles in HTML eine Farbe erhalten. 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 anwenden.

Auf einer fundamentalen 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 nahezu jedem Element verwendet werden.

Wann immer ein Element gerendert wird, werden diese Eigenschaften verwendet, um die Farbe des Textes, seines Hintergrunds und aller Textdekorationen zu bestimmen.

color

Die Farbe, die verwendet wird, um den Text und alle Textdekorationen zu zeichnen (wie das Hinzufügen von Unter- oder Überstreichungen, Durchstreichungen und so weiter).

background-color

Die Hintergrundfarbe des Textes.

text-shadow

Konfiguriert einen Schattierungseffekt, der auf den Text angewendet wird. Zu den Optionen für den Schatten gehört die Basisfarbe des Schattens (die dann basierend auf den anderen Parametern mit dem Hintergrund verwischt und vermischt wird). Siehe Textschatten, um mehr zu erfahren.

text-decoration-color

Die Farbe der standardmäßigen 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 eine andere Farbe mit der text-decoration-color-Eigenschaft verwenden.

text-emphasis-color

Die Farbe, die beim Rendern 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 verwendet wird, um den Caret (manchmal auch als Texteingabecursor bezeichnet) innerhalb des Elements zu zeichnen. Dies ist nur in editierbaren Elementen nützlich, wie z.B. <input> und <textarea> oder in Elementen, deren HTML-Attribut contenteditable auf true gesetzt ist.

Jedes Element ist eine Box mit einer Art von Inhalt und hat neben dem Inhalt eine Hintergrundfarbe und ein Rahmen.

Rahmen

Siehe den Abschnitt Rahmen für eine Liste der CSS-Eigenschaften, die Sie verwenden können, um die Farben eines Rahmen zu setzen.

background-color

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

box-shadow

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

column-rule-color

Die Farbe, die verwendet wird, um die Linie zu zeichnen, die Textspalten trennt, wenn das CSS-Mehrspaltenlayout verwendet wird.

outline-color

Die Farbe, die verwendet wird, um eine Umrandung um die Außenseite des Elements zu zeichnen. Diese Umrandung unterscheidet sich vom Rahmen darin, dass sie nicht im Dokument Platz beansprucht. Umrandungen nehmen nicht am Box-Modell teil und überlappen andere Inhalte. Umrandungen werden im Allgemeinen als Fokusindikatoren verwendet, um anzuzeigen, welches Element derzeit den Fokus hat und Tastatureingaben empfängt.

Jedes Element kann einen Rahmen um sich herum haben. Ein einfacher Elementrahmen ist eine Linie, die um die Kanten des Inhalts eines Elements gezeichnet wird. Siehe Das Box-Modell, um mehr über die Beziehung zwischen Elementen und ihren Rahmen zu erfahren, sowie den Artikel Rahmen mit CSS stylen, um mehr über das Anwenden von Stilen auf Rahmen zu erfahren.

Sie können die border-Kurzschreibweise verwenden, mit der Sie alles über den Rahmen auf einmal konfigurieren können (einschließlich nicht-farbiger Merkmale des Rahmens, wie seine Breite, Stil (solide, gestrichelt usw.) und so weiter).

border-color Kurzschreibweise

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 verwendet wird, um die Rahmen zu zeichnen, die den Anfang und das Ende des blocks, den der Rahmen umgibt, am nächsten sind. In einem von links nach rechts gerichteten Schreibmodus (wie es bei der englischen Schreibweise der Fall ist) ist der Blockanfang der obere Rand und das Blockende der untere Rand. Dies unterscheidet sich vom Inline-Anfang und -Ende, die die linken und rechten Kanten sind (entsprechend dem Beginn und Ende jeder Textzeile im Kasten).

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 dem Ende der Startlinien des Textes innerhalb des Kastens am nächsten sind. 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 Textrichtung abhängig von der angezeigten Sprache anzupassen. Zum Beispiel, wenn der Text des Kastens von rechts nach links gerendert wird, wird die border-inline-start-color auf die rechte Seite des Rahmens angewendet.

Jetzt, da Sie wissen, welche CSS-Eigenschaften es Ihnen ermöglichen, Farbe 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 vorher erwähnte Eigenschaften, wobei das Konzept der Farbverwendung in CSS unabhängig von der Eigenschaft dasselbe ist.

Schauen wir uns zuerst das Ergebnis an, bevor wir uns mit dem Code beschäftigen, den wir dazu erstellen müssen:

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 untergeordnete <div>s enthält, jeweils mit einem untergeordneten Absatz (<p>). Jedes Inhalt-<div> erhält ein unterschiedliches 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 Klasse .wrapper wird verwendet, um Stil auf den <div> anzuwenden, der alle anderen Inhalte umschließt. Dies legt die Höhe des Containers mithilfe von height fest und ermöglicht dem Blockelement, standardmäßig 100% der Breite seines übergeordneten Elements zu verwenden. Durch das Setzen von display auf flex und das Hinzufügen eines 10px gap wird ein Flex-Container erstellt, um die Kinder nebeneinander mit einem Abstand zwischen allen Elementen des Containers anzuordnen. Wir verwenden flex, um die Flex-Kinder wachsen zu lassen, um den Container zu füllen; es beeinflusst den Flex-Container selbst nicht.

Interessanter für unsere Diskussion hier ist die Verwendung der border-Eigenschaft, um einen Rahmen um den äußeren Rand des Elements zu schaffen. Dieser Rahmen ist eine solide 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 Klasse .boxLeft, die verwendet wird, um die Box auf der linken Seite zu gestalten, legt die Farbe des Hintergrunds und der Umrandung fest:

• Die Hintergrundfarbe der Box wird durch Ändern des Werts der CSS-background-color-Eigenschaft in rgb(245 130 130) gesetzt, mit der rgb()-Funktion.
• Eine Umrandung ist für die Box definiert. Im Gegensatz zur häufiger verwendeten border-Eigenschaft beeinflusst outline das Layout überhaupt nicht; sie wird über das gezeichnet, was sich möglicherweise außerhalb der Box des Elements befindet, anstatt wie border Platz zu machen. Diese Umrandung ist eine durchgezogene, dunkelrote Linie, die zwei Pixel dick ist. Beachten Sie die Verwendung des darkred-Schlüsselworts bei der Spezifizierung der Farbe.
• Beachten Sie, dass wir die Textfarbe nicht explizit setzen. Das bedeutet, dass der Wert von color von dem nächstgelegenen enthaltenden Element geerbt wird, das es definiert. Standardmäßig ist das 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 setzt die Klasse .boxRight mehrere Stile auf der Box, die rechts gezeichnet wird. Dann werden die folgenden Farben festgelegt (mit fünf verschiedenen Möglichkeiten, Farbwerte zu deklarieren):

• Die background-color wird mit der hwb()-Funktion festgelegt — hwb(270deg 63% 13%). Dies ist eine mittlere lila Farbe.
• Die outline der Box wird verwendet, um anzugeben, dass die Box in eine vier Pixel dicke gestrichelte Linie eingeschlossen werden soll, deren Farbe ein etwas tiefes Lila ist, mit dem sechsstelligen <hex-color> #6e1478.
• Die Vordergrund- (Text-) Farbe wird durch Setzen der color-Eigenschaft unter Verwendung der hsl()-Funktion — hsl(0deg 100% 100%) festgelegt. Dies ist eine von vielen Möglichkeiten, die Farbe Weiß zu spezifizieren.
• Wir fügen eine grüne wellige Linie unter dem Text mit der text-decoration-Kurzform hinzu, zusammen mit der Langformkomponente für die Browser-Kompatibilität. Wir haben den 3-stelligen <hex-color> #8f8 verwendet, was dem Äquivalent von #88ff88 entspricht.
• Schließlich wird dem Text mit text-shadow ein wenig Schatten hinzugefügt. Sein color-Parameter ist auf black, einen <named-color>-Wert, gesetzt.

Wir haben fünf verschiedene Farb-Syntaxen verwendet, um zu zeigen, was möglich ist. In der realen Welt werden Sie und Ihr Team vorzugsweise eine bevorzugte Farbnotation wählen, wobei jeder, der an einem Code-Basis arbeitet, dieselbe Farb-Syntax 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)

Ermöglicht die Erstellung von Bildern mit Befehlen, 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, wie jede andere Art von Bild, auf der Seite platziert werden.

WebGL

Die Web Graphics Library ist eine auf OpenGL ES basierende API zum Zeichnen von hochleistungsfähigen 2D- und 3D-Grafiken im Web. Siehe unser WebGL-Tutorial, 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