HTML文本颜色设置方法详解
HTML设置文本颜色，告别`font color`，拥抱更强大的CSS！本文深入探讨了HTML中设置文本颜色的现代方法，强调使用CSS的`color`属性，并通过内联样式、内部样式表和外部样式表三种方式详细讲解。为何要放弃`font color`？因为它违背了结构与表现分离的原则，维护成本高、代码冗余且缺乏灵活性。CSS不仅能设置颜色，还能控制字体、大小、间距等，实现更丰富的文本美化。掌握CSS文本美化技巧，让你的网页更具吸引力且易于维护。在项目实践中，优先选择外部样式表，利用CSS变量，提升代码复用性和可维护性。同时，别忘了考虑可访问性，确保文本颜色对比度，让所有用户都能轻松阅读。
HTML中设置文本颜色应使用CSS而非font color属性。现代开发推荐通过外部或内部样式表及内联样式，利用color属性结合类选择器、CSS变量等方式实现，以提升可维护性、复用性和可访问性，同时支持字体、大小、间距等更丰富的文本美化功能。
HTML中设置文本颜色，如果你问的是font color属性，那它确实是以前用来改变文本颜色的方式，但现在已经不推荐使用了。现代Web开发中，我们主要依靠CSS（层叠样式表）来控制文本的颜色，这才是更灵活、更强大的做法。
解决方案
font color属性是HTML4时代的一个元素属性，它的用法很简单：
<font color="red">这段文字是红色的。</font> <font color="#0000FF">这段文字是蓝色的。</font> <font color="rgb(0, 128, 0)">这段文字是绿色的。</font>
这里你可以直接使用颜色名称（如red）、十六进制代码（如#0000FF）或者RGB值（如rgb(0, 128, 0)）来指定颜色。
然而，我得说，这种方式现在几乎见不到了。因为它把样式和结构混在了一起，这在大型项目里简直是维护的噩梦。想象一下，如果你有几百个地方用了，突然有一天产品经理说“我们把所有红色都改成深红色吧”，你是不是得一个一个去改？
所以，现代的做法是使用CSS。最直接的替代就是内联样式：
<p style="color: red;">这段文字现在用CSS变成了红色。</p> <span style="color: #0000FF;">这段文字用CSS变成了蓝色。</span> <div style="color: rgb(0, 128, 0);">这段文字用CSS变成了绿色。</div>
虽然内联样式比font color属性进步了一点点，因为它用了CSS语法，但它仍然把样式写在HTML标签里。更推荐的方式是使用内部样式表（在标签里）或外部样式表（一个独立的.css文件）。
<!-- 内部样式表示例 -->
<head>
<style>
p {
color: red; /* 所有p标签都是红色 */
}
.blue-text {
color: blue; /* 有blue-text类的元素是蓝色 */
}
</style>
</head>
<body>
<p>这段文字会是红色。</p>
<span class="blue-text">这段文字会是蓝色。</span>
</body><!-- 外部样式表示例 (假设你有一个styles.css文件) -->
<!-- HTML文件 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这段文字的颜色由外部样式表控制。</p>
</body>
<!-- styles.css文件内容 -->
p {
color: purple;
}这种分离结构和样式的方式，才是我们现在构建Web页面的标准。
font color 属性为何被淘汰，我们应该用什么替代它？
说实话，font color被淘汰一点都不意外，这是Web发展的一个必然趋势。在我看来，它最大的问题就是它违背了“结构与表现分离”的原则。HTML就应该老老实实地定义内容的结构，比如这是一个段落（）、这是一个标题（）或者这是一张图片（
当所有样式都写在HTML里时，你会发现：
- 维护成本高得吓人：前面提到那个改颜色的例子，如果你有几百几千个页面，每个页面都有几十个
font color，那改起来简直是灾难。 - 代码冗余：同样的样式信息会重复出现在各个HTML标签里，文件大小徒增，加载速度也受影响。
- 缺乏灵活性：
font color只能改颜色，CSS能做的可就太多了，字体、大小、间距、背景、布局……简直是文本的魔法师。 - 可访问性差：纯HTML的样式嵌入，不利于屏幕阅读器等辅助技术理解和渲染内容。
所以，替代它的，毫无疑问就是CSS。我们通常会选择以下几种方式来替代font color：
外部样式表（External Stylesheets）：这是最推荐、最主流的方式。你创建一个独立的
.css文件，把所有样式规则写进去，然后在HTML文件的标签里用标签引用它。<!-- index.html --> <head> <link rel="stylesheet" href="my-styles.css"> </head> <body> <p class="main-paragraph">我的文字颜色。</p> </body> /* my-styles.css */ .main-paragraph { color: #336699; /* 这种蓝色看起来不错 */ font-size: 16px; line-height: 1.5; }这种方式的好处是，样式可以复用，维护起来非常方便，改一个地方，所有引用这个样式的地方都变了。
内部样式表（Internal Stylesheets）：当你只有一个HTML文件，或者某个页面的样式非常特殊，不适合放在公共的外部样式表里时，可以在HTML文件的
标签里使用
