原文: 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 文本的颜色以使其看起来更好。
祝你编程愉快!