Farben 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, Rahmen usw. Wir stellen Listen der CSS-Eigenschaften bereit, die Farben auf jedes anwenden.

Auf fundamentaler Ebene definiert die color-Eigenschaft die Vordergrundfarbe des Inhalts eines HTML-Elements und die background-color-Eigenschaft die Hintergrundfarbe des Elements. Diese können für praktisch jedes Element verwendet werden.

Wann immer ein Element gerendert wird, werden diese Eigenschaften verwendet, um die Farbe des Textes, seinen Hintergrund und alle Dekorationen auf dem Text zu bestimmen.

color

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

background-color

Die Hintergrundfarbe des Textes.

text-shadow

Konfiguriert einen Schatteneffekt, der auf den Text angewendet wird. Unter den Optionen für den Schatten ist die Grundfarbe des Schattens (die dann basierend auf den anderen Parametern verschwommen und mit dem Hintergrund vermischt wird). Mehr erfahren unter Textschatteneffekte.

text-decoration-color

Die Standard-Textdekorationen (wie Unterstreichungen, Durchstreichungen usw.) Farbe ist currentcolor. Dieses Schlüsselwort repräsentiert den aktuellen Wert der color-Eigenschaft. Sie können jedoch diesen Wert ü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 in ostasiatischen Sprachen verwendet.

caret-color

