Farbe auf HTML-Elemente mit CSS anwenden

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

Auf grundlegender 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 jedes Element angewendet 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 den Text angewendet wird. Zu den Optionen für den Schatten gehört die Grundfarbe des Schattens (die dann basierend auf den anderen Parametern mit dem Hintergrund verschwommen und gemischt wird). Siehe Textschlagschatten, um mehr zu erfahren.

text-decoration-color

Die Standardfarbe der 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 für sie mit der text-decoration-color-Eigenschaft verwenden.

text-emphasis-color

Die Farbe, die beim Rendern von Betonungssymbolen 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 (manchmal als Texteingabemarke bezeichnet) innerhalb des Elements verwendet wird. Dies ist nur in Elementen nützlich, die bearbeitbar sind, wie <input> und <textarea> oder Elementen, deren HTML-Attribut contenteditable auf true gesetzt ist.

Jedes Element ist eine Box mit einer Art von Inhalt und hat zusätzlich zu den Inhalten der Box 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 eingelassene Schatten- und Abwurfschatteneffekte auf der Box. Zu den Optionen für jeden Schatten gehört die Grundfarbe des Schattens (die dann basierend auf den anderen Parametern mit dem Hintergrund verschwommen und gemischt wird).

column-rule-color

Die Farbe, die beim Zeichnen der Linie verwendet wird, die Spalten des Textes trennt, wenn das CSS-Multispalten-Layout verwendet wird.

outline-color

Die Farbe, die beim Zeichnen einer Umrisslinie um das äußere Element verwendet wird. Dieser Umriss unterscheidet sich vom Rahmen darin, dass er keinen Platz im Dokument beansprucht. Umrisse nehmen nicht am Box-Modell teil, sondern überlappen andere Inhalte. Umrisse werden im Allgemeinen als Fokusanzeigen verwendet, die anzeigen, welches Element derzeit fokussiert ist und Tastatureingabeereignisse empfängt.

Jedes Element kann einen Rand um sich herum haben. Ein grundlegender Elementrand ist eine Linie, die um die Ränder des Inhalts des Elements gezeichnet wird. Lesen Sie Das Box-Modell, um mehr über die Beziehung zwischen Elementen und ihren Rändern zu erfahren, und den Artikel Styling borders using CSS, um mehr über das Anwenden von Stil auf Ränder zu lernen.

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

border-color Kurzform

Gibt eine einzelne Farbe an, die für jede Seite des Elementrands 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 Elementrands festzulegen.

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

Damit können Sie die Farbe festlegen, die verwendet wird, um die Ränder zu zeichnen, die am nächsten zum Anfang und Ende des Blocks liegen, den der Rand umgibt. In einem von links nach rechts gerichteten Schreibmodus (wie der im Englischen verwendete) ist der Anfangsrand der oberen Kante und das Ende der unteren Kante. Dies unterscheidet sich vom Inline-Anfang und -Ende, die die linke und rechte Kante sind (entsprechend, wo jede Textzeile im Kasten beginnt und endet).

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

Damit können Sie die Ränder des Randes färben, die am nächsten zum Beginn und zum Ende der Textzeilen innerhalb der Box liegen. Welche Seite das sein wird, hängt von den Eigenschaften writing-mode, direction und text-orientation ab, die typischerweise (aber nicht immer) verwendet werden, um die Schreibrichtung des Textes basierend auf der angezeigten Sprache anzupassen. Zum Beispiel, wenn der Text des Kästchens von rechts nach links dargestellt wird, wird die border-inline-start-color-Eigenschaft auf die rechte Seite des Randes angewendet.

Jetzt, da Sie wissen, welche CSS-Eigenschaften es ermöglichen, Farbe auf Elemente anzuwenden, können Sie damit beginnen, Farben zu Ihren Websites hinzuzufügen. Schauen wir uns einige Beispiele an, in denen Farbe innerhalb eines Stylesheets verwendet wird. In diesem Beispiel verwenden wir mehrere der zuvor genannten Eigenschaften, wobei das Konzept der Anwendung von Farben in CSS unabhängig von der Eigenschaft dasselbe ist.

Schauen wir uns zuerst das Ergebnis an, bevor wir uns den Code ansehen, den wir dafür 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 Kinder-<div>-Elemente enthält, von denen jedes einen einzelnen Kind-Absatz (<p>) enthält. Jedem Inhalts-<div> wird ein anderes Aussehen und Gefühl verliehen.

