颜色控制属性
在CSS中如何通过color属性来修改文字颜色
格式:color:值;
取值:
1 英文单词
一般情况下常见的颜色都有对应的英文单词,但是英文单词能够表达的颜色是有限制的,也就是说不是所有的颜色都能够通过英文单词来表达
格式:color:red;
2 rgb
三原色,其中r:(red红色),g(green绿色),b(blue蓝色)
格式:
color: rgb(255,0,0);(红色)
color: rgb(0,255,0);(绿色)
color: rgb(0,0,255);(蓝色)
color: rgb(0,0,0);(黑色)
color: rgb(255,255,255);(白色)
那么这个格式中的第一个数字就是用来设置三原色的光源元件红色显示的亮度,第二个数字就是用来设置三原色的光源元件绿色显示的亮度,第三个数字就是用来设置三原色的光源元件蓝色显示的亮度,这其中每一个数字的取值是0-255之间,0代表不发光,255代表发光,值越大就越亮。在前端开发中并不常用黑色,一般使用灰色:只要让红色/绿色/蓝色的值一模一样,就是灰色,值越大越接近白色,值越小越接近黑色。
3 rgba
三原色 + a (代表透明度,值越小越透明)
格式:color: rgba(255,0,0,1);
4 十六进制
在前端开发中通过十六进制来表示颜色,其实本质就是rgb。十六进制中是通过每两位代表一种颜色。
例如:#FF0000
FF代表R,00代表G,00代表B
5 十六进制缩写
在CSS中只要十六进制的颜色中每两位的值都是一样时,那么就可以简写为一位
例如:#FF0000 = #F00
注意点:
- 如果当前颜色对应的两位数字不一样,那么就不能简写
例如:#123456 - 如果两位相同的数字不是属于同一个颜色的,也不能简写
例如:#122334
同理
如何设置标签的背景颜色?
在CSS中有一个background-color:属性,就是专门用来设置标签的背景颜色的。
取值:
具体单词
rgb
rgba
十六进制