使用 Aspose.HTML 更改边框颜色 – C# 示例

在本文中，我们将使用 C# 示例来展示使用 Aspose.HTML for .NET 库在 HTML 文件中设置或更改边框颜色的不同方法。

使用 CSS border-color 属性可以轻松设置或更改 HTML 元素的边框颜色。有几种方法可以设置该属性值。您可以使用内联、内部或外部 CSS，HTML 颜色值可以指定为标准颜色名称或 HEX、RGB、RGBA、HSL 和 HSLA 值。

有关如何使用 HTML 颜色代码的更多信息，请访问 HTML 颜色代码 一文。在 边框颜色 部分，您可以找到如何更改边框颜色的 HTML 代码示例。

使用内联 CSS 更改边框颜色

您可以使用内联 style 属性(内联 CSS)设置或更改边框颜色。只有首先定义了用于设置边框的 border-style 属性，border-color属性才会起作用。该属性不会单独起作用。如果未设置该属性，则会继承元素的颜色。边框颜色属性可接受颜色名称、RGB、RGBA、HEX、HSL 或 HSLA 值。要使用 Aspose.HTML API 更改 HTML 元素的边框颜色，应遵循以下几个步骤：

加载现有的 HTML 文件。
创建 HTML 文档实例
确定要为哪个元素更改边框颜色，然后找到该元素并为其设置样式属性。使用 Element 类中的 GetElementsByTagName(name) 方法，该方法可返回具有给定标记名的 HTML 元素。
使用 border-style 和 border-color 属性设置 style 属性：使用 HTMLElement 类的 Style 属性。
保存修改后的 HTML 文档。

您可以设置或更改各种 HTML 元素的边框颜色，如 <p>、<h1>…<h6>、<div> 或 <table>。下面的 C# 示例显示了 <h1>元素边框颜色的更改：

 1// Сhange border color for <h1> element using C#
 2
 3// Prepare an output path for a document saving
 4string savePath = Path.Combine(OutputDir, "change-border-color.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 h1 element to set a style attribute
13HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();
14
15// Set the style attribute properties
16header.Style.Color = "#8B0000";
17header.Style.BorderStyle = "solid";
18header.Style.BorderColor = "rgb(220,30,100)";
19
20// Save the HTML document to a file
21document.Save(Path.Combine(savePath));

Example-HowToChangeBorderColor.cs hosted with ❤ by GitHub

值得注意的是，在这个 С# 示例中，不仅更改了 <h1> 元素的边框颜色，还更改了该元素的文本颜色(添加了 color 属性)。

您可以从 GitHub 下载完整的示例和数据文件。

更改边框四边的颜色

边框颜色属性用于设置元素四个边框的颜色。如果 border-color 属性只有一个值，那么整个边框都将使用这种颜色。但你可以为顶部、右侧、底部和左侧边框设置不同的颜色值。例如，如果设置border-color: red blue green gray，则顶部边框为红色，右侧边框为蓝色，底部边框为绿色，左侧边框为灰色。

 1// Set different colors for all four borders of HTML element using C#
 2
 3// Prepare an output path for a document saving
 4string savePath = Path.Combine(OutputDir, "change-four-border-color.html");
 5
 6// Prepare path to source HTML file
 7string documentPath = Path.Combine(DataDir, "change-border-color.html");
 8
 9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Find the h1 element to set a style attribute
13HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();
14
15// Set the style attribute properties
16header.Style.BorderStyle = "solid";
17header.Style.BorderColor = "red blue green gray";
18
19// Save the HTML document to a file
20document.Save(Path.Combine(savePath));

Example-HowToChangeBorderColorForFourSides.cs hosted with ❤ by GitHub

图中展示了使用内联 CSS 更改<h1>元素边框颜色的结果：a) 更改了整个边框的颜色；b) 更改了边框四边中每一边的颜色。

文本 “渲染了 change-border-color.html 和 change-four-border-color.html 文件，更改了 h1 的边框颜色”

使用内部 CSS 更改边框颜色

如以下 HTML 代码示例所示，使用内部 CSS 也能实现相同的边框着色效果：

1<head>
2<style>
3	h1 {
4	border-color: rgb(220,30,100);
5	}
6</style>
7</head>

