大家好,我是翼同学!
目录
- 1️⃣前言
- 2️⃣颜色体系
- ✨颜色名称
- 📓颜色值
- 📙HEX值
- 📘RBG值
- 📗HSL值
- 💡关键字
- 🎐transparent
- 🪄currentColor
- 3️⃣写在最后
1️⃣前言
今日笔记内容是:
- CSS中的颜色体系
在HTML文档中,有好多地方可以通过CSS来设置颜色属性美化样式,常见的有文本的颜色color
、元素的背景色background-color
、元素的边框border-color
、元素的阴影颜色等。而在CSS中,颜色的表示方法也有很多,下面就来看看具体的颜色指南。
2️⃣颜色体系
在CSS中有多种颜色表示方法,思维导图如下:
✨颜色名称
- CSS支持 140 种被预定义过色值的标准颜色名称
- 比如:
red
、blue
、green
等 - 这些颜色名称是不区分大小写的
- 举例如下:
📓颜色值
颜色值有三种表示方式:
- HEX值
- RGB值
- HSL值
现在举例如下:
📙HEX值
- 用
HEX值的特定格式
来表示颜色值是颜色定义中最常见的方法了 HEX值
由符号#
和十六进制组合而成,其表示形式为:#RRGGBB
,比如##fafa44
- 其中,
R
表示红色,G
表示绿色,B
表示蓝色,其值介于00
~ff
之间,用于指定颜色的强度 - 注意,当
#RRGGBB
满足两个R、两个G和两个B同时相等时,可以简写为#RGB
,比如#aabbcc
可以简写为#abc
如下所示:
📘RBG值
- 在CSS中,也可以通过RGB值来指定颜色。
- 其中RGB分别表示
红绿蓝
,书写格式为:rgb(0, 0, 0)
,括号里用三个数值分别表示种颜色的强度,并且数值的范围是:0
~255
RBG值举例如下:
- 另外,有一个知识点是透明度。也就是可以为
RGB值
添加alpha值
用于定义透明度 - 具体做法为,在
rgb(0, 0, 0)
中添加第四个值,范围是0
~1
- 其中
0
是最小值,表示完全透明,1
是最大值,表示不透明 - 现举例如下:
📗HSL值
- 在CSS中,可以使用HSL值来表示颜色值
- 这个颜色表示与前两种不怎么像。
- HSL值分别表示色调、饱和度和亮度
具体解释如下:
一、色调(hue)
色调是色轮的度数,其值的范围是0
到360
,其中0
表示红色,120
表示绿色,240
表示蓝色。
具体如下所示:
二、饱和度(saturation)
饱和度,表示色彩的纯度。饱和值越高,色彩越纯,越低则色彩越灰。并且注意到,饱和值是用百分号来表示,0%
表示灰色阴影,100%
表示全色。
示意图如下:
三、亮度(lightness)
亮度也可以称明亮度。值越高越亮,也就越接近白色。值越小就越暗,越接近黑色。
跟饱和度一样,亮度值也是用百分比来表示。其中0%
是黑色,50%
表示不明不暗,100%
是白色。
举个例子:
和RGB值一样,HSL值也可以添加alpha
值来指定颜色的不透明度。其语法为:hsla(0, 0, 0, 0.0)
,最后一个值表示alpha,取值范围也是0.0
到1.0
。
效果如下所示:
💡关键字
在CSS中,关于颜色表示的还有两个关键字:transparent
和currentColor
。具体用法看下面:
🎐transparent
transparent
,意为透明,用于表示完全透明的颜色。transparent
就是全透明黑色(rgba(0,0,0,0)
)的速记方法- 需要注意的是,在 CSS3 之前,
transparent 关键字
不是一个真实的颜色。而在支持 CSS3 的浏览器中,它被重新定义为一个真实的颜色,也就是说,transparent
被延伸到任何一个有color值
的属性上。
举个例子:
div { background-color: transparent;}
🪄currentColor
在CSS3中,扩展了currentColor关键字
,用于所有接收颜色的属性上,表示元素当前颜色。
如何来理解这个关键字呢?
来看一个例子:
div{
color: red;
border:1px solid;
}
如果你一看就知道上述代码的运行效果,那就能轻松理解currentColor
关键字的作用。
具体的,当我们指定<div>
标签中color属性
为红色时,即使不给盒子边框设置颜色值(border:1px solid;
),其默认颜色值也会是color属性
的值,也就是红色。另外,如果我们去掉上述代码中的color属性
的定义,边框会变成什么颜色?此时边框的颜色取决于父元素的颜色值,也就是说color值
具有继承性。
因此,总结的说,currentColor
关键字用于接受颜色的属性上,其作用是:使用当前color属性值
的计算值,如果当前未设置color值
,则会继承父元素的color值
3️⃣写在最后
好了,今天的笔记就写到这里。