CSS颜色和长度单位

颜色

如果我们相给页面设置颜色可以采用多种方法进行设置：

一、命名颜色

假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了，就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。

命名颜色的关键字有限，css定义了17个标准色：浅绿色，黑色，蓝色，紫红色，灰色，橙色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色。

颜色名	颜色	颜色名	颜色
aqua	浅绿色	black	黑色
blue	蓝色	fuchsia	栗色
gray	灰色	green	绿色
lime	石灰	maroon	紫红色
navy	海军	olive	橄榄
orange	橙色	purple	紫色
red	红色	sliver	银色
teal	蓝绿色	white	白色
yellow	黄色

有的时候也许使用其他颜色值，并不在标准颜色之内的颜色也可以使用，它之所以能起作用，原因是大多数的web浏览器能识别多达140个颜色，包括前面说的17种颜色。

（二）、RGB指定颜色

计算机通过组合不同的红色、蓝色、绿色分量来创造颜色。这种组合通常被称为RGB颜色。可以直接访问这些颜色，通过调整红、绿、蓝分量来最大限度的控制颜色。

所有浏览器都支持 RGB 颜色值。

RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是整数三元组表示法：参数介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

百分数记法：分别指定白色和黑色，值将指定为：

rgb(100%,100%,100%)

rgb(0%,0%,0%)

整数三元组记法，相同的颜色表示如下

rgb(255,255,255)

rgb(0,0,0)

在百分数记法中也可以使用分数，假设如果向指定某一颜色的红色分量为25.5%，绿色分量为40%，蓝色分量为98.2%，如果用户代理忽略小数点，就会把这些值取整为与之最接近的整数。当然整数取值法只能使用整数。如下所示：

h2{color:rgb(25.5%，40%，98.2%)} 转换为 h2{color:rgb(26%，40%，98%)}

无论哪种记法，如果值落在可取范围之外，都会变动到最接近的范围边界。当一个值大于100%或是小于0%都会默认的调整到100%或0%（这是可取的最大和最小值）

h2{color:rgb(200%，-40%，0%)} 转换为 h2{color:rgb(100%，0%，0%)}

h2{color:rgb(42，500，-20)} 转换为h2{color:rgb(42，255,0)}

假设有一个颜色为rgb（25%，37.5%，60%），将其转换为整数记法，百分数乘以255，就会得到63.75、95.625、153。再将这些值取整为最接近的整数，记得到了rgb（64,96,153）。

（三）、十六进制RGB颜色

所有浏览器都支持十六进制颜色值。

十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。大写小写都可以。

如果组成十六进制的三组数各自都是成对的，还允许一种简写方法，这种写法一般都是#RGB

如 h2{color:#FFF}=h2{color:#FFFFFF}

浏览器会取一位，并将其复制成两位。因此#FF0000等价于#F00。

（四）、RGBA颜色值

RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

（五）、HSL 颜色

HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。

HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。

Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。

（六）、HSLA 颜色

HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

（七）、web安全颜色

web安全颜色是指，在256色计算机系统上可以避免抖动的颜色，保证网页颜色可以正确显示。web安全颜色可以表示为RGB值20%和51（相应的十六进制值为33）的倍数。另外，0%或0也是一个安全值。

如果使用RGB百分数，要让所有这三个分量要么是0%，要么是能被20整除的数值，例如rgb（40%，100%，80%）或rgb（60%，0%，0%）。
如果使用0~255范围的RGB值，则分量要么是0，要么是能被51整除的数，如rgb（0,204,153）或rgb（255,0,102）
采用十六进制记法，使用值为00、33、66、99、CC和FF的三元组都认为是Web安全的。这种例子还有#669933、#00CC66和#FF00FF。这说明，web安全颜色的简写十六进制值是0、3、6、9、C和F。因此#693、#0C6、#F0F都是web安全颜色的例子。

长度单位

所有的长度单位都可以表示为正数或是负数，其后跟有一个标签（有些属性只接受正值）。

这些长度单位可以划分为两类：绝对长度单位和相对长度单位。

（一）、绝对长度单位

在网页设计很少使用绝对长度单位来设置

1、英寸in
2、厘米cm 1英寸等于2.54厘米，1厘米等于0.394英寸
3、毫米mm 10毫米等于1厘米，1英寸等于25.4毫米，1毫米等于0.0394英寸
4、点pt 点是标准印刷度量单位。1英寸等于72点。因此p{font-size:18pt}等价于p{font-size:0.25in}
5、派卡pc 也是一个印刷度量单位。1pc相当于12点，6pc相当于1英寸。因此p{font-size:0.25in}等价于p{font-size:1.5pc}

只有当浏览器知道用来显示页面的显示器、打印机或是其他设备的所有细节，这些单位才真正有用，浏览器上显示会受显示器尺寸影响，显示器分辨率不同可能也会影响显示效果。

（二）、相对长度单位

之所以称之为相对单位，是因为他们是根据与其他事物的关系来度量的。所度量的实际距离（或绝对）距离可能因为不在其控制之下的其他因素而改变，如：屏幕分辩率，可视区的宽度，用户首选项设置，以及其他很多方面。

有三种相对长度单位：em、ex、px

1、百分比（%）相对于父元素或是祖先元素来实现相应的设置
2、em 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。如果某元素以 12pt 显示，那么 2em 是24pt。em可以自动适应用户所使用的字体。
3、ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) ex指的是字体中小写x的高度，因此如果有两个段落，其中文本的大小为24点，但是每个段落使用了不同的字体，那么各段相应的ex值可能就不同，因为不同字体中的x高度可能不同。
4、像素（px）虽然像素表现的很像一个绝对定位的单位，由于pixel像素取决于显示器的分辨率。所以像素被定义为一种相对度量单位。