Rahmenfarbe ändern – C#-Beispiele

In diesem Artikel werden wir anhand von C#-Beispielen verschiedene Möglichkeiten aufzeigen, wie man die Rahmenfarbe in HTML-Dateien mithilfe der Aspose.HTML for .NET-Bibliothek festlegen oder ändern kann.

Die Farbe des Rahmens eines HTML-Elements lässt sich mit der CSS-Eigenschaft “border-color” einfach einstellen oder ändern. Es gibt mehrere Möglichkeiten, den Wert dieser Eigenschaft zu setzen. Sie können Inline, internes oder externes CSS verwenden, und HTML-Farbwerte können als Standard-Farbnamen oder mit HEX-, RGB-, RGBA-, HSL- und HSLA-Werten angegeben werden.

Weitere Informationen über die Verwendung von HTML-Farbcodes finden Sie in dem Artikel HTML-Farbcodes. Im Abschnitt Rahmenfarbe finden Sie HTML-Code-Beispiele, wie Sie die Rahmenfarbe ändern können.

Farbe des Rahmens mit Inline-CSS ändern

Sie können die Farbe des Rahmens mit dem Inline-Attribut style einstellen oder ändern – Inline-CSS. Die Eigenschaft border-color funktioniert nur, wenn die Eigenschaft border-style zuerst definiert wird, die zum Einstellen 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. Um die Farbe des Rahmens eines HTML-Elements mit der Aspose.HTML API zu ändern, sollten Sie einige Schritte befolgen:

1. Laden Sie eine bestehende HTML-Datei.
2. Erstellen Sie eine Instanz eines HTML-Dokuments.
3. Bestimmen Sie das Element, für das Sie die Rahmenfarbe ändern möchten, und suchen Sie dieses Element, um ein Stilattribut dafür zu setzen. Verwenden Sie die Methode GetElementsByTagName(name) der Klasse Element, die HTML-Elemente mit einem bestimmten Tag-Namen zurückgibt.
4. Setzen Sie das style-Attribut mit den Eigenschaften border-style und border-color: Verwenden Sie die Style Eigenschaft der HTMLElement Klasse.
5. Speichern Sie das geänderte HTML-Dokument.

Sie können die Rahmenfarbe für verschiedene HTML-Elemente wie <p>, <h1>…<h6>, <div> oder <table> einstellen oder ändern. Das folgende C#-Beispiel zeigt die Änderung der Rahmenfarbe für das <h1>-Element:

// Сhange border color for <h1> element using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-border-color.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "file.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Find the h1 element to set a style attribute
HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Set the style attribute properties
header.Style.Color = "#8B0000";
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "rgb(220,30,100)";

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Es ist zu beachten, dass in diesem С#-Beispiel nicht nur die Rahmenfarbe für das Element <h1> geändert wurde, sondern auch die Textfarbe für dieses Element (die Eigenschaft color wurde hinzugefügt).

Sie können die vollständigen Beispiele und Datendateien von GitHub herunterladen.

Farbe für vier Seiten des Randes ändern

Die Eigenschaft border-color legt die Farbe der vier Ränder eines Elements fest. Wenn die Eigenschaft border-color einen einzigen Wert hat, dann wird der gesamte Rand mit dieser Farbe gemalt. Sie können jedoch unterschiedliche Farbwerte für den oberen, rechten, unteren und linken Rand festlegen. Wenn Sie zum Beispiel border-color: red blue green gray einstellen, ist der obere Rand rot, der rechte Rand blau, der untere Rand grün und der linke Rand grau.

// Set different colors for all four borders of HTML element using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-four-border-color.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "change-border-color.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Find the h1 element to set a style attribute
HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Set the style attribute properties
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "red blue green gray";

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Die Abbildung veranschaulicht die Ergebnisse der Änderung der Rahmenfarbe für das Element <h1> mit Inline-CSS: a) geänderte Farbe für den gesamten Rahmen; b) geänderte Farbe für jede der vier Seiten des Rahmens.

Randfarbe mit internem CSS ändern

Das gleiche Ergebnis der Randeinfärbung kann mit internem CSS erzielt werden, wie das folgende HTML-Codebeispiel zeigt:

<head>
<style>
	h1 {
	border-color: rgb(220,30,100);
	}