Schauen wir uns das CSS an, das das oben gezeigte 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 Stile auf das <div>-Element anzuwenden, das unseren gesamten anderen Inhalt umschließt. Dies legt die Höhe des Containers mit height fest, sodass die Breite dieses Blockebenen-Elements standardmäßig 100% seines Elternteils beträgt. Durch das Setzen von display auf flex und das Hinzufügen eines 10px gap erstellen Sie einen Flex-Container, der die Kinder nebeneinander mit einem Abstand zwischen allen Kindern des Containers anordnet. Wir verwenden flex, um die Flex-Kinder wachsen zu lassen, um den Container zu füllen; das beeinflusst nicht den Flex-Container selbst.

Von mehr Interesse für unsere Diskussion hier ist die Verwendung der border-Eigenschaft, um einen Rahmen um den äußeren Rand des Elements zu erstellen. Dieser Rahmen ist eine durchgezogene Linie, 6 Pixel breit, 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 verwendet wird, um die Box auf der linken Seite zu stylen, legt die Hintergrundfarbe und die Umrisslinie fest:

• Die Hintergrundfarbe der Box wird festgelegt, indem der Wert der CSS-Eigenschaft background-color auf rgb(245 130 130) geändert wird, unter Verwendung der rgb()-Funktion.
• Ein Umriss wird für die Box definiert. Im Gegensatz zum häufiger verwendeten border beeinflusst outline das Layout überhaupt nicht; er überdeckt alles, was sich möglicherweise außerhalb der Box des Elements befindet, anstatt Platz zu schaffen, wie dies beim border der Fall ist. Dieser Umriss ist eine solide, dunkelrote Linie, die zwei Pixel dick ist. Beachten Sie die Verwendung des darkred-Schlüsselworts, wenn Sie die Farbe angeben.
• Beachten Sie, dass wir die Textfarbe nicht explizit festlegen. Das bedeutet, dass der Wert von color vom nächsten umschließenden 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: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

Abschließend setzt die Klasse .boxRight mehrere Stile auf die Box, die rechts gezeichnet wird. Dann werden die folgenden Farben festgelegt (unter Verwendung von fünf verschiedenen Möglichkeiten der Deklaration von Farbwerten):

• Die background-color wird unter Verwendung der hwb()-Funktion festgelegt — hwb(270deg 63% 13%). Dies ist eine mittlere violette Farbe.
• Der Umriss der Box wird verwendet, um anzugeben, dass die Box von einer vier Pixel dicken gestrichelten Linie umgeben sein soll, deren Farbe ein etwas tieferes Violett mit dem sechsstelligen <hex-color> #6e1478 ist.
• Die Vordergrund-(Text-)farbe wird durch Setzen der color-Eigenschaft unter Verwendung der hsl()-Funktion festgelegt — hsl(0deg 100% 100%). Dies ist eine der vielen Möglichkeiten, die Farbe Weiß anzugeben.
• Wir fügen mit der text-decoration-Kurzform und den Longhand-Komponenten für Browser-Kompatibilität eine grüne Wellenlinie unter dem Text hinzu. Wir verwendeten den 3-stelligen <hex-color> #8f8, der dem #88ff88 entspricht.
• Schließlich wird dem Text mit text-shadow ein leichter Schatten hinzugefügt. Sein color-Parameter ist auf black gesetzt, ein <named-color>-Wert.

Wir haben fünf verschiedene Farbsyntaxen verwendet, um zu demonstrieren, was möglich ist. In der realen Welt werden Sie und Ihr Team vorzugsweise eine bevorzugte Farbdarstellung wählen, wobei alle, die an einer Code-Basis arbeiten, dieselbe Farbsyntax verwenden.

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

Die Canvas API von HTML

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

SVG (Scalable Vector Graphics)

Ermöglicht das Erstellen von Bildern mit Befehlen, die bestimmte Formen, Muster und Linien zeichnen. SVG-Befehle sind im XML-Format und können direkt in eine Webseite eingebettet oder mit dem <img>-Element eingebunden 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. Auch WebGPU, ein Nachfolger von WebGL für moderne GPUs, ist erwähnenswert.

• <color> Datentyp
• Leitfaden zu CSS-Farbwerten
• Farben klug verwenden
• CSS-Farbmodul
• Grafiken zeichnen
• Grafiken im Web