如何更改HTML元素的颜色

您可以使用 HTML 来修改网页的某些元素和内容片段的颜色。 例如，您可以更改文本、边框的颜色，或者（如 HTML Content Division 教程中所演示的）<div> 元素的颜色。 更改这些内容的颜色值的方法因元素而异。

在本教程中，您将学习如何使用 HTML 颜色名称更改文本、图像边框和 <div> 元素的颜色。

使用 style 属性和 color 属性可以修改文本元素的颜色，例如 <p> 或 <h1>，如下所示：

<p style="color:blue;">This is blue text.</p>

尝试在您的 index.html 文件中编写此代码并将其加载到浏览器中。 （如果您还没有学习教程系列，您可以在我们的教程 设置 HTML 项目 中查看设置 index.html 文件的说明。 有关在浏览器中加载文件的说明，请参阅此处的 教程 。）

您应该会收到如下信息：

这是蓝色文字。

使用 style 属性和 border 属性修改边框的颜色：

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="border: 10px solid green"/>

尝试在您的 index.html 文件中编写此代码并将其加载到浏览器中。 （请注意，在此示例中，我们使用的是在线托管 的 图像。 我们还指定边框应为 10 像素宽且实心（与虚线相反））。

您应该会收到如下信息：

<div> 容器的颜色通过使用 style 属性和 background-color 属性进行修改，如下所示：

<div style="width:200px;height:200px;background-color:yellow;"></div>

尝试在您的 index.html 文件中编写此代码并将其加载到浏览器中。 您应该会收到如下信息：

在这些示例中，颜色值由颜色名称定义。 尝试使用以下颜色名称更改文本、图像边框和 <div> 元素的颜色：black、white、gray、silver , purple, red, fuchsia, lime, olive, green, yellow, teal、navy、blue、maroon 和 aqua。

请注意，颜色也可以由十六进制值指定。 十六进制颜色由六个字母数字组成，前面有一个井号，例如 #0000FF（蓝色）、#40E0D0（青绿色）或 #C0C0C0（银色）。 但是，对于本教程系列，我们将继续使用颜色名称。

您现在应该基本熟悉如何使用颜色名称更改文本、图像边框和 <div> 元素的颜色。 当我们开始构建我们的网站时，我们将在后面的教程系列中返回颜色。