定义未来Web样式 CSS 3最新特性一览

　　HTML 5和CSS 3是目前Web领域被讨论的热门话题，HTML 5被看做是未来的Web开发标准，而CSS 3的新特性也让人们备受期待。注：文中所提到的一些新功能还未正式发布到CSS 3规范中。

　　最基础的东西

　　刚入门的网页设计人员最常犯的错误是创建一个无法修改的样式表，容纳了过多的class(类)和id，维护难度非常大。假设你想改变你发布的文章的标题颜色，而其它文章的标题颜色保持默认的颜色，不用给每个标题都增加一个big-red类，明智的方法是使用div类打包你发布的文章(可能是post)，然后为你想要修改的标题创建一个选择器，如：

　　.post h2 { font-weight: bold; color: red; }

　　这就是CSS的巨大魅力所在，也是CSS中最基础的内容。

　　字体属性

　　除了单独指定每个属性外，你可以使用字体简写属性一次性指定所有属性，属性的顺序如下：font-style，font-variant，font-weight，font-size，line-height，font-family。使用字体简写属性时，任何未被指定的值将被其父值取代，例如，如果你只定义了12px Helvetica, Arial, sans-serif，那么font-style，font-variant和font-weight将被设为nomal。字体属性也可以用于指定系统字体：caption，icon，menu，message-box，small-caption，status-bar。这些值与系统使用的字体有关，因此会根据用户的喜好有所不同。

　　其它字体属性

　　有一些与字体相关的属性和值不常用，例如，一般不会使用text-transform将文本全部转换为大写，更多的是使用font-variant: small-caps实现更优雅的效果。在设置字体的权重时，你可能不会使用常见的regular和bold属性，CSS允许你使用100到900(如100，200，500等)的值指定字体的权重，你要知道的是400表示nomal权重，700表示bold，如果没有给出字体的权重，它将继承其父容器的字体权重。另一个非常有用的属性是font-size-adjust，但可悲的是目前仅Firefox 支持它，它允许你指定字体的长宽比。

　　处理空格，换行和文字环绕

　　有多个CSS属性可以帮助处理这些问题，但规范仍然在制定中(处于工作草案阶段)。

　　空格

　　white-space属性允许你指定一组简写属性：white-space-collapsing和text-wrap。下面是每个属性所代表的分类：

　　◆normal

　　white-space-collapsing: collapse/text-wrap: normal

　　◆nowrap

　　white-space-collapsing: collapse/text-wrap: none

　　◆pre-wrap

　　white-space-collapsing: preserve/text-wrap: normal

　　◆pre-line

　　white-space-collapsing: preserve-breaks/text-wrap: normal

　　这个属性非常有用，例如，在网页上显示代码片段时，可以保留换行和空格，设置容器white-space: pre将保留格式。ordPress在它的仪表板上使用了white-space: nowrap，因此，如果表格太小，单元格中的数字是不会换行的。

　　图1 WordPress仪表板使用white-space: nowrap的效果

　　换行

　　另一个被广泛使用的属性是word-wrap，它有两个有效的属性值：normal和break-word。如果你将word-wrap设为break-word，如果字符串太长，它将会溢出容器。理论上，word-wrap: break-word应该在text-wrap设为nomal或suppress(抑制换行)时才有效，但实际上，即使text-wrap被设为其它值它也一样可以工作。请注意，word-break属性的break-strict值因为有风险，已经被移除CSS规范了。

图2 国际大猩猩保护计划网站为评论家的名字使用了word-wrap

　　单词间距和字母间距

　　word-spacing和letter-spacing分别用于控制单词间间距和字母间间距，它们都有三个代表最佳、最小和最大间距的属性值。对于word-spacing，如果只设置一个值，它表示最佳间距(其它两个默认被设为normal)，如果设两个值，第一个代表最佳间距和最小间距，第二个代表最大间距，如果设三个值，那分别代表最佳间距，最小间距和最大间距，如果没有特殊原因，使用最佳间距。letter-spacing稍有不同，如果只设置一个值，那它表示三个属性值都一样，其它设置方式就和word-spacing一样了。

