我们学习了如何给段落设置文字颜色,然后你发现因为英文水平有限,表达颜色的词汇并不会写几个,这可怎么办啊?其实颜色的值还支持好多种写法,在这里简单的说几个。

首先,我们在网页中使用的颜色,一般都用 RGB 的方式进行表达[1],所以我们可以写:

p {
  color: rgb(255, 0, 0);
}

三个数字的取值范围均是 0-255,分别代表红色,绿色,和蓝色的浓度,这就是 RGB 颜色。然后他还有另外的一种表达方式,做设计的朋友应该都不会陌生:

p {
  color: #FF0000;
}

查了一下,很多人都管这种方式叫做 16 进制颜色代码。不过也只不过是把上面的颜色改为 16 进制表达而已,我觉着,这只不过算是 RGB 颜色的另一种书写方法罢了。

然后还有一种情况,我们需要一个透明色。这个表达好像不太准确,应该说我们需要一个带有透明度的颜色,这时候怎么去写呢?我比较推荐用 RGB 颜色,加上 Alpha 通道的写法。说起来很热闹的样子,写下来你就明白了:

p {
  color: rgba(255, 0, 0, 0.8);
}

看一看和上面的区别是什么?这就是 RGBA 颜色,第四个值的取值范围是 0 到 1,用来表示透明度,0 是完全透明,1 是完全不透明。

毕竟咱们这是一个前端教程,设计部分的东西就不说太多了,如果有必要,你可以自己装一个取色器,调色盘等等。不过编辑器也自带调色盘功能……(再次觉得我的推荐十分厉害,2333

然后还有一个细节要说(其实这次的是重点了啊喂)。我们的选择器,他表达的是什么意思?

哦,前面不是讲了,这是段落吗?对啊,那么是哪一个段落呢?现在认真的解读一下这个选择器,他表示网页中所有标签为 p 的元素,即所有的段落。

这就很厉害哦,我们把这代码一写出来,网页中所有的段落全都变了颜色,很有点儿统御着千军万马,令行禁止,排山倒海的感觉。这是为什么我说内联样式表的书写方法让人很难受,因为一个元素一个元素去分别指定,实在太累了。哦,过去用 HTML 元素属性的方法去设置样式,比用内联样式表还要累一些(难怪会被淘汰呢。

这么一点点代码,居然被补充出了这么多东西。毕竟我们刚刚接触 CSS,对一切都还很陌生,所以遇到的每一个细节都是我们要学习的东西,这样介绍起来自然比较慢。后面随着我们对这些内容的熟悉,学习的进度就可以越来越快了(并不,后面还有新的问题等着我们,喵唧~

好啦,这一章就到这里吧,下一章开始要带大家认识更多的属性了。

【本章助记卡片:卡片 for 第三十章

>注释 1: 还支持 HSL 色彩系统,这个不常用,但是在某些涉及到颜色计算的时候,这个色彩系统更加好用。