注意： 请记住，使用 style 属性会覆盖 HTML <style> 标记或外部样式表中设置的任何样式。

下一个 C# 示例演示了如何使用内部 CSS 更改边框颜色。请执行以下步骤

加载现有的 HTML 文件。
创建 HTML 文档实例
创建 <style> 元素，并为 <h1> 元素分配 border-style 和 border-color 值。
在文档中找到 <head> 元素，并在其中添加 <style> 元素。
保存修改后的 HTML 文档。

 1// Add internal CSS to style HTML in C#
 2
 3// Prepare an output path for a document saving
 4string savePath = Path.Combine(OutputDir, "change-border-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 color border-style and border-color values for h1 element
13Element style = document.CreateElement("style");
14style.TextContent = "h1 {color:DarkRed; border-style:solid; border-color:rgb(220,30,100) }";
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));

Example-HowToChangeBorderColorWithInternalCss.cs hosted with ❤ by GitHub

执行上述 С# 代码后，<style>元素将出现在输出文件的<head>中，下面的 HTML 代码对此进行了说明：

 1<head>
 2<style>
 3	h1 { 
 4		color: darkred;
 5		border-top-style: solid;
 6		border-right-style: solid;
 7		border-bottom-style: solid;
 8		border-left-style: solid;
 9		border-top-color: rgb(220, 30, 100);
10		border-right-color: rgb(220, 30, 100);
11		border-bottom-color: rgb(220, 30, 100);
12		border-left-color: rgb(220, 30, 100); }
13</style>
14</head>

结果与上图 (a) 所示相似。

更改表格边框颜色

如果要更改表格边框颜色，可以使用内联或内部 CSS。

您可以通过 HTML <table>元素应用style属性。请记住，使用样式属性会覆盖 HTML <style>标记或外部样式表中设置的任何样式。要使用内联 CSS 样式属性更改表格边框颜色，可以使用 QuerySelector() 方法浏览 DOM 并找到 <table> 元素。然后为 <table> 元素设置具有所需属性的样式属性：

C# 示例 1 – 使用内联 CSS

 1// Change table border color using C#
 2
 3// Prepare an output path for a document saving
 4string savePath = Path.Combine(OutputDir, "change-table-border-color-inline-css.html");
 5
 6// Prepare path to source HTML file
 7string documentPath = Path.Combine(DataDir, "table.html");
 8
 9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a CSS Selector that selects the first table element
13Element element = document.QuerySelector("table");
14
15// Set style attribute with properties for the selected element
16element.SetAttribute("style", "border: 2px #0000ff solid");
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));

Example-HowToChangeTableBorderColorWithInlineCss.cs hosted with ❤ by GitHub

JavaScript 代码 1

1<script>
2	// Create a CSS Selector that selects the first table element
3    var element = document.querySelector("table");
4
5    // Set style attribute with properties for the selected element
6    element.setAttribute("style", "border: 2px #0000ff solid");
7</script>

如下面的 C# 代码示例 2 所示，使用内部 CSS 也可以实现同样的表格边框着色效果：

C# 示例 2 – 使用内部 CSS

 1// Change HTML table border color using C#
 2
 3// Prepare an output path for a document saving
 4string savePath = Path.Combine(OutputDir, "change-table-border-color-internal-css.html");
 5
 6// Prepare path to source HTML file
 7string documentPath = Path.Combine(DataDir, "table.html");
 8
 9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a style element and assign the color border-style and border-color values for table element
13Element style = document.CreateElement("style");
14style.TextContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";
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));

Example-HowToChangeTableBorderColorWithInternalCss.cs hosted with ❤ by GitHub

JavaScript 代码 2

1<script>
2	// Create a style element and assign the border-style and border-color values for table element
3	var style = document.createElement("style");
4	style.textContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";
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>

图中显示了将边框颜色从红色改为蓝色后的 HTML 表格 table.html：

文本 “渲染了 change-table-border-color.html 文件，将表格边框颜色从红色改为蓝色”

HTML 表格生成器 是一款在线应用程序，用于创建具有自定义选项的表格。它免费且易于使用。只需填写所有所需选项，即可得到结果！

如何更改背景颜色如何添加图片