css学习3：颜色，长度，单位，有用工具介绍

1、css中的颜色

颜色在网页中的作用非常重要。在CSS中设置颜色有好几种方法。最简单的办法是使用规定的颜色名称，或者设置红、绿、蓝三种颜色成分的值(十进制或十六进制)。设置颜色成分值时,十进制值以逗号分隔（例如0,0,0），十六进制值前面通常要加上一个#符号（例如#mIf，它代表白色)。

1.1 表示更复杂的颜色

颜色名称和简单的十六进制数不是表示颜色的唯一方式。CSS中还可以用一些函数选择颜色。

函数	说明	示例
rgb(r,g,b)	用RGB模型表示颜色	color:rgb(11,128,144)
rgba(r,g,b,a)	用RGB模型表示颜色,外加一个用于表示透明度的α值(0代表全透明，1代表完全不透明)	color:rgba(11,128,144,0.4)
hsl(h,s,l)	用HSL模型(色相[ hue ]、饱和度[ saturation J和明度[ lightness ])表示颜色	color:hsl(11,100%,22%)
hsla(h,s,l,a)	与HSL模式类似，只不过增加了一个表示透明度的α值	color:rgb(11,100%,22%,0.4)

2、css中的长度

许多CSS属性要求为其设置长度值。width属性和font-size属性就是这方面的例子。前者用于设置元素的宽度，后者用于设置元素内容的字号。

width:5cm;
font-size: 200pt;

2.1 绝对长度

单位标识符	说明
in	英寸
cm	厘米
mm	毫米
pt	磅（1磅等于1/72英寸）
pc	pica(1pica等于12磅)

如果能预先知道内容的呈现方式（例如为供打印的文档设计样式)，那么绝对单位很有用处。

2.2 相对长度

单位标识符	说明
em	与元素字号挂钩
ex	与元素字体的“x高度”挂钩
rem	与根元素的字号挂钩
px	CSS像素（假定显示设备的分辨率为96dpi)
%	另一属性的值的百分比

1）与字号挂钩的相对单位

p {
    font-size: 15pt;
    height: 2em;
}

将height属性值设置为2em，意思是p元素在屏幕上显示出来的高度应为字号的两倍。这个倍数是在显示每个元素的时候计算出来的。本例在style元素中为p元素的font-size设置了默认值15pt，然后又在文档中第二个p元素的内嵌样式里将该属性值设置为12pt。

这个单位是从font-size属性推算的。

html {
	font-size:0.2in;
}
p {
	font-size::2em;
	height:2em;
}

rem单位根据html元素（文档的根元素)的字号而定。

font-size属性值被设置为2rem，这表示使用该值的所有元素的字号将是根元素字号的两倍——0.4英寸。这条样式中的height属性被设置为2em,这又翻了一番。于是p元素在浏览器中将以0.4英寸的字号显示，其高度则是0.8英寸。

2）像素单位的问题

CSS中的像素恐怕不是你心里想的那样。像素这个术语一般是指显示设备上可寻址的最小单元——图像的基本元素。CSS却是另辟蹊径，其像素定义如下:

参考像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角（ visual angle )。

主流浏览器都没有理会CSS定义的像素和显示设备的像素之间的差别，它们将1像素视为1英寸的1/96(这是Windows系统的标准像素密度。有些平台的显示设备具有不同的像素密度，它们的浏览器通常要做些转换工作，让1像素仍然大约等于1英寸的1/96 )。

这样一来，尽管CSS像素原想定义为相对度量单位，结果却被浏览器当成绝对单位对待。

p {
	font-size:20px;
    width:200px;
}

3）百分比单位

可以把一个度量单位表示为其他属性值的百分比,这正是%单位的用途。

