Anwenden von Farbe auf HTML-Elemente mit CSS

Eigenschaften, die Farbe haben können

Auf Elementebene kann allem in HTML Farbe zugewiesen werden. Lassen Sie uns die verschiedenen auf der Seite gerenderten Elemente betrachten — wie Text, Rahmen usw. Wir werden Listen der CSS-Eigenschaften bereitstellen, die Farbe auf jedes Element 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 nahezu jedes Element angewendet werden.

Text

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

color

Die Farbe, die beim Zeichnen des Textes und jeglicher Textdekorationen (wie das Hinzufügen von Unter- oder Überstrichen, Durchstreichungslinien usw.) verwendet wird.

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 verschwommen und mit dem Hintergrund gemischt wird). Weitere Informationen finden Sie unter Textschlagschatten.

text-decoration-color

Die Standardfarbe für Textdekorationen (wie Unterstreichungen, Durchstreichungen usw.) ist currentColor. Dieses Schlüsselwort repräsentiert den aktuellen Wert der color-Eigenschaft. Dennoch können Sie diesen Wert überschreiben und mit der text-decoration-color-Eigenschaft eine andere Farbe festlegen.

text-emphasis-color

Die Farbe zur Darstellung von Hervorhebungssymbolen neben jedem Zeichen im Text. Dies wird hauptsächlich beim Zeichnen von Text für ostasiatische Sprachen verwendet.

caret-color

Die Farbe, die bei der Darstellung der Einfügemarke (manchmal auch als Textcursor bezeichnet) innerhalb des Elements verwendet wird. Dies ist nur in bearbeitbaren Elementen nützlich, wie <input> und <textarea> oder in Elementen, deren HTML-Attribut contenteditable auf true gesetzt ist.

Boxen

Jedes Element ist eine Box mit irgendeiner Art von Inhalt und hat einen Hintergrund und einen Rahmen zusätzlich zu den Inhalten, die die Box haben könnte.

Rahmen

Siehe den Abschnitt Rahmen 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 werden soll, die keinen Vordergrundinhalt haben.

box-shadow

Konfiguriert Schatteneffekte an der Innenseite und herabfallende Schatten auf der Box. Zu den Optionen für jeden Schatten gehört die Grundfarbe des Schattens (die dann basierend auf den anderen Parametern verschwommen und mit dem Hintergrund gemischt wird).

column-rule-color

Die Farbe, die beim Zeichnen der Linie verwendet wird, die Textspalten trennt, wenn CSS Multi-Column Layout verwendet wird.

outline-color

Die Farbe, die beim Zeichnen eines Umrisses um die Außenseite des Elements verwendet wird. Dieser Umriss unterscheidet sich vom Rahmen dadurch, dass ihm im Dokument kein Platz zugewiesen wird. Umrisse nehmen nicht an dem Box-Modell teil und überlappen andere Inhalte. Umrisse werden im Allgemeinen als Fokusindikatoren verwendet, die anzeigen, welches Element derzeit den Fokus hat und Tastatureingaben erhalten wird.

Rahmen

Jedes Element kann einen Rahmen haben, der darum gezeichnet wird. Ein grundlegender Elementrahmen ist eine Linie, die um die Kanten des Inhalts des Elements gezeichnet wird. Um mehr über die Beziehung zwischen Elementen und ihren Rahmen zu erfahren, siehe Das Box-Modell. Mehr darüber, wie man Rahmenstile anwendet, erfahren Sie in dem Artikel Rahmen mit CSS gestalten.

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

border-color Kurzschreibweise

Gibt eine einzige Farbe an, die für jede Seite des Rahmen des Elements verwendet wird.

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

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

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

