使用 Python 更改 HTML 文本颜色 – 内联和内部 CSS 示例

为什么要以编程方式更改文本颜色？

在网页自动化、报告和文档生成中，动态更改文本颜色是常见需求。使用 Aspose.HTML for Python via .NET，您可以安全地加载、修改并保存 HTML 文件，而无需手动编辑。当您需要：

突出显示报告中的特定数据。
为生成的页面应用一致的品牌颜色。
在将 HTML 模板转换为 PDF 或图像前进行修改。

在网页上更改文本颜色很容易，只需使用 CSS color 属性。可以使用内联、内部或外部 CSS，颜色值可以是标准英文颜色名称或 HEX、RGB、RGBA、HSL、HSLA 等格式。

本文展示了如何使用 Aspose.HTML for Python via .NET 通过内联和内部 CSS 编程更改文本颜色。

使用内联 CSS 更改文本颜色

在此示例中，我们直接在 HTML 元素的 style 属性中设置文本颜色。这称为内联 CSS，适用于快速为单个元素设置样式。

下面的代码片段展示了如何为 HTML <p> 元素指定 CSS color 属性。请按以下步骤操作：

使用 HTMLDocument() 加载现有的 HTML 文档。
找到第一个段落 <p> 元素，以便为其设置 style 属性。使用 get_elements_by_tag_name(name) 方法获取文档中第一个匹配的元素。
使用 set_attribute() 为该元素的 style 属性设置 color。
将修改后的 HTML 保存到输出目录。

 1# Change HTML text color with inline CSS in Python
 2
 3import os
 4import aspose.html as ah
 5
 6# Prepare input and output paths
 7data_dir = "data"
 8output_dir = "output"
 9os.makedirs(output_dir, exist_ok=True)
10save_path = os.path.join(output_dir, "change-text-color-inline-css.html")
11document_path = os.path.join(data_dir, "text-color.html")
12
13# Change the first paragraph text color
14with ah.HTMLDocument(document_path) as document:
15    paragraph = document.get_elements_by_tag_name("p")[0]
16
17    # Set the style attribute with color property
18    paragraph.set_attribute("style", "color: #8B0000;")
19
20    document.save(save_path)

Example-ChangeHtmlTextColorUsingInlineCss.py hosted with ❤ by GitHub

内联 CSS 最适合单独更改特定元素的样式。结果是 HTML 文件中第一个段落的文本将被重新着色为 #8B0000（深红色），请滚动页面查看图 (a)。

使用内部 CSS 更改文本颜色

内部 CSS 适用于为多个元素统一设置样式，例如所有段落或标题。我们将在 HTML 文档的 <head> 部分添加一个 <style> 块。此方法更整洁，适合需要一致样式的场景。

加载 HTML 文档。
创建一个新的 <style> 元素，并为所有 <p> 元素指定文本颜色。使用 create_element(local_name) 方法创建元素。
使用 get_elements_by_tag_name() 找到文档的 <head> 元素，并将 <style> 元素插入其中。
保存修改后的 HTML 文档。

 1# Change paragraph text color with internal CSS in Python
 2
 3import os
 4import aspose.html as ah
 5
 6# Prepare input and output paths
 7output_dir = "output"
 8os.makedirs(output_dir, exist_ok=True)
 9save_path = os.path.join(output_dir, "change-text-color-internal-css.html")
10
11data_dir = "data"
12document_path = os.path.join(data_dir, "text-color.html")
13
14# Add an internal CSS rule for paragraph text
15with ah.HTMLDocument(document_path) as document:
16    style = document.create_element("style")
17    style.text_content = "p { color: #8B0000 }"
18
19    head = document.get_elements_by_tag_name("head")[0]
20    head.append_child(style)
21
22    document.save(save_path)

Example-ChangeHtmlTextColorUsingInternalCss.py hosted with ❤ by GitHub

要更改文本颜色，您可以使用本文提供的 Python 示例，对 <p>、<h1>、<h2> 等 HTML 元素进行操作。请注意，使用 style 属性（内联 CSS）会覆盖 <style> 标签或外部样式表中定义的任何样式。

以下图示展示了使用内联 CSS（a）和内部 CSS（b）两种示例的文本颜色更改效果：

文本 “两个 HTML 文档片段，段落文本已着色。”

基于条件动态更改文本颜色

在某些情况下，您可能需要根据数据动态更改文本颜色，例如突出显示分数、警报或警告。使用 Aspose.HTML for Python via .NET，您可以轻松读取元素内容并根据条件更改样式。以下示例演示如何根据数值设置文本颜色：

 1# Change HTML text color based on a value in Python
 2
 3import os
 4import aspose.html as ah
 5
 6# Prepare the output path
 7output_dir = "output"
 8os.makedirs(output_dir, exist_ok=True)
 9save_path = os.path.join(output_dir, "conditional-text-color.html")
10
11# Define the HTML content
12html_content = """
13<html>
14<body>
15<p>Score: 85</p>
16<p>Score: 42</p>
17<p>Score: 73</p>
18</body>
19</html>
20"""
21
22# Set score colors according to their values
23with ah.HTMLDocument(html_content, ".") as document:
24    paragraphs = document.get_elements_by_tag_name("p")
25
26    for paragraph in paragraphs:
27        text = paragraph.text_content
28        score = int(text.split(":")[1].strip())
29
30        color = "green" if score >= 70 else "red"
31        paragraph.set_attribute("style", f"color: {color};")
32
33    document.save(save_path)

Example-ChangeTextColorBasedOnData.py hosted with ❤ by GitHub

代码读取段落的文本值，提取数值并与参考值比较。每个 <p> 元素根据条件动态应用样式。此技术在生成报告或数据可视化时非常有用，可提升可读性。

文本 “分数：85（绿色），42（红色），73（绿色）。”

最佳实践

始终使用 Web 安全的颜色格式（HEX、RGB 或 HSL）。
避免使用过于饱和的颜色，确保对比度足以保证可读性。
对于唯一样式使用内联 CSS，对统一样式使用内部 CSS。
使用 Aspose.HTML 转换器将带样式的 HTML 导出为 PDF、XPS、DOCX 或图像。

常见问题

1. 内联 CSS 与内部 CSS 有何区别？
内联 CSS 直接在单个元素的 style 属性中设置，而内部 CSS 通过 <head> 中的 <style> 块一次性为多个元素设置样式。

2. 为什么输出中没有更改文本颜色？
请确保正确指定了元素选择器（例如 p 表示段落）。同时检查文档结构是否包含目标元素，以及是否有更高优先级的样式覆盖了您的设置。

3. 我可以使用 RGB 或 HSL 而不是 HEX 吗？
可以。color 属性接受所有 CSS 颜色格式：颜色名称、HEX（#8B0000）、RGB（rgb(139,0,0)）、RGBA、HSL、HSLA。

另见

HTML 颜色处理 – 本文提供了更改文本颜色的 HTML 示例代码。
如何更改背景颜色？ – 了解如何为段落或整页更改背景颜色。
如何更改边框颜色？ – 本文提供了在 HTML 中添加或更改边框颜色的示例和技巧。
HTML 颜色代码 – 查阅 HTML 颜色名称、HEX、RGB、RGBA、HSL、HSLA 等代码。

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

操作指南更改背景颜色