使用百分比单位会遇到两个麻烦。一是并非所有属性都能用这个单位。二是对于能用百分比单位的属性，那个百分比挂钩的其他属性各不相同。例如，对于font-size属性，挂钩的是元素继承到的font-size值;而对于width属性，挂钩的则是元素的包含块的宽度。
这些问题其实没那么复杂。包含块(这是一个反复出现的重要概念后面介绍。此外,后面逐一介绍CSS属性时，将会说明哪些CSS属性支持百分比单位，以及百分比是根据什么属性值计算的。

4）未获广泛支持的css属性

单位标识符	说明
gd	与网格( grid)挂钩。它依赖于CSS规范中一些定义不太明确的属性，所以未获广泛支持
vw	与视口( viewport）宽度挂钩。1vw等于文档显示区域(如浏览器窗口）宽度的1%
vh	与视口高度挂钩。1vh等于文档显示区域高度的1%
vm	1vm等于最短视口轴长（高度和宽度中较小的那个)的1%
ch	与用当前字体显示的字符的平均宽度挂钩。它在CSS规范中的定义很潦草，其实现也不一致

5）用算式作值

允许将CSS属性值设置为算式是CSS3定义的一个引人关注的特性。

p {
width:calc(80% - 20px);
}

calc()未得到广泛支持。

3、其他css单位

3.1 使用css角度

单位	说明
deg	度（取值范围:0deg ~ 360deg )
grad	百分度(取值范围:0grad ~ 400grad )
rad	弧度（取值范围:Orad ~ 6.28rad )
turn	圆周( 1turn等于360deg )

3.2 使用css时间

单位	说明
s	秒
ms	毫秒（1s=1000ms）

4、测试css特性的支持情况

CSS规范的分散性及其在浏览器中参差不齐的实现，导致要搞清有哪些CSS特性可用并不轻松。下面给读者推荐几个用来检测对CSS的支持程度的有用工具。
第一个工具是这个网站: http://caniuse.com。它对各款浏览器的各种版本对HTML5和CSS3的支持情况进行了全面分析,所提供的详细信息覆盖了多种操作系统上为数众多的桌面版和手机版的浏览器。此外，它还提供了根据浏览器的流行程度和市场影响作出决策支持的简单工具。我觉得在启动一个新项目时，借助这个网站分析一下有哪些特性可以放心使用倒也相当不错。有了它的帮助，跟踪零零散散的CSS标准制定进程和浏览器的实现就变得相当轻松了。
第二个工具是可以用来动态测试各个特性的Modernizr ( www.modernizr.com)。它是一个小小的JavaScript库，可以测试各种关键的HTML5和CSS特性是否到位，以便根据用户所用浏览器对这些特性的支持情况作出相应调整。这个工具还有一些不错的其他功能，例如在IE的较早版本中呈现新的HTML5语义元素。

5、有用的工具

5.1 浏览器样式报告

所有主流浏览器的开发人员工具都具有样式检查功能。其实现大同小异，基本路数都是在文档呈现结果或源代码中选择一个元素，然后查看浏览器应用在上面的样式。

这些样式检查工具能够显示样式层叠的次序和计算样式( computed style，指计人所有层叠和继承而来的样式后最终应用到元素上的样式)。用户甚至能用它们修改样式或加入新样式并查看其效果。

5.2 用SelectorGadget生成选择器

这是一个JavaScript书签小程序( bookmarklet )，可从www.selectorgadget.com获得。

5.3 用LESS改进CSS

接触过CSS的用户很快就会发现用它来描述样式比较啰嗦。大量重复性内容的存在导致样式的长期维护工作既费时间又容易出错。
有一个名为LESS的工具可以用来扩展CSS，它使用JavaScript对CSS予以改进。这个工具有一些不错的特性，包括变量、样式间的继承以及函数等。我最近经常使用LESS，其效果令人满意。读者可从以下网站详细了解并下载该JavaScript库: http://lesscss.org。

5.4 使用CSS框架

有很多高质量的CSS框架可作为开发者网站和Web应用系统的基石。它们内置多套样式，因此用户不必再干重复发明轮子的事。优秀的框架还可以化浏览器实现的差异于无形。

推荐的CSS框架是Blueprint，它可以从这个网址下载: www.blueprint.org。这个框架用起来既方便又灵活，还有一套用于建立网格布局的出色功能。