如何在HTML中改变背景颜色

1,505 阅读3分钟

HTML文档/元素的背景色可以增强网页的美感。改变HTML网页的背景颜色可以使你创造出独特的彩色布局。给HTML添加背景色使其最突出,使读者更容易阅读。

HTML提供了对元素操作的广泛支持。HTML提供了按要求改变背景色的支持。

本文旨在提供各种方法来改变HTML中的背景颜色。你将获得以下学习成果。

  1. 如何使用内联CSS改变HTML中的背景颜色
  2. 如何使用内部CSS改变HTML中的背景色
  3. 如何使用外部CSS改变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文件的。

标签用于在head部分链接CSS文件。

输出

可以看到,背景颜色从默认值变成了天蓝色。

结论

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