Wie kann man die Textfarbe in HTML ändern?
In diesem Artikel werden wir anhand von C#-Beispielen verschiedene Möglichkeiten aufzeigen, wie man die Textfarbe in HTML mit Aspose.HTML for .NET ändern kann.
Die Textfarbe auf einer Webseite zu ändern ist einfach mit der CSS-Farbeigenschaft. Es gibt mehrere Möglichkeiten, diesen Eigenschaftswert zu setzen. Sie können Inline-, internes oder externes CSS verwenden, und HTML-Farbwerte können als englische Standardfarbnamen oder mit HEX-, RGB-, RGBA-, HSL- und HSLA-Werten angegeben werden. In den folgenden Beispielen werden wir HEX- und RGB-Farbcodes verwenden, da sie am häufigsten verwendet werden.
Wenn Sie mehr über RGB-, RGBA-, HSL-, HSLA- und HEX-Farbcodes erfahren möchten, lesen Sie bitte den Artikel HTML-Farbcodes. HTML-Code-Beispiele zum Ändern der Textfarbe finden Sie im Artikel Arbeiten mit HTML-Farbe.
Textfarbe mit Inline-CSS ändern
Sie können die Textfarbe innerhalb eines HTML-Tags ändern, indem Sie die Eigenschaft color des Attributs style verwenden. Dies wird als Inline-CSS bezeichnet. Mit Inline-CSS können Sie benutzerdefinierte Stilelemente auf jeweils ein HTML-Element anwenden. Sie legen das CSS für ein HTML-Element fest, indem Sie das style-Attribut mit allen darin definierten CSS-Eigenschaften verwenden.
Im folgenden Codeschnipsel sehen Sie beispielsweise, wie Sie die CSS-Eigenschaft color für das HTML-Element <p> in der bestehenden Datei “file.html” festlegen. Gehen Sie ein paar Schritte:
- Laden Sie eine bestehende HTML-Datei.
- Suchen Sie z.B. das erste Absatzelement, um ein Stilattribut zu setzen. Verwenden Sie die Methode
GetElementsByTagName(
name) der Klasse Element, die das erste Element mit einem bestimmten Tag-Namen in der Reihenfolge des Dokuments zurückgibt. - Verwenden Sie die Eigenschaft
Style der Klasse
HTMLElement, um das Attribut
stylemit der Eigenschaftcolorzu setzen. - Speichern Sie das geänderte HTML-Dokument.
C#-Code
1// Change HTML paragraph color using C#
2
3// Prepare output path for HTML document saving
4string savePath = Path.Combine(OutputDir, "change-paragraph-color-inline-css.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "file.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Find the first paragraph element to set a style attribute
13HTMLElement paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
14
15// Set the style attribute with color property
16paragraph.Style.Color = "#8B0000";
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));JavaScript-Code
1<script>
2 // Find the first paragraph element to set a style attribute
3 var paragraph = document.getElementsByTagName("p")[0];
4
5 // Set the style attribute with color property
6 paragraph.style.color = "#8B0000";
7</script>Als Ergebnis wird der Text des ersten Absatzes in der HTML-Datei in die Farbe “#8B0000” DarkRed umgefärbt (um Abbildung a zu sehen, scrollen Sie bitte die Seite nach unten).
Sie können die vollständigen Beispiele und Datendateien von GitHub herunterladen.
Textfarbe mit internem CSS ändern
Das interne CSS ist ein beliebtes Mittel, um Stileigenschaften auf einzelne Seiten anzuwenden. Sie können interne CSS-Stylesheets anwenden, indem Sie das <style>-Element in den <head>-Abschnitt einer Seite einfügen. Sie möchten zum Beispiel die Farbe aller Absätze auf einer Webseite ändern. Zu diesem Zweck sollten Sie `p {color: #8B0000; }" in den head-Abschnitt einer HTML-Datei ein. Gehen Sie ein paar Schritte:
- Laden Sie eine vorhandene HTML-Datei.
- Erstellen Sie ein
<style>-Element und weisen Sie den Textfarbwert für alle Absatzelemente zu. Verwenden Sie die Methode CreateElement(localName) der Klasse Element, die ein Element des angegebenen Typs erzeugt. - Suchen Sie das
<head>-Element des Dokuments und fügen Sie das<style>-Element an dieses an. - Speichern Sie das geänderte HTML-Dokument.
C#-Code
1// Change HTML text color using C#
2
3// Prepare output path for HTML document saving
4string savePath = Path.Combine(OutputDir, "change-paragraph-color-internal-css.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "file.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a style element and assign the text color value for all paragraph elements
13Element style = document.CreateElement("style");
14style.TextContent = "p { color:#8B0000 }";
15
16// Find the document head element and append style element to the head
17Element head = document.GetElementsByTagName("head").First();
18head.AppendChild(style);
19
20// Save the HTML document to a file
21document.Save(Path.Combine(savePath));JavaScript-Code
1<script>
2 // Create a style element and assign the text color value for all paragraph elements
3 var style = document.createElement("style");
4 style.textContent = "p { color:#8B0000 }";
5
6 // Find the document's <head> element and add a <style> element to it
7 var head = document.getElementsByTagName("head")[0];
8 head.appendChild(style);
9</script>Um die Textfarbe zu ändern, können Sie die in diesem Artikel betrachteten C#-Beispiele mit den HTML-Elementen <p>, <h1>, oder <h2> usw. verwenden. Denken Sie daran, dass die Verwendung des style-Attributs (Inline-CSS) jeden im HTML-Tag <style> oder in einem externen Style Sheet angegebenen Stil außer Kraft setzt.
Die Abbildung veranschaulicht die Ergebnisse der Änderung der Textfarbe entsprechend der Verwendung von Inline-CSS (a) und internem CSS (b):
Aspose.HTML bietet kostenlose HTML-Webanwendungen, die eine Online-Sammlung von Konvertern, Zusammenführungen, SEO-Tools, HTML-Code-Generatoren, URL-Tools und mehr sind. Die Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Es ist eine schnelle und einfache Möglichkeit, Ihre HTML-bezogenen Aufgaben effizient und effektiv zu lösen.
