3.十六进制表示法
红色:
1background-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)
1background-color: #123456;
等价于:
1background-color: rgb(18,52,86);
所以,任何一种十六进制表示法,都能够换算成为rgb表示法。也就是说,两个表示法的颜色数量,一样。
十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc;
比如:
1background-color:#ff0000;
等价于
1background-color:#f00;
比如:
1background-color:#112233;
等价于
1background-color:#123;
只能上面的方法简化,比如
1background-color:#222333;
无法简化!
再比如
1background-color:#123123;
无法简化!
要记住:
1#000 黑
2#fff 白
3#f00 红
4#333 灰
5#222 深灰
6#ccc 浅灰