　　图3 Show &Tell网站在其导航栏上使用letter-spacing的效果

　　缩进和悬挂

　　文本缩进和悬挂是两个经常被忘掉的网页排版功能，这可能是因为：

　　1、设置复杂

　　2、有意不使用

　　3、设计人员不知道如何使用

图4 Sushi &Robots网站在它的项目符合列表中使用了悬挂

　　理论上每一段的开头都应该使用缩进，因此可以使用：

　　p +p { text-indent: 1em; }

　　这个选择器的目标是每一个段落(如p)后的段落，因此对第一个段落无效。另一个受欢迎的排版规则是项目符号和引用内容应该悬挂，这样能保证正文视觉不受这些内容的影响。CSS3规范定义了一个hanging-punctuation属性，但目前还未完工。现在可以使用text-indent属性，通过负数属性值达到同样的效果：

　　blockquote { text-indent: -0.2em; }

　　对于项目符号列表，确保项目符号的位置设为outside，容器div不要设为overflow: hidden，否则，项目符合将不可见。

　　网页字体和字体装饰

　　font-face

　　关于font-face在网络上的讨论已经够多了，争论的焦点是这个属性是否会给设计带来视觉上的混乱，有些人认为应该按自己意愿选择任意字体，但另外的人则认为应该使用网页安全字体。

图5 Jonathan Snook最近使用font-face属性重新设计的网站

　　无论你持何种观点，有一点你必须得承认，使用font-face的网站看起来就是要美观些。font-face属性的使用是相当简单的，首先上传你想使用的字体到你的网站，并给它取一个好的名字。font-face的基本格式如下：

　　@font-face { font-family: Museo Sans; src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”); }

　　font-face必须要的两个描述符是font-family和src，如果你想给h2标题使用特殊字体，那么可以：

　　h2 { font-family: Museo Sans, sans-serif; }

　　对于第二个属性src，我们可以利用它做两件事情：

　　1、如果字体已经安装到用户系统上，CSS将会直接使用本地字体，我们可以利用这种机制跳过下载字体的步骤，这样可以节省带宽。

　　2、如果用户系统上没有安装需要的字体，CSS首先要下载URI链接的字体文件，另外我们也指定了字体格式，但这一步也是可以忽略的。这个属性在IE中工作时，需要使用EOT版本的字体，有些字体厂商提供了EOT版本的字体，但大多数时候我们需要使用微软的WEFT或ttf2eot工具转换TrueType字体。

　　text-shadow

　　text-shadow属性允许你给文本添加一个阴影，这个阴影同时应用给文本和文本装饰，如果文本应用了text-outline属性，阴影将从文本轮廓创建。使用这个属性你可以设置阴影的水平和垂直偏移(相对于文本)，阴影颜色和模糊半径，下面是一个完整的text-shadow示例：

图6 Neutron使用text-shadow创建的网站

