Anwenden von Farbe auf HTML-Elemente mit CSS

Auf Elementebene kann alles in HTML mit Farbe versehen werden. Schauen wir uns die verschiedenen Objekte an, die auf der Seite gerendert werden – wie Text, Rahmen usw. Wir bieten Listen der CSS-Eigenschaften, die Farbe auf jedes anwenden.

Auf einer grundlegenden 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 bei nahezu jedem Element verwendet werden.

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

color

Die Farbe, die beim Zeichnen des Textes und jeglicher Textdekorationen (wie z. B. das Hinzufügen von Unter- oder Überstrichen, Durchstreichlinien 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 auf Basis der anderen Parameter verschwommen und mit dem Hintergrund vermischt wird). Weitere Informationen finden Sie unter Textschlagschatten.

text-decoration-color

Die Farbe der Standard-Textdekorationen (wie Unterstreichungen, Durchstreichungen usw.) ist currentcolor. Dieses Schlüsselwort stellt den aktuellen Wert der color-Eigenschaft dar. Sie können diesen Wert jedoch überschreiben und mit der text-decoration-color-Eigenschaft eine andere Farbe für sie verwenden.

text-emphasis-color

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

Jedes Element ist eine Box mit einer Art von Inhalt und hat zusätzlich zu allem, was der Boxinhalt sein mag, einen Hintergrund und einen Rahmen.

Rahmen

Sehen Sie sich den Abschnitt Rahmen für eine Liste der CSS-Eigenschaften an, mit denen Sie die Farben der Rahmen einer Box festlegen können.

background-color

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

box-shadow

Konfiguriert Innen- und Abwurfschatteneffekte auf der Box. Zu den Optionen für jeden Schatten gehört die Grundfarbe des Schattens (die dann verschwommen und auf der Basis weiterer Parameter mit jedem Hintergrund vermischt wird).

column-rule-color

Die Farbe, die beim Zeichnen der Linie verwendet wird, die Spalten von Texten trennt, wenn das CSS-Mehrspaltenlayout verwendet wird.

outline-color

Die Farbe, die zum Zeichnen eines Umrisses um die Außenseite des Elements verwendet wird. Dieser Umriss unterscheidet sich vom Rahmen darin, dass er keinen Platz dafür im Dokument reserviert. Umrisse nehmen nicht am Boxmodell teil und überlappen andere Inhalte. Umrisse werden in der Regel als Fokusindikatoren verwendet, um anzuzeigen, welches Element derzeit den Fokus hat und Keyboard-Ereignisse empfängt.

Jedes Element kann einen Rahmen um sich herum gezeichnet haben. Ein grundlegender Elementrahmen ist eine Linie, die um die Ränder des Inhalts des Elements gezeichnet wird. Siehe Das Boxmodell, um mehr über die Beziehung zwischen Elementen und ihren Rahmen zu erfahren, und den Artikel Styling von Rahmen mit CSS, um mehr über die Anwendung von Styles auf Rahmen zu erfahren.

Sie können die border-Kurzbeschreibung verwenden, mit der Sie alles am Rahmen in einem Durchgang konfigurieren können (einschließlich nichtfarblicher Merkmale von Rahmen, wie seine Breite, Stil (solid, dotted, etc.) usw.).

border-color Kurzbeschreibung

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

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

Damit können Sie die Farbe der entsprechenden Seite des Rahmens des Elements einstellen.

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

Mit diesen können Sie die Farbe einstellen, die verwendet wird, um die Rahmen zu zeichnen, die dem Start und Ende des Blocks am nächsten sind, den der Rahmen umgibt. In einem links-nach-rechts-Schreibmodus (wie es bei englischer Sprache der Fall ist) ist der Block-Start-Rahmen die obere Kante und der Block-Ende-Rahmen die untere. Dies unterscheidet sich vom Inline-Start und -Ende, die die linken und rechten Kanten sind (entsprechend dem, wo jede Textzeile in der Box beginnt und endet).

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

Damit können Sie die Kanten des Rahmens einfärben, die dem Beginn und dem Ende des Textanfangs innerhalb der Box am nächsten sind. Welche Seite dies ist, hängt vom writing-mode, direction, und text-orientation-Eigenschaft 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.

Nun, 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 ansehen. In diesem Beispiel verwenden wir mehrere der zuvor erwähnten Eigenschaften, wobei das Konzept der Anwendung von Farben in CSS dasselbe ist, unabhängig von der Eigenschaft.

Lassen Sie uns zuerst das Ergebnis ansehen, bevor wir uns den Code ansehen, den wir dafür benötigen:

