3. 十六进制表示法
红色:
1 background-color: #ff0000; |
所有用#开头的值,都是16进制的。
#ff0000
16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算呢,这里我们来介绍一下
我们现在看一下10进制中的基本数字(一共10个):
0、1、2、3、4、5、6、7、8、9
16进制中的基本数字(一共16个):
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
16进制对应表:
十六进制中,13 这个数字表示什么?
表示1个16和3个1。 那就是19。 这就是位权的概念,开头这位表示多少个16,末尾这位表示多少个1。
如:
16进制中的2b等于10进制多少?
答:2*16+11 = 43。
所以,#ff0000就等于rgb(255,0,0)
1 background-color: #123456; |
等价于:
1 background-color: rgb(18,52,86); |
所以,任何一种十六进制表示法,都能够换算成为rgb表示法。也就是说,两个表示法的颜色数量,一样。
十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc;
比如:
1 background-color:#ff0000; |
等价于
1 background-color:#f00; |
比如:
1 background-color:#112233; |
等价于
1 background-color:#123; |
只能上面的方法简化,比如
1 background-color:#222333; |
无法简化!
再比如
1 background-color:#123123; |
无法简化!
要记住:
1 #000 黑 2 #fff 白 3 #f00 红 4 #333 灰 5 #222 深灰 6 #ccc 浅灰 |