*4.CSS-颜色控制属性

31 篇文章 2 订阅
本文详细介绍了CSS中修改文字和背景颜色的各种方式,包括使用英文单词、RGB、RGBA以及十六进制和其缩写形式。通过color和background-color属性,开发者可以精确控制网页元素的色彩表现,从基本的颜色定义到透明度控制,再到颜色的十六进制表示及其简化规则。此外,还强调了灰色的生成原理和背景颜色的设置方法。
摘要由CSDN通过智能技术生成

颜色控制属性

在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

注意点:

  1. 如果当前颜色对应的两位数字不一样,那么就不能简写
    例如:#123456
  2. 如果两位相同的数字不是属于同一个颜色的,也不能简写
    例如:#122334

同理
如何设置标签的背景颜色?
在CSS中有一个background-color:属性,就是专门用来设置标签的背景颜色的。
取值:
具体单词
rgb
rgba
十六进制

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值