css常用属性之颜色和单位

颜色

当初我在初学前端的时候，就会冒出一个疑问“我该如何设置网页颜色？”，一般常用英文颜色名或者十六进制颜色值来设置颜色，但是css中还有一些其他较为复杂的
写法。

RGB颜色

计算机通过不同级别的红、绿、蓝来产生新的颜色，这就是常说的RGB颜色。有了这样一个产生颜色的机制，就可以通过直接给出不同的颜色级来确定颜色，就可以自己去
组合三种颜色的值。

写法：
h1{color:rgb(100%,100%,100%)} 百分比rgb颜色写法，数字范围从0%到100%
h1{color:rgb(0,255,255)} 数字rgb颜色写法，数字范围从0到255

注意：两种写法的值都会被修剪，百分比会被修剪成0%-100%，即超出100%被修剪成100%，低于0%修剪成0%，数字则会被修剪成0-255，另外，两者不能混写，混写是不会生效的。

十六进制颜色和颜色名设置颜色我们就不再提了

单位

长度单位：一般分为绝对单位和相对单位。绝对单位从诞生之日起其实用的很少，至少我平时在项目上很少用到。所以这里就跳过了绝对单位的介绍。

相对单位：有三种相对的长度单位，em、ex和px。前两种分别代表“元素的字体高度”和“字母shezhi‘x’的高度”，他们是普通印刷上的量度，最后一个px代表“像素”，之所以说它是
相对的，是因为它依赖显示器的分辨率。

em：css中，一个“em”就是给定字体的font-size值。唯一例外的就是在设置字体尺寸，这种情况下em的值是相对于父元素的。

如

这时p的字体大小就是20px，而不是默认的16px。

px：按像素值px来设置。如
body{font-size:20px;}
p{font-size:16px;}
p元素中字体的大小就是16px

百分比值：同长度单位比较，百分比就显得很简单，就是一个百分比值。例如：
h1{line-height:150%;} 设置所有h1的行高比普通行高大一半。

总之百分比总是通过另外一个值来计算的，这些在后面属性讲解中会一一提到。而且百分比可正可负，对于有些属性只接受正值，这就另说了。

今天的内容就这么多，写的有点乱，希望以后越写越好吧。

更多css常用属性之颜色和单位相关文章请关注PHP中文网！