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

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

CSS的基本概念:

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

NO.1 css选择器

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


 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)

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

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

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

NO.2 @Font-face 特性

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

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

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

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

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

2) 字体基本写法

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

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

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

参看如下代码:

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 属性,参考下述代码:


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

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

图 1. 没有 break-word

图 1. 没有 break-word

图 2. 有 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;} 
 <div class="clip"> 
  不显示省略标记,而是简单的裁切条
 </div> 
 <div class="ellipsis"> 
  当对象内文本溢出时显示省略标记
 </div>

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

图 3. Text-overflow 效果图

图 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 效果图

图 4. Text-decoration 效果图

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

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

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

相关文章

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
发表新评论