Anwenden von Farbe auf HTML-Elemente mit CSS

Eigenschaften, die Farbe haben können

Auf Elementebene kann alles in HTML Farbe erhalten. Lassen Sie uns die verschiedenen Elemente betrachten, die auf der Seite gerendert werden – wie z.B. Text, Ränder, usw. Wir stellen Ihnen Listen der CSS-Eigenschaften zur Verfügung, die Farbe auf jedes Element 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.

Text

Sobald 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 Überstreichungen, Durchstreichungen 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 Basisfarbe des Schattens (die dann basierend auf den anderen Parametern mit dem Hintergrund verwischt und gemischt wird). Mehr dazu erfahren Sie unter Textschlagschatten.

text-decoration-color

Die Standardfarbe von 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 Zeichnen 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 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 Elementen, deren HTML contenteditable Attribut auf true gesetzt ist.

Boxen

Jedes Element ist eine Box mit irgendeinem Inhalt und hat einen Hintergrund und einen Rahmen zusätzlich zu den Inhalten, die die Box haben kann.

Ränder

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

background-color

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

box-shadow

Konfiguriert Einlassschatten- 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 mit jedem Hintergrund verwischt und gemischt wird).

column-rule-color

Die Farbe, die verwendet wird, um die Linie zu zeichnen, die Texthäsulen bei Verwendung des CSS-Mehrspaltenlayouts trennt.

outline-color

Die Farbe, die verwendet wird, um eine Umrisslinie um das Außerelement des Elements zu zeichnen. Dieser Umriss unterscheidet sich vom Rand dadurch, dass dafür im Dokument kein Platz reserviert wird. Umrisse beteiligen sich nicht am Boxmodell und überlappen anderen Inhalt. Umrisse werden im Allgemeinen als Fokusindikatoren verwendet, um anzuzeigen, welches Element aktuell den Fokus hat und Tastatureingaben erhält.

Ränder