Die Farbe, die beim Zeichnen des Cursors (manchmal auch als Texteingabecursor 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 irgendeinem Inhalt und hat einen Hintergrund und einen Rahmen zusätzlich zu allem, was der Boxinhalt darstellen kann.

Rahmen

Siehe den Abschnitt Rahmen 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 ohne Vordergrundinhalt verwendet wird.

box-shadow

Konfiguriert Einlagen- und Schlagschatteneffekte auf der Box. Unter den Optionen für jeden Schatten ist die Grundfarbe des Schattens (die dann basierend auf den anderen Parametern verschwommen und mit einem Hintergrund vermischt wird).

column-rule-color

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

outline-color

Die Farbe, die beim Zeichnen einer Umrisslinie um die Außenseite des Elements verwendet wird. Dieser Umriss unterscheidet sich vom Rahmen dadurch, dass er keinen Platz im Dokument beansprucht. Umrisse nehmen nicht am Boxmodell teil und überlappen anderen Inhalt. Umrisse werden allgemein als Fokusindikatoren verwendet, um anzuzeigen, welches Element derzeit den Fokus hat und Tastatureingabeereignisse erhält.

Jedes Element kann einen Rahmen um sich herum haben. Ein grundlegender Elementrahmen ist eine Linie, die um die Kanten des Elementinhalts gezeichnet wird. Siehe Das Boxmodell, um mehr über die Beziehung zwischen Elementen und ihren Rahmen zu erfahren und den Artikel Rahmengestaltung mit CSS, um mehr über die Anwendung von Stilen auf Rahmen zu erfahren.

Sie können die border-Kurzschreibweise verwenden, mit der Sie alles über den Rahmen in einem Schritt konfigurieren können (einschließlich nicht-Farbmerkmale des Rahmens, wie seine Breite, Stil (solid, gestrichelt usw.) und weitere.

border-color-Kurzschreibweise

Gibt eine einzige Farbe an, die für jede Seite des Elementrahmens verwendet werden soll.

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

Ermöglicht es Ihnen, die Farbe der jeweiligen Seite des Elementrahmens 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, den der Rahmen umgibt, sind. In einem von links nach rechts Schreibmodus (wie Englisch geschrieben wird) ist der Anfangsrahmen die obere Kante und das Ende der untere. Dies unterscheidet sich vom Inline-Anfang und -Ende, die die linken und rechte Kanten sind (entsprechend dem Beginn und Ende jeder Textzeile in der Box).

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

Diese ermöglichen es Ihnen, die Kanten des Rahmens einzufärben, die am nächsten zu Beginn und Ende der Textzeilen innerhalb der Box liegen. Welche Seite dies ist, hängt von den writing-mode, direction, und text-orientation-Eigenschaften ab, die typischerweise (aber nicht immer) verwendet werden, um die Textrichtung basierend auf der angezeigten Sprache anzupassen. Zum Beispiel, wenn der Text der Box von rechts nach links gerendert wird, dann wird border-inline-start-color auf die rechte Seite des Rahmens angewendet.

Nun, 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 an, wie man Farbe innerhalb eines Stylesheets verwendet. In diesem Beispiel verwenden wir mehrere zuvor erwähnte Eigenschaften, wobei das Konzept der Anwendung von Farben in CSS dasselbe ist, unabhängig von der Eigenschaft.

Schauen wir uns zunächst das Ergebnis an, bevor wir uns den Code genauer ansehen, den wir dafür benötigen:

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 Kind-<div>s enthält, jede mit einem einzelnen Kindabsatz (<p>). Jeder Inhalt <div> erhält ein anderes 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 .wrapper-Klasse wird verwendet, um Stile dem <div>, das unseren gesamten anderen Inhalt einschließt, zuzuweisen. Dadurch wird die Höhe des Containers mit height festgelegt, wobei die Breite dieses Blockelementes standardmäßig 100% seines übergeordneten Elements entspricht. Die Festlegung von display auf flex und die Hinzufügung von 10px gap erzeugt einen Flexcontainer, um die Kinder nebeneinander mit einem Abstand zwischen allen Kindern des Containers anzuordnen. Wir verwenden flex, um die Flex-Kinder wachsen zu lassen, um den Container auszufüllen; es wirkt sich nicht auf den Flexcontainer selbst aus.

Von größerem Interesse für unsere Diskussion hier ist die Verwendung der border-Eigenschaft, um einen Rahmen um die Außenkante des Elements zu etablieren. 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 die Box auf der linken Seite zu stylen, legt die Farbe des Hintergrunds und des Rahmens fest:

• Die Hintergrundfarbe der Box wird durch Ändern des Wertes der CSS-background-color-Eigenschaft in rgb(245 130 130) festgelegt, unter Verwendung der rgb() Funktionsnotation.
• Ein Rahmen ist für die Box definiert. Im Gegensatz zu der häufiger verwendeten border wirkt sich outline überhaupt nicht auf das Layout aus; es wird über was auch immer außerhalb des Elemente-Boxes liegt, anstelle Platz zu schaffen wie border. Dieser Rahmen ist eine durchgehende, dunkelrote Linie, die zwei Pixel dick ist. Beachten Sie die Verwendung des darkred Schlüsselworts bei der Festlegung der Farbe.
• Beachten Sie, dass wir die Textfarbe nicht explizit festlegen. Das bedeutet, dass der Wert von color vom nächstgelegenen enthaltenden 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 100% 100%);
  text-decoration: 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 der Box, die rechts gezeichnet wird. Dann werden die folgenden Farben festgelegt (unter Verwendung von fünf verschiedenen Möglichkeiten zur Deklaration von Farbwerten):

• Der background-color wird mit der hwb() Funktionsnotation festgelegt — hwb(270deg 63% 13%). Dies ist eine mittlere lila Farbe.
• Der Rahmen (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 Lila ist, mit dem sechsstelligen <hex-color> #6e1478.
• Die Vordergrund-(Text)-Farbe wird durch Festlegen der color-Eigenschaft mit der hsl() Funktionsnotation — hsl(0deg 100% 100%) angegeben. Dies ist eine von vielen Möglichkeiten, die Farbe Weiß zu spezifizieren.
• Wir fügen mit dem text-decoration-Kurzschreibweise, zusammen mit der Langhandkomponente zur Browser-Kompatibilität, eine grüne wellenförmige Linie unter dem Text hinzu. Wir benutzten den 3-stelligen <hex-color> #8f8, was dem #88ff88 entspricht.
• Schließlich wird ein kleiner Schatten dem Text mit text-shadow hinzugefügt. Sein Farb-Parameter ist auf black, einen <named-color>-Wert, eingestellt.

Wir verwendeten fünf verschiedene Farb-Syntaxe, um zu demonstrieren, was möglich ist. In der realen Welt werden Sie und Ihr Team vorzugsweise eine bevorzugte Farbnotation auswählen, wobei alle, die an einer Codebasis arbeiten, dieselbe Farbsyntax verwenden.

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

Die HTML Canvas-API

Ermöglicht das Zeichnen zweidimensionaler Bitmap-Grafiken in einem <canvas>-Element. Siehe unser Canvas-Tutorial, 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 verfasst und können direkt in eine Webseite eingebettet oder mit dem <img>-Element wie jede andere Art von Bild 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, ein Nachfolger von WebGL für moderne GPUs.

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