在HTML页面开发中，调整文本颜色是基础的样式操作，实现方式主要分为HTML原生属性设置和CSS样式设置两类，不同方式的适用场景和使用方法存在差异，下面逐一介绍。
一、使用HTML的font标签修改文本颜色
早期HTML提供了<font>标签用于设置文本的字体、大小和颜色，其中color属性可以直接指定文本颜色。这种方式操作简单，但是<font>标签已经在HTML5中被废弃，不推荐在新项目中使用，仅适合了解历史写法。
color属性支持多种取值方式，包括颜色英文名称、十六进制颜色值、RGB颜色值等，下面是具体的使用示例：
<!-- 使用颜色英文名称设置文本颜色 --> <font color="red">这段文字是红色的</font> <br> <!-- 使用十六进制颜色值设置文本颜色 --> <font color="#00ff00">这段文字是绿色的</font> <br> <!-- 使用RGB颜色值设置文本颜色 --> <font color="rgb(0, 0, 255)">这段文字是蓝色的</font>
二、使用行内CSS样式修改文本颜色
行内样式是直接在HTML标签的<style>属性中编写CSS规则，这种方式优先级较高，仅对当前标签生效，适合单个元素的样式调整，但是如果需要修改多个相同元素的颜色，会产生大量重复代码，可维护性较差。
行内样式中通过color属性设置文本颜色，取值规则和<font>标签的color属性一致，示例如下：
<!-- 行内样式设置文本颜色 --> <p style="color: orange;">这段文字是橙色的，通过行内CSS样式设置</p> <div style="color: #ff00ff;">这段文字是紫色的，使用十六进制颜色值</div> <span style="color: rgb(128, 0, 128);">这段文字是深紫色的，使用RGB颜色值</span>
三、使用内部CSS样式修改文本颜色
内部样式是将CSS代码写在HTML页面的<style>标签中，通常放在<head>部分，可以通过选择器批量选中多个元素设置样式，适合单个页面的样式统一管理，比行内样式的可维护性更好。
可以通过标签选择器、类选择器、ID选择器等不同的选择器来匹配需要修改颜色的元素，示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部CSS设置文本颜色示例</title>
<style>
/* 标签选择器：所有p标签的文本颜色为棕色 */
p {
color: brown;
}
/* 类选择器：class为text-blue的元素文本颜色为蓝色 */
.text-blue {
color: blue;
}
/* ID选择器：id为special-text的元素文本颜色为深红色 */
#special-text {
color: #8B0000;
}
</style>
</head>
<body>
<p>这段文字是棕色的，匹配了p标签选择器</p>
<div class="text-blue">这段文字是蓝色的，匹配了类选择器</div>
<span id="special-text">这段文字是深红色的，匹配了ID选择器</span>
</body>
</html>四、使用外部CSS样式修改文本颜色
外部样式是将CSS代码写在独立的.css文件中，然后在HTML页面中通过<link>标签引入，这种方式可以实现多个页面共享同一套样式，可维护性最强，也是现代前端开发中最推荐的使用方式。
首先创建独立的CSS文件，比如命名为style.css，内容如下：
/* 外部CSS文件内容 */
.title {
color: #333333;
}
.content {
color: #666666;
}
.highlight {
color: #ff4400;
}然后在HTML页面中引入该CSS文件，使用对应的类名即可应用样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部CSS设置文本颜色示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">这是标题文本，颜色为深灰色</h1>
<p class="content">这是正文内容，颜色为浅灰色</p>
<span class="highlight">这是高亮文本，颜色为橙红色</span>
</body>
</html>五、color属性常见取值说明
无论使用哪种方式设置文本颜色，color属性的取值都遵循相同的规则，常见的取值类型如下：
| 取值类型 | 说明 | 示例 |
|---|---|---|
| 颜色英文名称 | 直接使用颜色的英文单词，支持的颜色名称有限 | red, green, blue, yellow |
| 十六进制颜色值 | 以#开头，后面跟6位十六进制数，每两位分别表示红、绿、蓝通道 | #ff0000（红色）, #00ff00（绿色）, #0000ff（蓝色） |
| RGB颜色值 | 使用rgb(红, 绿, 蓝)格式，每个通道取值为0-255的整数 | rgb(255, 0, 0)（红色）, rgb(0, 255, 0)（绿色） |
| RGBA颜色值 | 在RGB基础上增加透明度通道，取值为0-1的小数 | rgba(255, 0, 0, 0.5)（半透明红色） |
| HSL颜色值 | 使用hsl(色相, 饱和度%, 亮度%)格式，更符合人类对颜色的感知 | hsl(0, 100%, 50%)（红色） |
六、不同方式的选用建议
- 如果是维护非常老旧的项目，可能会遇到<font>标签的写法，新开发项目不要使用这种方式。
- 如果只是临时调整单个元素的样式，且不需要复用，可以使用行内样式。
- 如果是单个页面的样式管理，且样式不需要跨页面复用，可以使用内部样式。
- 如果是多页面项目或者需要统一维护样式，优先使用外部样式，提升代码的可维护性。