你会在很多地方看到 CSS 单位中使用到数值。下面为大家介绍数值的最常用类别。
颜色值
在网页中的颜色设置是非常重要,有字体颜色,背景颜色,边框颜色等,设置颜色的方法也有很多:
1.英文命名颜色
p {
color: pink;
}
/*给p标签的字体颜色设置为粉色*/
2.RGB 颜色
由 Red、Green、Blue 三种颜色的比例来配色,简称 RGB。
p {
color: rgb(154, 32, 432);
}
每一项的值可以是 0~255 之间的整数,也可以是 0~100% 的百分数,如:
p {
color: rgb(30%, 20%, 40%);
}
3.十六进制颜色
现在较为普遍的颜色使用法,其原理其实也是 RGB 设置,但是其每一项的值由 0~255 变成了十六进制 00-ff。
p {
color: #00eeff;
}
长度值
长度单位总结了几种常用单位:px,em,%,这三种单位都是相对单位。
1.像素
px 像素(Pixel)。相对长度单位,像素 px 是相对于显示器屏幕分辨率而言的。
特点:
IE 无法调整那些使用 px 作为单位的字体大小。
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。
2.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*/
3.百分比
p {
font-size: 14px;
line-height: 120%;
}
/*行高为:14*1.2=16.8*/