给你的Hello World！添加色彩

最新推荐文章于 2024-11-10 17:30:00 发布

CHINA_RED

最新推荐文章于 2024-11-10 17:30:00 发布

阅读量160

点赞数 3

文章标签： css html 前端

本文链接：https://blog.csdn.net/china_red/article/details/139188670

版权

还记得上一篇中Hello World！有了什么变化吗？对了，就是添加了不同级别的标题。但是有的文章里有只有这些还是不够的，接下来我们要做点什么呢？给文字增加点色彩看看怎么样。

我们先试试把Hello World!设置成红色。方法很简单，在<h1>里面加上一段语句，styel='color:red'，就像这样：

<html>
<head>
<title>My First Html</title>
</head>
<body>
<h1 style='color:red'>
Hello World!
</h1>

<h1>这是一个h1标题</h1>

<h2>这是一个h2标题</h2>

<h3>这是一个h3标题</h3>

<h4>这是一个h4标题</h4>

<h5>这是一个h5标题</h5>

<h6>这是一个h6标题</h6>

</body>
</html>

现在Hello World！这个字变成了红色了。

现在我们把h1-h6的标题设置上不同的色彩。看看最终的效果怎么样。

<html>
<head>
<title>My First Html</title>
</head>
<body>
<h1 style = "color:red">
Hello World!
</h1>

<h1 style = "color:#6895BF">这是一个h1标题</h1>

<h2 style = "color:#7DA2CE">这是一个h2标题</h2>

<h3 style = "color:#B9C2E3">这是一个h3标题</h3>

<h4 style = "color:#A4CBEC">这是一个h4标题</h4>

<h5 style = "color:#B9E3FB">这是一个h5标题</h5>

<h6 style = "color:#CBEEF8">这是一个h6标题</h6>

</body>
</html>

看到效果了吧，是不是现在头脑里有疑问？为什么Hello World!写的英文的red，而其他的都是#开关的字母和数字组合？

现在就来介绍一下

style = "color:#A4CBEC"

style是声明这是为标签设置一个样式。

color表示为标签设置颜色属性。

color属性值可以是颜色名称，也可以是红绿蓝三种颜色成分的值。

这个数值可以是十进制也可以是十六进制。

十进制是3组2位十进字数，中间以逗号分隔。

十六进制是以#号开关的6位十六进制字符。

还有几种设置颜色的方法，以后我们再慢慢介绍。今天就先说到这里，下次我们再丰富下页面。