　　p { text-shadow: #0000001px 1px 1px; }

　　颜色和模糊半径(最后的值)是可选的，你也可以给阴影使用RGB颜色值，使其透明，如：

　　p { text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px; }

　　这里我们定义了颜色的RGB值和一个alpha透明值(a，值为0.5)。对于text-shadow，规范仍然有一些悬而未决的问题，如元素的阴影与相邻元素重叠在一起时，浏览器该如何处理。

　　新的Text-Decoration属性

　　text-underline属性的一个问题是给我们的控制很少，但最新的草案提议的新属性和改进的属性可能会给我们更精细的控制，目前还不能使用它们，因此这里只简要介绍一下。

　　◆text-decoration-line

　　取值和text-decoration: none，underline，overline，line-through一样。

　　◆text-decoration-color

　　指定前一属性的线条颜色。

　　◆text-decoration-style

　　有效的取值范围是solid，double，dotted，dashed和wave。

　　◆text-decoration

　　前面三个属性的简写，如果你指定了none，underline，overline或line-through中的任一个值，这个属性将会向后与CSS1和CSS2兼容，但如果你指定了三个值，如text-decoration: red dashed underline，在不支持的浏览器中就会忽略它们。

　　◆text-decoration-skip

　　指定文本装饰是否应该忽略某种类型的元素，提议的有效属性值包括：none，images，spaces，ink和all。

　　◆text-underline-position

　　使用这个属性你可以控制下划线是否穿过文本的下行字符，有效的属性值包括：auto，before-edge，alphabetic 和after-edge。

　　控制溢出

　　通过text-overflow属性控制当文本溢出其容器时显示什么，例如，如果你想让新闻列表中的所有项目占据的高度都一样，这时你可以使用CSS增加省略号表示由更多的文本内容未显示，在iPhone中我们经常看到这样的应用。这个属性在最新的Safari、Opera、IE 6(溢出元素应该设置一个宽度，如100%)和 IE 7中有效，在Opera中还必须加上厂家特殊的属性。

图7 纽约时报iPhone应用程序客户端使用省略号表示溢出的文本

　　li { white-space: nowrap; width: 100%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } 在编辑的规范草案中，你可以看到其它与text-overflow相关的属性也被考虑进去了，如text-overflow-mode和text-overflow-ellipsis。

　　对齐和断字

　　控制断字是件麻烦事，在设置为自动断字时有许多因素要考虑，不同语言有不同的规则，就拿葡萄牙文为例，你可以在最后一个音节处断字，对于双辅音，连字符必须在中右侧。规范仍在开发中，但已经提议的属性有：

　　◆hyphenate-dictionary

　　◆hyphenate-before和hyphenate-after

　　◆hyphenate-lines

　　◆hyphenate-character

图8 在w3c网站上为连字符提议的规范

　　另一个在大多数浏览器中还未实现的CSS3属性是text-align-last(目前只有IE支持一部分)，如果你的文本设为justify，你可以定义一个段落的最后一行或一行的右边在强制断字前如何调整，这个属性的有效属性值包括：start，end，left，right，center和justify。

　　Unicode范围和语言

　　Unicode范围

　　unicode-range属性让你定义给定字体支持的Unicode字符范围，在限制支持各种语言或数学符号时非常有用，可以减少网络带宽的使用。假设你想在你的网页中包括日语字符，使用font-face规则，需为相同的font-family声明多次，每个声明提供一个不同的字体文件供浏览器下载，同时每次都要声明不同的Unicode范围(即使范围重叠也得声明)，浏览器应该只下载渲染网页需要的范围。要研究unicode-range是如何工作的，这里有一个例子。

　　语言

　　使用:lang伪类创建语言敏感的排版，这样你可以为法语(fr)设置一个背景色，为德语(de)设置另一个背景色：

　　div:lang(fr) { background-color: blue; } div:lang(de) { background-color: yellow; }

　　你可能会问，为什么我们不使用一个简单的选择器来实现呢，如：

　　div[lang|=fr] {background-color:blue}

　　这样我们的目标就是所有lang属性等于fr或以fr开头的div元素，如果我们有一个元素位于这个div中，它们不应该继承这个选择器的属性，因为它们根本就没有设置lang属性，通过使用:lang伪类，lang属性就让所有子元素继承父元素的属性。好消息是几乎所有最新的浏览器都支持这个伪类了。

　　总结

　　在本文所列举的例子中，你可能会问为什么大部分都讲得很模糊，是的，因为规范还未获得正式通过，随时间的推移完全有可能会发生改变，但现在正是试验的时候，如果你也参与进来，将有助于最终规范的定格。大胆尝试这些新特性，看看应该如何改进才能让你的工作变得更轻松。向规范增加一个属性有实际的例子非常重要，此外，浏览器厂商也需要跟进。