原文： HTML Background Color – Change BG Color Tutorial

在构建网页时，你总是希望创建独特的布局。你希望你的网页能够吸引用户而不是显得刺眼。

为了做到这一点，你可以选择能够很好地融合并相互补充的背景和文本颜色。

默认情况下，你会注意到你的网页具有透明背景色，你可以将其更改为你想要的任何颜色。

例如，你可能希望在网页上创建深色模式功能，以便背景具有深色，而文本具有浅色。这有助于读者避免可能影响他们眼睛的刺眼颜色。

在本文中，你将学习如何使用 HTML 和 CSS 更改网页的背景颜色。

我们过去是如何改变背景颜色的

过去，在引入 HTML5 之前，一些基本的样式是由 HTML 处理的。

例如，当你想更改页面的背景颜色时，你可以轻松地在 body 开始标签中添加 bgcolor 属性并将其设置为你喜欢的颜色值，这可能是它的十六进制代码或名称。

<body bgcolor="grey">

// 或者

<body bgcolor="#808080">

但是，当引入 HTML5 时，此属性被一个更好的替代方案所取代，即 CSS background-color 属性。这是有道理的，因为 HTML 是一种标记语言，而不是样式语言。在处理样式时，最好使用 CSS。

如果你想快速查看如何更改网页、div 和其他元素的背景颜色，代码如下：

// 使用行内 CSS
<body style="background-color: value;"> 
  // ... 
</body>

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

假设你有空闲时间阅读更多，让我们开始吧。

如何在 HTML 中更改背景颜色

你可以使用 CSS background-color 属性来更改网页的颜色。该属性与其他所有 CSS 属性一样工作，这意味着你可以使用它以三种方式设置页面样式：

  • 在你的 HTML 标记中（内联样式）
  • 在 head 标签的 style 标签中（内部样式）
  • 在专门的 CSS 文件中（外部样式）

根据你的偏好，你可以将 background-color 属性设置为颜色名称、十六进制代码、RGB 值，甚至是 HSL 值。你不仅可以使用此属性来设置网页正文的样式，还可以设置 div、标题、表格等等。

在 CodePen 中查看以下示例：

如何在 HTML 中使用内联 CSS 更改背景颜色

内联 CSS 允许你将样式直接应用于 HTML 元素。这意味着你将 CSS 直接放入 HTML 标记中。你可以使用 style 属性执行此操作，该属性包含你希望应用于 HTML 标记的所有样式。

<body style="...">
  // ...
</body>

你将对首选颜色值使用 CSS background-color 属性：

// 颜色名称值
<body style="background-color: skyblue">
  // 十六进制值
  <div style="background-color: #87CEEB">
    // RGB 值
    <h1 style="background-color: rgb(135,206,235)">
      // ...
    </h1>

    // HSL 值
    <span style="background-color: hsl(197, 71%, 73%)">
      // ...
    </span>
  </div>
</body>

如何使用内部/外部 CSS 更改 HTML 中的背景颜色

设置网页样式的最佳方式是外部样式，但是当你只有几行样式时，你可以使用内部样式。

内部和外部都使用相同的方法：它们都使用选择器为 HTML 元素添加样式。

对于内部样式，所有样式都添加到你的 HTML 文件的 <style> 标签内，这个标签是在 <head> 标签中，如下所示：

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

  // ...

</html>

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

selector {
  background-color: value;
}

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

// HTML
<div> 
  <h1> Welcome to freeCodeCamp! </h1>
</div>

// CSS
div {
  background-color: skyblue;
}

你可以使用 class：

// HTML
<div class="container"> 
  <h1> Welcome to freeCodeCamp! </h1>
</div>

// CSS
.container {
  background-color: skyblue;
}

或者使用 id：

// HTML
<div id="container"> 
  <h1> Welcome to freeCodeCamp! </h1>
</div>

// CSS
#container {
  background-color: skyblue;
}

注意：正如你之前看到的，使用内联 CSS，你可以将颜色名称、十六进制代码、RGB 值和 HSL 值用于内部或外部样式。

总结

在本文中，你学习了如何使用 CSS background-color 属性更改 HTML 元素的背景颜色。你还了解了开发人员在引入带有 bgcolor 属性的 HTML5 之前是如何做到的。

请务必记住，使用内部或外部样式设置 HTML 元素的样式总是比内联样式更可取，因为它提供了更大的灵活性。例如，你可以为它们使用单​​个 CSS class，而不是为所有 <div> 标签元素添加类似的内联样式。

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

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

祝你编程愉快！