如何更改 HTML 元素的颜色

例如,你可以更改文本的颜色,边界,或 - 如在教程中所示 HTML 内容部分 - 一个 <div> 元素。 改变这些内容元素的颜色值的方法因元素而异。

在本教程中,您将学习如何使用HTML颜色名称更改文本、图像边界和

元素的颜色。

文本元素的颜色,如<p><h1>,通过使用风格属性和颜色属性来修改:

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

试着在你的index.html文件中写这个代码,然后在浏览器中加载它(如果你没有遵循教程系列,你可以在我们的教程中查看设置一个index.html文件的说明(https://andsky.com/tech/tutorials/setting-up-your-html-project)。 有关在你的浏览器中加载该文件的说明,请参阅我们的教程(https://andsky.com/tech/tutorials/html-elements# loading-an-html-file-in-your-browser)。

你应该得到这样的东西:

This is blue text.

边界的颜色通过使用风格属性和边界属性进行修改:

1<img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/others/56322088a8d0f8011d4acd60361422df_small-profile.jpeg" style="border: 10px solid green"/>

尝试在你的index.html文件中写这个代码,并将其加载到浏览器中(注意,我们在本例中使用的是 我们在线托管的图像

你应该得到这样的东西:

div容器的颜色通过使用风格属性和背景颜色属性进行修改,如下:

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

尝试在你的index.html文件中写这个代码,然后将其加载到浏览器中,你应该得到这样的东西:

在这些示例中,颜色值是由颜色名称定义的。尝试使用以下颜色名称来更改文本、图像边界和

元素的颜色:黑色,白色,灰色,银色,紫色,红色,,`橄榄`,`绿色`,`黄色`,,海军,蓝色,棕色和`水。

请注意,颜色也可以用六分之一字的值来指定。六分之一字的颜色由六个字母数字组成,前者是英镑符号,例如:# 0000FF(蓝色), 40E0D0(),或# C0C0C0(银色)。

您现在应该熟悉如何使用颜色名称改变文本、图像边界和

元素的颜色。

Published At
Categories with 技术
Tagged with
comments powered by Disqus