如何修改 HTML 元素的颜色


该系列的一部分:
如何使用 HTML 构建网站

本教程系列将指导您使用 HTML(用于在 Web 浏览器中显示文档的标准标记语言)创建和进一步自定义该网站不需要有任何编码经验,但如果您想重新创建演示网站,我们建议您从本系列开头开始

在本系列结束时,您应该有一个准备好部署到云的网站,并且基本熟悉 HTML。了解如何编写 HTML 将为学习其他前端 Web 开发技能(例如 CSS 和 JavaScript)奠定坚实的基础。

您可以使用 HTML 来修改网页的某些元素和内容片段的颜色。例如,你可以改变文本的颜色,边框或者,如在本教程演示HTML内容的分割-of一个<div>元素。改变这些内容的颜色值的方法因元素而异。

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

文本元素的颜色,例如<p>or <h1>,通过使用style属性和color属性来修改,如下所示:

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

尝试在您的index.html文件中编写此代码并在浏览器中加载它。(如果您还没有关注本系列教程,您可以index.html在我们的教程设置您的 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>使用下面的颜色名称元素:blackwhitegraysilverpurpleredfuchsialimeolivegreenyellowtealnavybluemaroon,和aqua

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

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

觉得文章有用?

点个广告表达一下你的爱意吧 !😁