原文: HTML Background Color – Change BG Color Tutorial,作者:Joel Olawanle

译者: Miya Liu

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

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

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

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

在本文中,你将学习如何使用 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 标记,也可以是 classID,例如:

// 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 文本的颜色以使其看起来更好。

祝你编程愉快!