你必须知道的CSS3新特性(一)

之前有微信的网友反馈需要了解一下css3的相关知识，今天我们就来普及一下CSS3的新特性，篇幅会有点长，我们分几篇并结合实例来讲

CSS的基本概念：

CSS 即层叠样式表（Cascading Stylesheet），CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，目前全面支持css3主流浏览器如下：IE9+,firefox,chrome,opera,safair

NO.1 css选择器

写过 CSS 的人应该对 CSS 选择器不陌生，我们所定义的 CSS 属性之所以能应用到相应的节点上，就是因为 CSS 选择器模式。参考下述代码：


 Body &gt; .mainTabContainer  tbody:nth-child(even){ 
    Background-color: white; 
 } 
 Body &gt; .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)

这里不一一介绍。学会利用这些新特性可以极大程度的减少我们的无畏代码，并且大幅度的提高程序的性能。

更多选择器表达式可以猛击以下链接：

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/

NO.2 @Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

先来看一个客户端字体简单的案例：

1) Font-face 客户端字体案例


 &lt;p&gt;&lt;font face="arial"&gt;arial courier verdana&lt;/font&gt;&lt;/p&gt;

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

2) 字体基本写法


 &lt;p&gt;&lt;font style="font-family: arial"&gt;arial courier verdana&lt;/font&gt;&lt;/p&gt;

相信这种写法大家应该再熟悉不过了。

接下来我们看看如何使用服务端字体，即：未在客户端安装的字体样式。

参看如下代码：

3) Font-face 服务端字体案例


 @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" }

3)中声明的两个服务端字体，其字体源指向“BORDERW0.eot”和“RUNICMT0.eot”文件，并分别冠以“BorderWeb”和“Runic”的字体名称。声明之后，我们就可以在页面中使用了：“ FONT-FAMILY: "BorderWeb" ” 和 “ FONT-FAMILY: "Runic" ”。

这种做法使得我们在开发中如果需要使用一些特殊字体，而又不确定客户端是否已安装时，便可以使用这种方式。

NO.3 Word-wrap & Text-overflow 样式

Word-wrap

先来看看 word-wrap 属性，参考下述代码：


 &lt;div style="width:300px; border:1px solid #999999; overflow: hidden"&gt; 
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
&lt;/div&gt; 
&lt;div style="width:300px; border:1px solid #999999; word-wrap:break-word;"&gt; 
 wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
 &lt;/div&gt;

比较上述两段代码，加入了“word-wrap: break-word”，设置或检索当当前行超过指定容器的边界时是否断开转行，文字此时已被打散。所以可见如下的差别：

图 1. 没有 break-word

图 2. 有 break-word

Text-overflow

知道了 word-wrap 的原理，我们再来看看 text-overflow，其实它与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示，见如下示例：

Text-overflow 案例


 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
   width:200px;background:#ccc;} 
 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
   width:200px; background:#ccc;} 
 &lt;div class="clip"&gt; 
  不显示省略标记，而是简单的裁切条
 &lt;/div&gt; 
 &lt;div class="ellipsis"&gt; 
  当对象内文本溢出时显示省略标记
 &lt;/div&gt;

这里我们均使用“overflow: hidden”，对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。见图 3 的效果图。

图 3. Text-overflow 效果图

这里我们可以看到，ellipsis 的显示方式比较人性化，clip 方式比较传统，我们可以依据需求进行选择。

文字渲染（Text-decoration）

CSS3 里面开始支持对文字的更深层次的渲染，我们来看看下面的例子：

Text-decoration 案例

div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 2.75px; }

这里我们主要以 webkit 内核浏览器为例，效果如图 4：

图 4. Text-decoration 效果图

Text-fill-color: 文字内部填充颜色

Text-stroke-color: 文字边界填充颜色

Text-stroke-width: 文字边界宽度