Farbe auf HTML-Elemente mit CSS anwenden

Eigenschaften, die Farben haben können

Auf Elementebene kann allem in HTML eine Farbe zugewiesen werden. Lassen Sie uns die verschiedenen Elemente betrachten, die auf der Seite angezeigt werden — wie Text, Ränder usw. Wir bieten Listen der CSS-Eigenschaften, die Farbe auf jedes anwenden.

Auf fundamentaler 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

Wann immer ein Element gerendert wird, werden diese Eigenschaften verwendet, um die Farbe des Textes, dessen Hintergrund und aller Dekorationen am Text zu bestimmen.

color

Die Farbe, die beim Zeichnen des Textes und der Textdekorationen verwendet wird (wie das Hinzufügen von Unter- oder Oberstrichen, Durchstreichungen usw.).

background-color

Die Hintergrundfarbe des Textes.

text-shadow

Konfiguriert einen Schattierungseffekt, 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 mit dem Hintergrund verwischt und vermischt wird). Siehe Textschatten, um mehr zu erfahren.

text-decoration-color

Die Farbe der Standard-Textdekorationen (wie Unterstriche, 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 Hervorhebungssymbolen 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 als Texteingabe-Cursor 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.

Kästen

Jedes Element ist ein Kasten mit einer Art Inhalt und hat einen Hintergrund und eine Begrenzung zusätzlich zu dem, was der Kasten möglicherweise enthält.

Ränder

Siehe den Abschnitt Ränder für eine Liste der CSS-Eigenschaften, mit denen Sie die Farben der Ränder eines Kastens festlegen können.

background-color

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

box-shadow

Konfiguriert Einfügungs- und Schatteneffekte auf dem Kasten. Zu den Optionen für jeden Schatten gehört die Grundfarbe des Schattens (die dann basierend auf den anderen Parametern mit jedem Hintergrund verwischt und vermischt wird).

column-rule-color

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

outline-color

Die Farbe, die beim Zeichnen eines Umrisses um die Außenseite des Elements verwendet wird. Dieser Umriss unterscheidet sich von der Rand, da ihm im Dokument kein Platz zugewiesen wird. Umrisse nehmen nicht am Box-Modell teil und überlappen sich mit anderen Inhalten. Umrisse werden im Allgemeinen als Fokus-Indikatoren verwendet, um anzuzeigen, welches Element aktuell den Fokus hat und Tastatureingabe-Ereignisse erhält.

Ränder

Jedes Element kann einen Rand um sich haben. Ein einfacher Elementrand ist eine Linie, die um die Kanten des Inhalts des Elements gezeichnet wird. Siehe Das Box-Modell, um die Beziehung zwischen Elementen und ihren Rändern zu lernen, und den Artikel Ränder mit CSS stylen, um mehr darüber zu lernen, wie man Stile auf Ränder anwendet.

Sie können die border Kurzschreibweise verwenden, die es Ihnen ermöglicht, alles über den Rand in einem Schritt zu konfigurieren (einschließlich nicht-farbiger Merkmale von Rändern, wie Breite, Stil (solide, gestrichelt usw.) und so weiter.

border-color Kurzform

Gibt eine einzelne Farbe an, die für jede Seite des Randes eines 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 Randes des Elements 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 dem Anfang und dem Ende des Blocks, den der Rand umgibt, am nächsten sind. In einem von links nach rechts verlaufenden Schreibmodus (so wie Englisch geschrieben wird), ist der Blockanfangrand die obere Kante und das Blockende ist die untere. Dies unterscheidet sich vom Inline-Anfang und -Ende, die die linken und rechten Kanten sind (entsprechend dem, wo jede Textzeile im Kasten beginnt und endet).

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

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

Farben als Werte in Stylesheets angeben

Jetzt, da Sie wissen, welche CSS-Eigenschaften es Ihnen ermöglichen, Farbe auf Elemente anzuwenden, können Sie beginnen, Farben zu Ihren Websites hinzuzufügen. Lassen Sie uns einige Beispiele für die Verwendung von Farbe innerhalb eines Stylesheets betrachten. 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 dazu benötigen:

HTML

Der HTML-Code, der dafür verantwortlich ist, das obige Beispiel zu erstellen, 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 Wrapping-<div>, das zwei Kind-<div>s enthält, jeweils mit einem einzelnen Kind-Paragraf (<p>). Jedes Inhalts-<div> erhält ein anderes Aussehen und Gefühl.

CSS

Lassen Sie uns uns das CSS ansehen, 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. Dies legt die Höhe des Containers unter Verwendung von height fest und erlaubt, dass die Breite dieses Blocklevel-Elements auf 100% seines Elternteils standardmäßig gesetzt wird. Das Setzen von display auf flex mit einem gap von 10px erstellt einen Flex-Container, um die Kinder nebeneinander mit einem Abstand zwischen allen Kindern des Containers anzuordnen. Wir verwenden flex, um die Flex-Kinder in den Container wachsen zu lassen; es betrifft nicht den Flex-Container selbst.

Von größerem Interesse für unsere Diskussion hier ist die Verwendung der Eigenschaft border, um einen Rand um den äußeren Rand des Elements zu etablieren. Dieser Rand 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 .boxLeft-Klasse, die verwendet wird, um die Box links zu stylen, legt die Hintergrundfarbe und den Umriss fest:

• Die Hintergrundfarbe der Box wird durch Ändern des Werts der CSS-Eigenschaft background-color auf rgb(245 130 130) gesetzt, unter Verwendung der rgb() Funktionsnotation.
• Für die Box wird ein Umriss definiert. Anders als der häufiger verwendete border wirkt sich outline nicht auf das Layout aus; es wird über die Spitze dessen gezeichnet, was sich möglicherweise außerhalb des Box-Elements befindet, anstatt Platz zu schaffen, wie es border tut. Dieser Umriss ist eine solide, dunkelrote Linie, die zwei Pixel dick ist. Beachten Sie die Verwendung des darkred-Schlüsselworts beim Angeben der Farbe.
• Beachten Sie, dass wir die Textfarbe nicht explizit setzen. Das bedeutet, dass der Wert von color von dem nächsten umgebenden Element, das es definiert, geerbt wird. Standardmäßig ist das 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 setzt die .boxRight-Klasse mehrere Stile auf die Box, die rechts gezeichnet wird. Dann werden die folgenden Farben festgelegt (unter Verwendung von fünf verschiedenen Möglichkeiten, Farbwerte anzugeben):

• Die background-color wird mit der Notation hwb() gesetzt — hwb(270deg 63% 13%). Dies ist eine mittlere lila Farbe.
• Der outline der Box wird verwendet, um anzugeben, dass die Box von einer vier Pixel dicken gestrichelten Linie umgeben sein soll, dessen Farbe ein etwas tieferes Lila ist, unter Verwendung des sechsstelligen <hex-color> #6e1478.
• Die Vordergrundfarbe (Text) wird festgelegt, indem die Eigenschaft color unter Verwendung der Notation hsl() angegeben wird — hsl(0deg 95% 95%). Dies ist eine sehr helle rosa Farbe.
• Wir fügen mit text-decoration eine grüne gewellte Linie unter dem Text hinzu, zusammen mit der Langformkomponente für Browser-Kompatibilität. Wir verwendeten die 3-stellige <hex-color> #8f8, was dem Äquivalent von #88ff88 entspricht.
• Schließlich wird mit text-shadow ein kleiner Schatten dem Text hinzugefügt. Sein color-Parameter ist auf black, einem <named-color>-Wert, gesetzt.

Wir haben fünf verschiedene Farbsynaxen 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-Bereich arbeitet, dieselbe Farbsyntax verwendet.

Andere Möglichkeiten, Farbe zu verwenden

CSS ist nicht die einzige Web-Technologie, die Farbe unterstützt. Andere Beispiele umfassen:

Die HTML Canvas API

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

SVG (Scalable Vector Graphics)

Ermöglicht das Erstellen 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 über das <img>-Element platziert werden, genau wie jeder andere Bildtyp.

WebGL

Die Web Graphics Library ist eine auf OpenGL ES basierende API für das Zeichnen von Hochleistungs-2D- und 3D-Grafiken im Web. Siehe unser WebGL-Tutorial, um mehr zu erfahren. Siehe auch WebGPU, ein Nachfolger von WebGL für moderne GPUs.

Siehe auch

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