Jedes Element kann einen Rahmen um sich herum haben. Ein grundlegender Rahmen eines Elements ist eine Linie, die um die Ränder des Inhalts des Elements gezogen wird. Weitere Informationen über die Beziehung zwischen Elementen und ihren Rahmen finden Sie unter Das Boxmodell und im Artikel Stylen von Rahmen mit CSS, 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 in einem einzigen Schritt konfigurieren können (einschließlich nicht-farbbezogener Merkmale von Rahmen wie Breite, Stil (durchgezogen, gestrichelt usw.).

border-color Kurzschreibweise

Gibt eine einzige 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 Rahmens des Elements festzulegen.

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

Damit können Sie die Farbe festlegen, die zum Zeichnen der Rahmen verwendet wird, die am nächsten zum Anfang und Ende des Blocks sind, den der Rahmen umgibt. In einer von links nach rechts verlaufenden Schreibrichtung (wie Englisch geschrieben wird) ist der Blockanfangsrand die obere Kante und der Blockendrand die untere. Dies unterscheidet sich vom Inline-Anfang und -Ende, die die linken und rechten Ränder sind (entsprechend dem Anfang und Ende jeder Textzeile im Kasten).

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

Damit können Sie die Ränder des Rahmens färben, die am nächsten zum Anfang und Ende der Textzeilen innerhalb der Box liegen. Welche Seite dies ist, hängt von den Eigenschaften writing-mode, direction, und text-orientation ab, die typischerweise (aber nicht immer) verwendet werden, um die Schreibrichtung basierend auf der dargestellten Sprache anzupassen. Beispielsweise, wenn der Text der Box von rechts nach links dargestellt wird, wird border-inline-start-color auf der rechten Seite des Rahmens angewendet.

Farben als Werte in Stylesheets angeben

Jetzt, da Sie wissen, welche CSS-Eigenschaften es Ihnen erlauben, 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 zuvor erwähnte Eigenschaften, wobei das Konzept der Anwendung von Farben in CSS unabhängig von der Eigenschaft das gleiche bleibt.

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

HTML

Das für das obige Beispiel 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 äußeren <div>, der zwei Kinder <div>s enthält, jeweils mit einem einzelnen Kindelement (<p>). Jedes Inhaltselement <div> hat ein unterschiedliches Aussehen.

CSS

Lassen Sie uns das CSS betrachten, das das obige Ergebnis schrittweise 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 die <div> anzuwenden, die all unsere anderen Inhalte umschließt. Dies stellt die Höhe des Containers mit height ein und ermöglicht es der Breite dieses Blockelementes standardmäßig auf 100% seines Elternteils zu wachsen. Das display wird auf flex gesetzt und ein gap von 10px hinzugefügt, um ein Flex-Container zu erzeugen, um die Kinder nebeneinander mit einem Abstand zwischen allen Kinder des Containers anzuordnen. Wir verwenden flex, um den flexiblen Kindern zu ermöglichen, den Container auszufüllen; es hat keinen Effekt auf den Flex-Container selbst.

Von größerem 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 Box und eine rechte Box.

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

Die .boxLeft Klasse, die verwendet wird, um den Kasten links zu gestalten, legt die Farbe des Hintergrunds und den Umriss fest:

• Die Hintergrundfarbe der Box wird durch Ändern des Werts der CSS background-color Eigenschaft auf rgb(245 130 130) unter Verwendung der rgb() Funktionalschreibweise festgelegt.
• Ein Umriss wird für die Box definiert. Anders als der gebräuchlichere border beeinflusst outline das Layout überhaupt nicht; es zeichnet sich über das, was außerhalb des Elements zu finden sein mag, anstatt wie border Platz zu beanspruchen. Dieser Umriss ist eine durchgezogene, 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 setzen. Das bedeutet, dass der Wert von color vom nächsten übergeordneten Element, das dies definiert, vererbt 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 für die Box in der rechten Seite. Dann werden die folgenden Farben festgelegt (unter Verwendung von fünf verschiedenen Arten der Deklaration von Farbwerten):

• Die background-color wird unter Verwendung der hwb() Funktionalschreibweise festgelegt — hwb(270deg 63% 13%). Dies ist eine mittlere Purpurfarbe.
• Der outline der Box wird verwendet, um anzugeben, dass die Box in einer vier Pixel dicken gestrichelten Linie eingeschlossen werden soll, deren Farbe ein etwas dunkleres Purpur unter Verwendung des sechsstelligen <hex-color> #6e1478 ist.
• Die Vordergrund- (Text)farbe wird durch Setzen der color Eigenschaft unter Verwendung der hsl() Funktionalschreibweise festgelegt — hsl(0deg 95% 95%). Dies ist eine sehr helle, rosa-ähnliche Farbe.
• Wir fügen mit der text-decoration Kurzschreibweise und der Langhandkomponente für Browser-Kompatibilität eine grüne Wellenlinie unter dem Text hinzu. Wir verwendeten den 3-stelligen <hex-color> #8f8, was dem Äquivalent von #88ff88 entspricht.
• Schließlich wird ein wenig Schatten zum Text hinzugefügt mit text-shadow. Sein color Parameter ist auf black gesetzt, ein <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 wählen, mit der alle Entwickler am gleichen Code-Basis arbeiten.

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 es Ihnen, 2D-Bitmap-Grafiken 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 im XML-Format und können direkt in eine Webseite eingebettet oder mit dem <img>-Element in die Seite platziert werden, genau wie jeder andere Bildtyp.

WebGL

Die Web Graphics Library ist eine auf OpenGL ES basierende API, um hochleistungsfähige 2D- und 3D-Grafiken im Web zu zeichnen. Sehen Sie sich unser WebGL-Tutorial an, um mehr zu erfahren. Auch sehen Sie sich WebGPU an, einen Nachfolger von WebGL für moderne GPUs.

Siehe auch

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