课工场中关村：css3新特性

《课工场中关村：css3新特性》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、http://web.mybdqn.com/课工场中关村：CSS3新特性简介　　CSS即层叠样式表（CascadingStylesheet）。Web开发中采用CSS技术，可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改，就可以改变网页的外观和格式。CSS3是CSS的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Oper

2、a等等。在Web开发中采用CSS3技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。本文将重点介绍一些比较绚丽且实用CSS3新特性。　　CSS3选择器（Selector）　　写过CSS的人应该对CSS选择器不陌生，我们所定义的CSS属性之所以能应用到相应的节点上，就是因为CSS选择器模式。参考下述代码：　　清单1.CSS选择器案例Body>.mainTabContainerdiv>span[5]{Border:1pxsolodred;Background-color:white;Curso

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

4、了更多更加方便快捷的选择器：　　清单2.CSS3选择器案例　　Body>.mainTabContainertbody:nth-child(even){Background-color:white;}Body>.mainTabContainertr:nth-child(odd){Background-color:black;}:not(.textinput){Font-size:12px;}http://web.mybdqn.com/Div:first-child{Border-color:red;}　　如上所示，我们

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

6、v节点下面的第一个直接子节点。　　除此之外，还有很多新添加的选择器：E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-childE:first-of-typeE:only-childE:only-of-typeE:emptyE:checkedE:enabledE:disabledE::selectionE:not(s)　　这里不一一介绍。学会利用这些新特性可以极大程度的减少我们的无畏代码，并且大幅度的提高程序的性能。　　@Font-face特

7、性　　Font-face可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。　　先来看一个客户端字体简单的案例：　　清单3.Font-face客户端字体案例　　

arialcourierverdana

arialcourierverdana

8、>