课工场中关村：SS3新特性.docVIP

课工场中关村：CSS3新特性 简介 　　CSS 即层叠样式表（Cascading Stylesheet）。Web 开发中采用 CSS 技术，可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改，就可以改变网页的外观和格式。CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。本文将重点介绍一些比较绚丽且实用 CSS3 新特性。 　　CSS3 选择器（Selector） 　　写过 CSS 的人应该对 CSS 选择器不陌生，我们所定义的 CSS 属性之所以能应用到相应的节点上，就是因为 CSS 选择器模式。参考下述代码： 　　清单 1. CSS 选择器案例 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 选择器案例　　 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 节点下面的第一个直接子节点。 　　除此之外，还有很多新添加的选择器： E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-type E:empty E:checked E:enabled E:disabled E::selection E:not(s) 　　这里不一一介绍。学会利用这些新特性可以极大程度的减少我们的无畏代码，并且大幅度的提高程序的性能。 　　@Font-face 特性 　　Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。 　　先来看一个客户端字体简单的案例： 　　清单 3. Font-face 客户端字体案例　　 pfont face=arialarial courier verdana/font/p 　　我们可以通过这种方式直接加载字体样式，因为这些字体（arial）已经安装在客户端了。清单 3 这种写法的作用等同于清单 4： 　　清单 4. 字体基本写法　　 pfont arial courier verdana/font/p 　　相信这种写法大家应该再熟悉不过了。 　　接下来