CSS 中常用的值和单位：CSS 属性是由属性名和属性值组成的，属性名规定了修改什么，而属性值是给定了具体的样式。那么这些值有些是特定的有意义单词，有些是具体的数值，下面我们就来介绍一下这些内容。

关于颜色

在页面编写的时候，很多地方会用到颜色属性，比如文字的颜色、元素的背景颜色、边框的颜色等，那么我们可以通过color、background-color、border-color属性来设置，这些属性的值都有哪些呢？

CSS 合法色值（CSS Colors）

• 十六进制颜色 ：所有主要浏览器都支持十六进制颜色值，指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间；

h1{color:#ff0000;}

• RGB颜色 ：RGB颜色值在所有主要浏览器都支持，RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数；

h1{color:rgb(255,0,255)}

• RGBA颜色 ：RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持，RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度，RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

h1{color:rgba(255,255,0,0.5)}

• HSL色彩 ：IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值，HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示，HSL颜色值指定：HSL（色调，饱和度，明度），色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的；

h1{color:hsl(100,60%,75%)}

• HSLA颜色 ：HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持,，HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度，指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数；

h1{color:hsla(120,60%,80%,0.3)}

• 颜色名称 ：所有浏览器都支持颜色名称，147颜色名称定义在HTML和CSS的颜色规格(17个标准色加上130多个其他)。
  

17种标准颜色：浅绿色，黑色，蓝色，紫红色，灰色，灰色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色

h1{color:Black;}

关于单位

CSS 有几个不同的单位用于表示长度，一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width等，一般长度是由数字和单位组成的，例如 10px，数字和单位链接的时候不能出现其他符号包括空格，如果长度是0可以省略单位，有些属性长度可以是负数，例如margin，长度主要分为相对单位和绝对单位。

浏览器支持的单位有：

下面我们分别来看看每个单位的意义：

相对长度：指定了一个长度相对于另一个长度的属性，对于不同设备相对长度比较适用。

提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

绝对长度：绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

像素或许被认为是最好的”设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。