深入了解 CSS3 新特性（1）

look_w

简介CSS 即层叠样式表（Cascading Stylesheet）。Web 开发中采用 CSS 技术，可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改，就可以改变网页的外观和格式。CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。本文将重点介绍一些比较绚丽且实用 CSS3 新特性。
CSS3 选择器（Selector）写过 CSS 的人应该对 CSS 选择器不陌生，我们所定义的 CSS 属性之所以能应用到相应的节点上，就是因为 CSS 选择器模式。参考下述代码：
清单 1. CSS 选择器案例

1 2 3 4 5

Body > .mainTabContainer  div  > span[5]{ Border: 1px solod red; Background-color: white; Cursor: pointer; }

此处的 CSS 选择器即：“body > .mainTabContainer  div  span[5]” 代表这这样一条路径：
1. “body”标签直接子元素里 class 属性值为“mainTabContainer”的所有元素 A
2. A 的后代元素（descendant）里标签为 div 的所有元素 B
3. B 的直接子元素中的第 5 个标签为 span 的元素 C
这个 C 元素（可能为多个）即为选择器定位到的元素，如上的 CSS 属性也会全部应用到 C 元素上。
以上为 CSS2 及之前版本所提供的主要定位方式。现在，CSS3 提供了更多更加方便快捷的选择器：
清单 2. CSS3 选择器案例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Body > .mainTabContainer  tbody:nth-child(even){ Background-color: white; } Body > .mainTabContainer  tr:nth-child(odd){ Background-color: black; } :not(.textinput){ Font-size: 12px;      }      Div:first-child{      Border-color: red;      }

如上所示，我们列举了一些 CSS3 的选择器，在我们日常的开发中可能会经常用到，这些新的 CSS3 特性解决了很多我们之前需要用 JavaScript 脚本才能解决的问题。
tbody: nth-child(even), nth-child(odd)：此处他们分别代表了表格（tbody）下面的偶数行和奇数行（tr），这种样式非常适用于表格，让人能非常清楚的看到表格的行与行之间的差别，让用户易于浏览。
: not(.textinput)：这里即表示所有 class 不是“textinput”的节点。
div:first-child：这里表示所有 div 节点下面的第一个直接子节点。
除此之外，还有很多新添加的选择器：

1 2 3 4 5 6 7 8 9 10 11 12 13

E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type Enly-child Enly-of-type E:empty E:checked E:enabled E:disabled E::selection E:not(s)

这里不一一介绍。学会利用这些新特性可以极大程度的减少我们的无畏代码，并且大幅度的提高程序的性能。
@Font-face 特性Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
先来看一个客户端字体简单的案例：
清单 3. Font-face 客户端字体案例

1	<p><font face="arial">arial courier verdana</font></p>

我们可以通过这种方式直接加载字体样式，因为这些字体（arial）已经安装在客户端了。清单 3 这种写法的作用等同于清单 4：
清单 4. 字体基本写法

1	<p><font style="font-family: arial">arial courier verdana</font></p>

相信这种写法大家应该再熟悉不过了。
接下来我们看看如何使用服务端字体，即：未在客户端安装的字体样式。
参看如下代码：
清单 5. Font-face 服务端字体案例

1 2 3 4 5 6 7 8 9 10 11

@font-face { font-family: BorderWeb; src:url(BORDERW0.eot); } @font-face { font-family: Runic; src:url(RUNICMT0.eot); } .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

清单 5 中声明的两个服务端字体，其字体源指向“BORDERW0.eot”和“RUNICMT0.eot”文件，并分别冠以“BorderWeb”和“Runic”的字体名称。声明之后，我们就可以在页面中使用了：“ FONT-FAMILY: "BorderWeb" ” 和 “ FONT-FAMILY: "Runic" ”。
这种做法使得我们在开发中如果需要使用一些特殊字体，而又不确定客户端是否已安装时，便可以使用这种方式。