Arbeiten mit HTML-Farbe – Hintergrund-, Rahmen- und Textfarben
Wie man HTML-Farben verwendet
Design ist kein zentrales Merkmal von HTML, daher gibt es keinen speziellen HTML-Farb-Tag. Sie können jedoch die Farbe eines beliebigen Textes mit den folgenden Methoden ändern:
Verwendung des Inline-Attributs “style “ Das Hinzufügen von Farbe zu einer Webseite ist Teil des Inline-CSS-Stylings. Um die Text- oder Hintergrundfarbe in HTML festzulegen, müssen Sie das Attribut
styleverwenden. Sie können dasstyle-Attribut mit den HTML-Tags<body>,<p>,<table>,<div>,<h1>, oder<h2>usw. verwenden. Denken Sie daran, dass die Verwendung eines style-Attributs jeden Stil überschreibt, der im HTML-Tag<style>oder in einem externen Style Sheet festgelegt wurde.Verwendung von internem CSS. Die interne CSS-Styling-Option ist beliebt für die Anwendung von Eigenschaften auf einzelne Seiten, indem alle Stile in das
<style>-Element im<head>von HTML-Dokumenten eingeschlossen werden.
Textfarbe
Sie können das Inline-Attribut style oder das Element <style> verwenden, um die Textfarbe zu ändern und dann den Wert mit der Eigenschaft color einstellen. Die Eigenschaft color legt den Wert der Vordergrundfarbe für den Text und die Textdekoration eines Elements fest. Die Eigenschaft color akzeptiert HTML-Farbnamen, RGB-, RGBA-, HEX-, HSL- oder HSLA-Werte.
HTML und CSS unterstützen aus einer Reihe von Gründen keine CMYK-, HSV-, HWB-, LAB-, XYZ- usw. Farbmodelle (siehe den Artikel HTML-Farbcodes). HTML und CSS konzentrieren sich auf Farbmodelle, die einfach zu verwenden und für digitale Bildschirme optimiert sind. Die Unterstützung weiterer Farbmodelle kann die Handhabung von Farben in Browsern komplizierter machen und erfordert mehr Rechenleistung für die Umwandlung zwischen verschiedenen Modellen.
Textfarbe mit HTML-Farbnamen
Der Farbname stellt den spezifischen Namen für die HTML-Farbe dar. Moderne Browser unterstützen
mehr als 140 HTML-Farbnamen, und Sie können jeden von ihnen für Ihre Elemente verwenden. Sie können zum Beispiel Text mit dem Inline-Attribut style einfärben, wie im folgenden Beispiel gezeigt:
1<html>
2 <body>
3 <h2 style="color:DarkCyan;">How to set text color using HTML color names?</h2>
4 <h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
5 <h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.</h4>
6 </body>
7</html>Das gleiche Ergebnis kann mit internem CSS erzielt werden, wie im folgenden Beispiel gezeigt:
1<html>
2 <head>
3 <style>
4 h2 {
5 color:DarkCyan;
6 }
7 h3 {
8 color:DarkRed;
9 }
10 h4 {
11 color:DarkBlue;
12 }
13 </style>
14 </head>
15 <body>
16 <h2>How to set text color using HTML color names?</h2>
17 <h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
18 <h4>There are over 140 named colors to choose from that you can use.</h4>
19 </body>
20</html>Der gerenderte HTML-Code sieht wie folgt aus:
Wenn Sie Text-, Hintergrund- oder Rahmenfarbe in einer HTML-Datei programmatisch ändern möchten, besuchen Sie bitte das Kapitel How-to Articles. Die Artikel in diesem Kapitel beantworten häufig gestellte Fragen und enthalten C#-Beispiele, die die notwendigen Informationen über die Verwendung der Aspose.HTML for .NET-Bibliothek zur Lösung bestimmter Aufgaben liefern.
Im Kapitel CSS bearbeiten erfahren Sie mehr über die Anwendung von Inline-, internem und externem CSS und deren Bearbeitung mit Aspose.HTML API. C#-Beispiele für das Ändern der Textfarbe mit Aspose.HTML API finden Sie im Artikel Wie man die Textfarbe in HTML ändert.
Textfarbe mit RGB-, RGBA- oder HEX-Farbcodes
Zum Einfärben von HTML-Text können Sie RGB oder HEX verwenden, die am häufigsten verwendeten Farbcodes. Der RGB-Wert bestimmt die HTML-Farbe durch Mischen der Rot-, Grün- und Blauwerte. Der HEX-Farbwert funktioniert fast genauso wie RGB, sieht aber anders aus. Wenn Sie mehr über RGB-, RGBA- und HEX-Codes erfahren möchten, lesen Sie bitte den Artikel HTML-Farbcodes.
Die Verwendung von RGB- oder HEX-Farbcodes ist die gebräuchlichste Methode, um einer Webseite Farbe zu verleihen. Es ist notwendig, dem Textelement, das Sie einfärben möchten, ein style-Attribut hinzuzufügen. Im folgenden Beispiel verwenden wir die Elemente <h2>, <h3> und <h4>, um das Inline-Attribut style und die Eigenschaft color mit RGB-, RGBA- und HEX-Codes anzuwenden:
1<html>
2 <body>
3 <h2 style="color:rgb(50,150,200);">How to use Text Color?</h2>
4 <h3 style="color:rgba(220,30,100,1);"> 1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
5 <h4 style="color:#1A8D7E"> 2. Specify the color using RGB, RGBA or HEX code.</h4>
6 </body>
7</html>Das gleiche Ergebnis wird mit internem CSS erzielt, wie im folgenden Beispiel gezeigt:
1<html>
2 <head>
3 <style>
4 h2 {
5 color:rgb(50,150,200);
6 }
7 h3 {
8 color:rgba(220,30,100,1);
9 }
10 h4 {
11 color:#1A8D7E;
12 }
13 </style>
14 </head>
15 <body>
16 <h2>How to use Text Color?</h2>
17 <h3>1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
18 <h4>2. Specify the color using RGB, RGBA or HEX code.</h4>
19 </body>
20</html>Der gerenderte HTML-Code sieht wie folgt aus:
Textfarbe unter Verwendung von HSL- oder HSLA-Farbcodes
HSL (Hue, Saturation, Lightness) ist eine Darstellung des RGB-Farbmodells in zylindrischen Koordinaten. Der Farbton definiert die Grundfarbe und misst sie in Grad von 0 bis 360 auf dem RGB-Farbkreis. Die Sättigung ist die Intensität oder Reinheit einer Farbe und wird in Prozentwerten von 0 (Schwarz-Weiß) bis 100 (leuchtende Farben) angegeben. Helligkeit ist der Grad der Helligkeit oder des Lichts in einer Farbe. Sie wird in Prozentwerten von 0 (Schwarz) bis 100 (Weiß) angegeben.
HSLA-Farbwerte sind eine Erweiterung der HSL-Farbwerte um einen Alphakanal, der die Deckkraft der Farbe bestimmt. Der HSLA-Farbwert wird mit Hue, Saturation, Lightness und Alpha angegeben, wobei der Alpha-Parameter die Deckkraft angibt. Der Alpha-Parameter ist eine Zahl zwischen 0,0, was “völlig transparent” bedeutet, und 1,0, was “völlig undurchsichtig” bedeutet.
Ersetzen Sie den RGB/RGBA/HEX-Code oder den Farbnamen durch einen HSL- oder HSLA-Wert in der Eigenschaft color, indem Sie das gleiche Attribut style wie zuvor verwenden:
1<html>
2 <body>
3 <h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codes</h2>
4 <p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.</p>
5 <p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.</p>
6 </body>
7</html>Wie im vorherigen Beispiel können Sie das interne CSS (Element <style>) verwenden und den RGB/RGBA/HEX-Code oder den Farbnamen durch einen HSL- oder HSLA-Wert in den CSS-Selektoren ersetzen.
Der gerenderte HTML-Code sieht wie folgt aus:
Zusammenfassung
- Um die Textfarbe zu ändern, können Sie entweder das Inline-Attribut
styleoder internes CSS verwenden. - Um die gewünschte Farbe anzugeben, können Sie HTML-Farbnamen oder RGB-, RGBA-, HEX-, HSL- oder HSLA-Farbcodes verwenden.
In der Vergangenheit wurde das RGB-Modell als primäres Modell für die Webentwicklung gewählt, da es direkt mit der Funktionsweise von Bildschirmen zusammenhängt, die rote, grüne und blaue Pixel zur Darstellung von Farben verwenden. HTML und CSS streben ein einfaches, konsistentes Modell zur Definition von Farben an, das von allen Browsern und Geräten unterstützt wird. RGB und seine Derivate (HEX, RGBA, HSL, HSLA) sind intuitiv und sehr gut mit digitalen Bildschirmen kompatibel.
Hintergrundfarbe
Hintergrundfarbe für ein bestimmtes HTML-Element
Sie können das Attribut style verwenden, um die Hintergrundfarbe für das HTML-Element festzulegen, und dann den Wert mit der Eigenschaft background-color einstellen. Die Eigenschaft background-color akzeptiert Farbnamen, RGB-, RGBA-, HEX-, HSL- oder HSLA-Werte. Hier soll gezeigt werden, wie dieselbe Farbe, “GelbGrün”, mit verschiedenen Farbformaten und unterschiedlichen Transparenzgraden festgelegt wird. Ansonsten wäre es besser, internes CSS zu verwenden, um eine einzige Farbe für alle Elemente eines bestimmten Typs festzulegen.
Bestimmen Sie, für welches Element Sie die Hintergrundfarbe ändern möchten. Wenn es sich um einen Absatz handelt, suchen Sie nach dem öffnenden <p>-Tag. Es kann auch ein <h1>…<h6>, <div> oder <table> Tag sein. In diesem Beispiel fügen wir eine Hintergrundfarbe zu den <h2>-Elementen hinzu:
1<html>
2 <body>
3 <p>The color name is "YellowGreen":</p>
4 <h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
5 <h2 style="background-color:#9ACD32;">#9ACD32</h1>
6 <h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
7
8 <p>RGBA values of name "YellowGreen" color, with different transparent:</p>
9 <h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154, 205, 50, 0.2)</h2>
10 <h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154, 205, 50, 0.5)</h2>
11 <h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154, 205, 50, 0.8)</h2>
12
13 <p>HSLA values of name "YellowGreen" color, with different transparent:</p>
14 <h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80, 61%, 50%, 0.2)</h2>
15 <h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80, 61%, 50%, 0.5)</h2>
16 <h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80, 61%, 50%, 0.8)</h2>
17 </body>
18</html>Der gerenderte HTML-Code sieht wie folgt aus:
Hintergrundfarbe für die gesamte Webseite
Es ist wichtig zu beachten, dass im obigen Beispiel die Eigenschaft background-color eine Farbe für den Hintergrund des Textes liefert, aber nicht für das gesamte Dokument. Wenn Sie die HTML-Farbe für die gesamte Seite ändern wollen, sollten Sie die Eigenschaft background-color des style-Attributs im öffnenden Tag des <body>-Abschnitts verwenden:
1<html>
2 <body style="background-color:#e0e0e0">
3 <h2 style="background-color:YellowGreen;">YellowGreen</h2>
4 <h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
5 <h2 style="background-color:rgba(154, 205, 50, 1.0);">rgba(154, 205, 50, 1.0)</h2>
6 <h2 style="background-color:#9ACD32;">#9ACD32</h2>
7 <h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
8 <h2 style="background-color:hsla(80, 61%, 50%, 1.0);">hsla(80, 61%, 50%, 1.0)</h2>
9 </body>
10</html>Das Bild zeigt den HTML-Code für die Einstellung der Hintergrundfarbe für den Text (der Farbname YellowGreen wird in verschiedenen Farbcodes angegeben) und die gesamte Webseite.
Ein weiteres Beispiel, um den Effekt der Einfärbung des Hintergrunds für die gesamte Webseite zu erreichen, ist die Verwendung des Attributs style mit der Eigenschaft background-color im öffnenden Tag des Abschnitts <body>:
1<html>
2 <body style="background-color:#ffe0e0;">
3 <h2>How to set Background Color for the whole web page?</h2>
4 <p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
5 </body>
6</html>Sie können auch internes CSS verwenden, um die Hintergrundfarbe für die gesamte Seite festzulegen:
1<html>
2 <head>
3 <style>
4 body {
5 background-color:#ffe0e0
6 }
7 </style>
8 </head>
9 <body>
10 <h2>How to set Background Color for the whole web page?</h2>
11 <p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
12 </body>
13</html>
Farbe des Randes
Sie können das Attribut style mit den Eigenschaften border-style und border-color verwenden, um die Randfarbe für die Textelemente festzulegen. Die CSS-Eigenschaft border-color definiert die Farbe der vier Ränder eines Elements. Die Eigenschaft border-color funktioniert nur, wenn zuvor die Eigenschaft border-style definiert wurde, die zur Festlegung der Ränder verwendet wird. Diese Eigenschaft funktioniert nicht allein. Wenn diese Eigenschaft nicht gesetzt ist, erbt sie die Farbe des Elements. Die Eigenschaft border-color akzeptiert Farbnamen, RGB-, RGBA-, HEX-, HSL- oder HSLA-Werte.
1<html>
2 <body>
3 <p> The border-color property only works when the border-style property is defined first, which is used to set the borders.</p>
4 <h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?</h2>
5 <p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.</p>
6 <h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?</h2>
7 </body>
8</html>
Siehe auch
- Entdecken Sie die Welt der HTML-Farbnamen! Erfahren Sie mehr über die Verwendung von HTML-Farbnamen im Webdesign und wann Sie eine Alternative wählen sollten.
- Der Artikel Wie kann man die Textfarbe in HTML ändern? zeigt, wie man die Aspose.HTML for .NET-Bibliothek verwendet, um die Textfarbe in einem HTML-Dokument zu steuern.
- Im Artikel Hintergrundfarbe in HTML ändern? finden Sie C#-Beispiele, die zeigen, wie Sie die Hintergrundfarbe sowohl für das gesamte HTML-Dokument als auch für einzelne Elemente festlegen oder ändern können.
- Der Artikel Wie ändert man die Rahmenfarbe in HTML? beschreibt verschiedene Möglichkeiten, die Rahmenfarbe in HTML-Dateien unter Verwendung der Aspose.HTML for .NET-Bibliothek zu setzen oder zu ändern.
Aspose.HTML bietet einen kostenlosen Online- Farbrad-Auswahl, mit dem Sie eine Reihe von Farben im HEX-Farbcode erstellen können. Sie können diese kostenlose Online-Anwendung verwenden, um Farbharmonien zu finden, indem Sie die Regeln der Farbkombinationen anwenden, aber es ist auch wichtig, mit Farben zu experimentieren. Color Wheel Picker bietet eine hervorragende Möglichkeit, mit Farben zu experimentieren und selbständig spannende Farbkombinationen zu erstellen. Die Anwendung läuft auf Computern, Tablets und mobilen Geräten. Erstellen Sie also Ihre einzigartige Palette für jedes Projekt!
