如何更改 HTML 中的文字颜色?
在本文中,我们将使用 C# 示例来展示使用 Aspose.HTML for .NET 更改 HTML 中文本颜色的不同方法。
使用 CSS 颜色属性可以轻松更改网页上的文字颜色。有几种方法可以设置该属性值。你可以使用内联、内部或外部 CSS,HTML 颜色值可以指定为标准的英文颜色名称或 HEX、RGB、RGBA、HSL 和 HSLA 值。 在下面的示例中,我们将使用 HEX 和 RGB 颜色代码,因为它们是最常用的。
如果您想了解有关 RGB、RGBA、HSL、HSLA 和 HEX 颜色代码的更多信息,请访问 HTML 颜色代码 一文。有关如何更改文本颜色的 HTML 代码示例,请参阅 使用 HTML 颜色 一文。
使用内联 CSS 更改文本颜色
您可以使用 style
属性的 color
属性在 HTML 标签内更改文本颜色。这就是所谓的内联 CSS。内联 CSS 允许您一次对一个 HTML 元素应用自定义样式。您可以使用 style 属性为 HTML 元素设置 CSS,并在其中定义 CSS 属性。
例如,在下面的代码片段中,你可以看到如何在现有的 file.html 文件中为 HTML <p>
元素指定 CSScolor
属性。只需几步
- 加载现有的 HTML 文件。
- 例如,查找第一个段落元素以设置样式属性。使用
Element 类的
GetElementsByTagName(
name
) 方法,该方法按文档顺序返回具有给定标记名的第一个元素。 - 使用
HTMLElement 类的
Style 属性设置带有
color
属性的style
属性。 - 保存修改后的 HTML 文档。
C# 代码
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 代码
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>
因此,HTML 文件中第一段的文本将被重新着色为 #8B0000
深红色(如需查看图 a,请向下滚动页面)。
您可以从 GitHub 下载完整的示例和数据文件。
使用内部 CSS 更改文本颜色
内部 CSS 常用于为单个页面应用样式属性。你可以通过在页面的<head>
部分放置<style>
元素来应用内部 CSS 样式表。例如,你想改变网页上所有段落的颜色。要做到这一点,你应该在网页的<head>
部分添加p {color:#8B0000; }
添加到 HTML 文件的 head 部分。步骤如下
1.加载现有的 HTML 文件。
2. 创建一个 <style>
元素,并为所有段落元素指定文本颜色值。使用
Element 类的
CreateElement(localName
) 方法创建指定类型的元素。
3. 找到文档的 <head>
元素,并将 <style>
元素添加到其中。
4. 保存修改后的 HTML 文档。
C# 代码
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 代码
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>
要更改文本颜色,您可以使用本文中的 C# 示例和 HTML <p>
、<h1>
或<h2>
元素等。请记住,使用样式属性(内联 CSS)会覆盖 HTML <style>
标记或外部样式表中指定的任何样式。
图中展示了使用内联 CSS 示例(a)和内部 CSS 示例(b)更改文本颜色的结果:
Aspose.HTML 提供免费的 HTML 网络应用程序,是转换器、合并器、搜索引擎优化工具、HTML 代码生成器、URL 工具等的在线集合。这些应用程序可在任何装有网络浏览器的操作系统上运行,无需安装任何其他软件。它是一种快速、简便的方法,能有效解决与 HTML 相关的任务。