原文： HTML Background Color – Change BG Color Tutorial

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

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

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

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

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

我们过去是如何改变背景颜色的过去，在引入 HTML5 之前，一些基本的样式是由 HTML 处理的。

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

// 或者

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

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

// 使用行内 CSS

// ...

// 使用内部/外部 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 标记的所有样式。

// ...

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

// 颜色名称值

// 十六进制值

如何使用内部/外部 CSS 更改 HTML 中的背景颜色设置网页样式的最佳方式是外部样式，但是当你只有几行样式时，你可以使用内部样式。

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

对于内部样式，所有样式都添加到你的 HTML 文件的

// ...

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

selector {

background-color: value;

}

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

// HTML

// CSS

div {

background-color: skyblue;

}

你可以使用 class：

// HTML

// CSS

.container {

background-color: skyblue;

}

或者使用 id：

// HTML

// CSS

#container {

background-color: skyblue;

}

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

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

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