</style>
</head>

Hinweis: Denken Sie daran, dass die Verwendung eines style-Attributs jeden im HTML-Tag <style> oder in einem externen Stylesheet festgelegten Stil außer Kraft setzt.

Das nächste C#-Beispiel zeigt, wie man internes CSS zum Ändern der Rahmenfarbe einsetzt. Gehen Sie ein paar Schritte:

1. Laden Sie eine vorhandene HTML-Datei.
2. Erstellen Sie eine Instanz eines HTML-Dokuments.
3. Erstellen Sie ein <style> Element und weisen Sie die Werte border-style und border-color für das <h1> Element zu.
4. Finde das <head> Element in deinem Dokument und füge das <style> Element darin ein.
5. Speichern Sie das geänderte HTML-Dokument.

// Add internal CSS to style HTML in C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-border-color-internal-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "file.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a style element and assign the color border-style and border-color values for h1 element
Element style = document.CreateElement("style");
style.TextContent = "h1 {color:DarkRed; border-style:solid; border-color:rgb(220,30,100) }";

// Find the document head element and append style element to the head
Element head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Die Ausführung des С#-Codes, den wir oben angegeben haben, führt dazu, dass das Element <style> im <head> der Ausgabedatei erscheint, was durch den folgenden HTML-Code veranschaulicht wird:

<head>
<style>
	h1 { 
		color: darkred;
		border-top-style: solid;
		border-right-style: solid;
		border-bottom-style: solid;
		border-left-style: solid;
		border-top-color: rgb(220, 30, 100);
		border-right-color: rgb(220, 30, 100);
		border-bottom-color: rgb(220, 30, 100);
		border-left-color: rgb(220, 30, 100); }
</style>
</head>

Das Ergebnis ist ähnlich wie in Abbildung (a) oben dargestellt.

Farbe des Tabellenrandes ändern

Wenn Sie die Farbe des Tabellenrandes ändern möchten, können Sie Inline- oder internes CSS verwenden.

Sie können das Attribut style mit dem HTML-Element <table> verwenden. Beachten Sie, dass die Verwendung eines style-Attributs jeden Stil überschreibt, der im HTML-Tag <style> oder in einem externen Style Sheet festgelegt wurde. Um die Farbe des Tabellenrandes mit Hilfe eines Inline-CSS-Style-Attributs zu ändern, können Sie die Methode QuerySelector() verwenden, um im DOM zu navigieren und das Element <table> zu finden. Setzen Sie dann das Style-Attribut mit den erforderlichen Eigenschaften für das Element <table>:

C# Beispiel 1 – Verwendung von Inline-CSS

// Change table border color using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-table-border-color-inline-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "table.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a CSS Selector that selects the first table element
Element element = document.QuerySelector("table");

// Set style attribute with properties for the selected element
element.SetAttribute("style", "border: 2px #0000ff solid");

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

JavaScript-Code 1

<script>
	// Create a CSS Selector that selects the first table element
    var element = document.querySelector("table");

    // Set style attribute with properties for the selected element
    element.setAttribute("style", "border: 2px #0000ff solid");
</script>

Das gleiche Ergebnis bei der Einfärbung von Tabellenrändern kann mit internem CSS erzielt werden, wie im folgenden C#-Codebeispiel 2 gezeigt:

C# Beispiel 2 – Verwendung von internem CSS

// Change HTML table border color using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-table-border-color-internal-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "table.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a style element and assign the color border-style and border-color values for table element
Element style = document.CreateElement("style");
style.TextContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";

// Find the document head element and append style element to the head
Element head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

JavaScript-Code 2

<script>
	// Create a style element and assign the border-style and border-color values for table element
	var style = document.createElement("style");
	style.textContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";

	// Find the document's <head> element and add a <style> element to it
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(style);
</script>

Die Abbildung zeigt die HTML-Tabelle table.html, nachdem die Farbe des Rahmens von rot auf blau geändert wurde:

HTML Tabellen Generator ist eine Online-Anwendung zur Erstellung von Tabellen mit anpassbaren Optionen. Es ist kostenlos und einfach zu benutzen. Geben Sie einfach alle erforderlichen Optionen ein und erhalten Sie ein Ergebnis!