Das für die Erstellung des obigen Beispiels verantwortliche HTML wird hier angezeigt:

<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 Wrapper-<div>, das zwei untergeordnete <div>s enthält, von denen jedes einen einzelnen untergeordneten Absatz (<p>) hat. Jedes Inhalts-<div> erhält ein anderes Aussehen und Gefühl.

Schauen wir uns das CSS, das das obige Ergebnis erzeugt, stückweise an.

.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 Styles auf das <div> anzuwenden, das unseren gesamten anderen Inhalt umschließt. Dies legt die Höhe des Containers mithilfe von height fest und ermöglicht es, dass die Breite dieses Block-Elementes standardmäßig 100% seines Elternteils ist. Durch das Setzen von display auf flex und das Hinzufügen eines 10px gap wird ein Flex-Container erstellt, 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 zu füllen; es wirkt sich nicht auf den Flex-Container selbst aus.

Von größerem Interesse für unsere Diskussion hier ist die Verwendung der border-Eigenschaft, um eine Umrandung um die Außenkante des Elements zu etablieren. Diese Umrandung 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 zur Formatierung der Box auf der linken Seite verwendet wird, richtet die Farbe des Hintergrunds und des Umrisses ein:

• Die Hintergrundfarbe der Box wird durch Ändern des Wertes der CSS-background-color-Eigenschaft auf rgb(245 130 130) gesetzt, unter Verwendung der rgb()-Funktionale Notation.
• Ein Umriss wird für die Box definiert. Im Gegensatz zum häufiger verwendeten border wirkt sich outline überhaupt nicht auf das Layout aus; es zeichnet über das, was vielleicht außerhalb des Box-Inhalts des Elements ist, anstatt Raum dafür zu schaffen, wie es border tut. Dieser Umriss ist eine solide, dunkle rote Linie, die zwei Pixel dick ist. Beachten Sie die Verwendung des darkred Schlüsselworts bei der Angabe der Farbe.
• Beachten Sie, dass wir die Textfarbe nicht explizit festlegen. Das bedeutet, dass der Wert von color vom nächstgelegenen enthaltenen Element, das ihn definiert, vererbt wird. Standardmäßig ist dies 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;
}

Zuletzt setzt die .boxRight Klasse mehrere Styles auf die Box, die rechts gezeichnet wird. Dann werden die folgenden Farben festgelegt (unter Verwendung von fünf verschiedene Wege, Farbwerte anzugeben):

• Die background-color wird unter Verwendung der hwb()-funktionalen Notation festgelegt — hwb(270deg 63% 13%). Dies ist eine mittlere lila Farbe.
• Der Umriss der Box wird verwendet, um anzugeben, dass die Box von einer vier Pixel dicken gestrichelten Linie in einer etwas tieferen lila Farbe mit dem sechsstelligen <hex-color> #6e1478 umschlossen wird.
• Die Vordergrundfarbe (Text) wird festgelegt, indem die color-Eigenschaft mithilfe der hsl()-funktionalen Notation festgelegt wird — hsl(0deg 100% 100%). Dies ist eine von vielen Möglichkeiten, die Farbe Weiß anzugeben.
• Wir fügen eine grüne gewellte Linie unter dem Text mit der text-decoration-Kurzbeschreibung hinzu, zusammen mit der Langhand-Komponente für die Browser-Kompatibilität. Wir haben die 3-stellige <hex-color> #8f8 verwendet, die dem #88ff88 entspricht.
• Schließlich wird mit text-shadow ein leichter Schatten auf das Wort angewendet. Der 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 Farbnomenklatur auswählen, wobei jeder, der an einem Codebase arbeitet, dieselbe Farbsyntax verwendet.

CSS ist nicht die einzige Web-Technologie, die Farben unterstützt. Weitere Beispiele sind:

Die HTML Canvas API

Erlaubt Ihnen die Zeichnung von zweidimensionalen Bitmaps in einem <canvas>-Element. Siehe unser Canvas-Tutorial um mehr zu erfahren.

SVG (Scalable Vector Graphics)

Damit können Sie Bilder mit Befehlen erstellen, die spezifische Formen, Muster und Linien zeichnen. SVG-Befehle sind im XML-Format und können direkt in eine Webseite eingebettet oder mithilfe des <img>-Elements in die Seite eingebaut werden, genau wie jede andere Art von Bild.

WebGL

Die Web Graphics Library ist eine auf OpenGL ES basierende API zur Zeichnung 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
• CSS: Farbwerte-Leitfaden
• Farben weise einsetzen
• CSS Farbschema
• Grafiken zeichnen