原文： How to Change Text Color in HTML – Font Style Tutorial

文本在我们的网页上扮演着重要的角色。这是因为它可以帮助用户了解网页的全部内容以及他们可以在网页上做什么。

当你向网页添加文本时，文本默认为黑色。但有时你会希望将文本颜色更改为更加个性化。

例如，假设你的网站背景颜色较深，在这种情况下，你需要使文本颜色更亮，以提高网站的可读性和可访问性。

在本文中，你将学习如何更改 HTML 中文本的颜色。我们将研究各种方法，并讨论哪种方法最好。

如何在 HTML5 之前更改文本颜色

在引入 HTML5 之前，你会使用 <font> 向网站添加文本。此标记采用 color 属性，该属性接受颜色以名称或十六进制代码值输入：

<font color="#9900FF"> Welcome to freeCodeCamp. </font>

// 或者

<font color="green"> Welcome to freeCodeCamp. </font>

当 HTML5 被引入时，这个标签就逐渐退出了。这是有道理的，因为 HTML 是一种标记语言，而不是样式语言。在处理任何类型的样式时，最好使用 CSS。

这意味着如果你要为网页添加颜色，你需要使用 CSS。

如果你急于查看如何更改文本的颜色，那么请查看这里：

// 使用内联 CSS
<h1 style="color: value;"> Welcome to freeCodeCamp! </h1>

// 使用内部/外部 CSS
selector {
    color: value;
}

假设你不着急，让我们接着看。

如何更改 HTML 中的文本颜色

你可以使用 CSS color 属性来更改文本颜色。此属性接受颜色值，例如十六进制代码、RGB、HSL 或颜色名称。

例如，如果要将文本颜色更改为天蓝色，可以使用名称 skyblue、十六进制代码 #87CEEB、RGB 十进制代码 rgb(135,206,235) 或 HSL 值 hsl(197, 71%, 73%)。

你可以通过三种方式使用 CSS 更改文本的颜色，即内联、内部或外部样式。

如何使用内联 CSS 更改 HTML 中的文本颜色

内联 CSS 允许你将样式直接应用于 HTML 元素。这意味着你将 CSS 直接放入 HTML 标记中。

你可以使用 style 属性，它包含你希望应用于此标签的所有样式。

<p style="...">Welcome to freeCodeCamp!</p>

你将使用 CSS color 属性以及你的首选颜色值：

// 颜色名称
<p style="color: skyblue">Welcome to freeCodeCamp!</p>

// 十六进制值
<p style="color: #87CEEB">Welcome to freeCodeCamp!</p>

// RGB 值
<p style="color: rgb(135,206,235)">Welcome to freeCodeCamp!</p>

// HSL 值
<p style="color: hsl(197, 71%, 73%)">Welcome to freeCodeCamp!</p>

但是，如果你的应用程序变得更大更复杂，那么内联样式并不是最佳选择。因此，让我们看看你可以做什么。

如何使用内部或外部 CSS 更改 HTML 中的文本颜色

另一种更改文本颜色的首选方法是使用内部或外部样式。这两个非常相似，因为它们都使用选择器。

对于内部样式，你可以在 HTML 文件的 <head> 标签中进行。在 <head> 标签中，你将添加 <style> 标签，并且把所有 CSS 样式放在里面，如下：

<!DOCTYPE html>
<html>
  <head>
    <style>
      selector {
        color: value;
      }
    </style>
  </head>

  // ...

</html>

而对于外部样式，你所要做的就是使用通用语法将 CSS 样式添加到你的 CSS 文件中：

selector {
  color: value;
}

选择器可以是你的 HTML 标记，也可以是 class 或 ID，例如：

// HTML
<p> Welcome to freeCodeCamp! </p>

// CSS
p {
  color: skyblue;
}

你可以使用 class：

// HTML
<p class="my-paragraph" > Welcome to freeCodeCamp! </p>

// CSS
.my-paragraph {
   color: skyblue;
}

或者使用 id：

// HTML
<p id="my-paragraph" > Welcome to freeCodeCamp! </p>

// CSS
#my-paragraph {
   color: skyblue;
}

注意：正如上文所介绍的，使用内联 CSS，你可以使用颜色名称、十六进制代码、RGB 值和 HSL 值以及内部或外部样式。

总结

在本文中，你学习了如何使用 CSS 更改 HTML 元素的字体/文本颜色。你还了解了开发人员在引入 HTML5 之前是如何使用 <font> 标记和 class 属性来实现的。

另外，请记住，使用内部或外部样式设置 HTML 元素的样式总是比内联样式更可取，这是因为它提供了更大的灵活性。

例如，你可以为所有 <p> 标签元素使用一个 CSS class，而不是为它们添加类似的内联样式。

内联样式不被认为是最佳实践，因为它们会导致大量重复——你不能在其他地方重用这些样式。要了解更多信息，你可以阅读我的关于 HTML 中的内联样式的文章。你还可以在这篇文章里了解如何更改文本大小，以及在这篇文章里了解如何更改背景颜色。

我希望这篇教程能帮你了解如何更改 HTML 文本的颜色以使其看起来更好。

祝你编程愉快！