HTML文档/元素的背景色可以增强网页的美感。改变HTML网页的背景颜色可以使你创造出独特的彩色布局。给HTML添加背景色使其最突出,使读者更容易阅读。
HTML提供了对元素操作的广泛支持。HTML提供了按要求改变背景色的支持。
本文旨在提供各种方法来改变HTML中的背景颜色。你将获得以下学习成果。
如何改变HTML中的背景颜色
HTML中的**"background-color "属性将改变背景颜色。早期的版本支持"bgcolor "属性**,而最新的版本已经不支持了。可以通过以下方式行使**"背景色 "属性**。
- 内联CSS。CSS样式被添加到标签内
- 内部CSS。样式被添加在HTML文档的头部部分
- 外部CSS。创建一个外部CSS文件,并与HTML文档链接,以添加变化。
所有这些方法将在接下来的章节中讨论。
如何使用内联CSS改变HTML中的背景颜色
内联CSS是在元素的开头标签内使用的,内联CSS将只影响它所使用的元素。 我们将使用Background-color属性来改变颜色属性
代码
<body style="background-color: azure;">
<p>We used the Background-color attribute to change the background color</p>
</body>
在这里,我们在body标签中使用了内联CSS,来改变背景颜色。

我们在body标签内使用了style属性,添加了Background-color属性,并给它分配了Azure颜色的关键字名。
输出

应用内联CSS后,body标签的背景色变成了天蓝色。
如何使用内部CSS改变HTML中的背景色
内部CSS是用来给Head部分的单个HTML文档设置样式。所有的CSS代码都在Style标签内,而style标签则在head标签内。
代码
<head>
<style>
body {
background-color: azure;
}
</style>
</head>
我们使用Inline CSS并选择body部分来应用 "背景色 "属性。

输出结果

正如你所看到的,使用Inline CSS将背景颜色改为Azure。
如何使用外部CSS来改变HTML中的背景色
外部CSS是一个单独的文件,只包含CSS代码。它用标签链接在HTML文件的头部部分,它可以用来对多个网页进行修改。外部CSS文件必须以.CSS为扩展名保存。
CSS代码
body {
background-color: #F0FFFF;
}
创建一个名为**"style.css "的CSS文件,在"style.css "**内写上上述代码。
HTML代码
<head>
<link rel="stylesheet" href="style.css">
</head>
此外,以下几行是用来链接HTML文档中的CSS文件的。

输出

可以看到,背景颜色从默认值变成了天蓝色。
结论
background-color属性将改变HTML中的背景颜色。背景色属性将使用所有的样式设计方法,包括内联、内部和外部CSS。颜色名称"、颜色的 "Hexa "值或 "背景色 "属性的 "RGB "组合可以用来应用各种颜色。