css3新特性总结(可读性方面)

1.CSS3多列:column
column主要有三个属性。
column-count:定义列数。
column-gap:定义每一列之间的间隔。
column-rlue:定义每列之间的边线规则,分为style,color,width这3个分支属性,可像border一样简写。

如代码:

#test{
    width:600px;
    background:#eee;
    -webkit-column-count:3;
    -webkit-column-gap:20px;
    -webkit-column-rule:2px #00f outset;
}

效果为:

 

2.文本换行,断开,省略

在word-wrap之前,遇到英文长单词事,我们经常使用word-break:break-all来控制文本换行。然而现在,可以使用word-wrap:break-word来控制。一般用于长单词或者url的换行。

如代码:

#test{
    width:200px;
    background:#ccc;
    word-wrap:break-word;
}

效果为:

使溢出的文本省略可用text-overflow,text-overflow:ellipsis要和overflow:hidden结合使用,可使溢出的文本用省略号代替。

如代码:

#test{
    width:200px;
    background:#ccc;
    text-overflow:ellipsis;
    overflow:hidden;
}

效果为:

 

4.媒体查询:@media

媒体查询文档:http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2

 

5.网络字体:@font-face

有了@font-face,我们就可以在自己的网页上使用自己喜欢的字体,不必通过图片来完成了。我们可以在自己的服务器上托管自己的字体,然后通过相对路径来访问字体。@font-face有两个主要属性:
font-family:定义字体的名称。
src:字体文件的位置。

如代码(test.ttf是行楷):

@font-face{
    font-family: web;
    src:url(test.ttf);
}
#test{
    font-family:web;
}

效果为:

需要说的是,任何版本的IE浏览器都不支持ttf字体,只支持eot字体。我们可以用CSS hack来解决这个问题。

posted @ 2014-04-07 00:36  还好我是程序员  阅读(120)  评论(0编辑  收藏