我们会在很多地方看到CSS单位中使用到数值。下面将介绍数值的最常用类别。
1、CSS颜色
网页中的颜色设置非常重要,有字体颜色,背景颜色,边框颜色等,设置颜色的方法也有很多种。
英文命名颜色
p {
color: pink;
}/*给p标签的字体颜色设置为粉色*/
RGB颜色
由 Red、Green、Blue 三种颜色的比例来配色,简称 RGB。
p {
color: rgb(154, 51, 102);
}
每一项的值可以是 0~255
之间的整数,也可以是 0~100%
的百分数,如:
p {
color: rgb(30%, 20%, 40%);
}
十六进制颜色(Hexadecimal colors)
现在较为普遍的颜色使用法,每个十六进制颜色由红、绿、蓝三部分组成,其原理其实也是 RGB 设置。
红、绿、蓝这三种颜色,每一部分的取值范围可以从十六进制 00~FF
或者从十进制的0~255
。
示例:
p {
color: #00eeff;
}
十进制数的分解
十六进制数的分解
我们需要理解十六进制数中的字母,十六进制个位数字的取值范围是0~15,但是9以上的数字用字母表示。
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15
计算十六进制色
网页颜色
使用十六进制数来设置颜色,三个颜色,每个颜色有256种可能的取值,总共16777216种颜色。
2、长度值
长度单位总结了几种常用单位:px,em,rem,%,这三种单位都是相对单位。
像素
px 像素(Pixel)。相对长度单位,像素 px 是相对于显示器屏幕分辨率而言的。
特点:
- IE 无法调整那些使用 px 作为单位的字体大小。
- 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。
em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px,那么 1em=14px。如果 font-size 为 18px,那么 1em=18px。
p {
font-size: 14px;
line-height: 2em;
}
/*在这里的line-height行高被设置成了14*2=28px*/
div中的p元素字体大小为20px,则1em = 20px。
p的字体大小是从div继承下来的,为12px。
p的字体大小是从html继承下来的,为14px。
所以em为元素的字体大小。
rem
rem是CSS3中新增的一种相对长度单位。 当使用rem单位时,根节点的字体大小(font-size)决定了rem的尺寸。
类似于em单位,但rem的基准是相对于根节点的字体大小。
%
p {
font-size: 14px;
line-height: 120%;
}
/*行高为:14*1.2=16.8*/
3、挑战
制作谷歌图标