Damit können Sie die Farbe festlegen, die verwendet wird, um die Rahmen zu zeichnen, die dem Anfang und Ende des Blocks am nächsten sind, den der Rahmen umgibt. In einem von links nach rechts Schreibrichtungsmodus (wie im Englischen) ist der Startblockrahmen die obere Kante und das Ende des Blocks die untere. Dies unterscheidet sich von den inline Start- und Endrahmen, die die linke und rechte Kante sind (entsprechend dem, wo jede Textzeile in der Box 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 Textzeilen in der Box am nächsten 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 Textausrichtung basierend auf der angezeigten Sprache anzupassen. Wenn zum Beispiel der Text der Box von rechts nach links gerendert wird, wird die border-inline-start-color auf die rechte Seite des Rahmens angewendet.

Farben als Werte in Stylesheets angeben

Nachdem Sie nun wissen, welche CSS-Eigenschaften es Ihnen ermöglichen, Farbe auf Elemente anzuwenden, können Sie beginnen, Farben auf Ihre Webseiten hinzuzufügen. Lassen Sie uns einige Beispiele für die Verwendung von Farbe in einem Stylesheet betrachten. In diesem Beispiel verwenden wir mehrere zuvor erwähnte Eigenschaften, wobei das Konzept des Anwendens von Farben in CSS dasselbe ist, unabhängig von der Eigenschaft.

Schauen wir uns zuerst das Ergebnis an, bevor wir uns dem erforderlichen Code widmen:

HTML

Das HTML, das für das obige Beispiel 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, von denen jedes ein einziges untergeordnetes Paragraphen-Element (<p>) enthält. Jedes Inhalts-<div> erhält einen anderen Look und Feel.

CSS

Lassen Sie uns die CSS betrachten, die 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 dem <div> zuzuweisen, der alle unsere anderen Inhalte umschließt. Dies legt die Höhe des Containers mithilfe von height fest und ermöglicht es, dass die Breite dieses Block-Level-Elements standardmäßig 100 % seiner Eltern beträgt. Das Setzen von display auf flex und das Hinzufügen eines 10px gap erzeugt einen Flexcontainer, um die Kinder nebeneinander mit einem Abstand zwischen allen Kindern des Containers anzuordnen. Wir verwenden flex, um den Flex-Kindern zu erlauben, den Container zu füllen; es beeinflusst nicht den Flexcontainer selbst.

Interessanter für unsere Diskussion hier ist die Verwendung der border-Eigenschaft, 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 auf der linken Seite zu gestalten, legt die Farbe des Hintergrunds und des Umrisses fest:

• Die Hintergrundfarbe der Box wird durch Ändern des Werts der CSS-background-color-Eigenschaft auf rgb(245 130 130) festgelegt, unter Verwendung der rgb() Funktionsnotation.
• Ein Umriss wird für die Box definiert. Im Gegensatz zu dem häufiger verwendeten border beeinflusst outline das Layout überhaupt nicht; es wird über allem gezeichnet, was sich außerhalb der Box des Elements befinden mag, anstatt Platz zu beanspruchen, 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 festlegen. Das bedeutet, dass der Wert der color-Eigenschaft vom nächstgelegenen enthaltenen Element, das sie definiert, übernommen 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;
}

Zuletzt setzt die .boxRight-Klasse mehrere Stile auf die Box, die rechts gezeichnet wird. Die folgenden Farben werden dann (unter Verwendung von fünf verschiedenen Arten der Deklaration von Farbwerten) festgelegt:

• Die background-color wird unter Verwendung der hwb() Funktionsnotation eingestellt — hwb(270deg 63% 13%). Dies ist eine mittlere violette Farbe.
• Der outline der Box wird verwendet, um anzugeben, dass die Box von einer vier Pixel dicken gestrichelten Linie umgeben sein sollte, deren Farbe ein etwas tieferes Violett ist, unter Verwendung des sechsstelligen <hex-color> #6e1478.
• Die Vordergrundfarbe (Text) wird durch das Setzen der color-Eigenschaft unter Verwendung der hsl() Funktionsnotation festgelegt — hsl(0deg 95% 95%). Dies ist eine sehr hellrosa Farbe.
• Wir fügen eine grüne gewellte Linie unter dem Text hinzu, text-decoration mit dem Kürzel, zusammen mit der Langhandschrift für die Browser-Kompatibilität. Wir verwenden den 3-stelligen <hex-color> #8f8, was dem #88ff88 entspricht.
• Schließlich wird dem Text ein kleiner Schatten mit text-shadow hinzugefügt. Sein color-Parameter wird auf black, ein <named-color>-Wert, eingestellt.

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 Farbschreibweise wählen, bei der jeder, der an einer Codebasis arbeitet, dieselbe Farbsyntax verwendet.

Andere Möglichkeiten, Farbe zu verwenden

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

Die HTML Canvas API

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 die Erstellung von Bildern mithilfe von Befehlen, die bestimmte Formen, Muster und Linien zeichnen. SVG-Befehle sind als XML formatiert und können direkt in eine Webseite eingebettet oder mithilfe des <img>-Elements in die Seite eingefügt werden, wie jedes andere Bild auch.

WebGL

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

Siehe auch

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