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

　HTML 5和CSS 3是目前Web领域被讨论的热门话题，HTML 5被看做是未来的Web开发标准，而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，因此，如果表格太小，单元格中的数字是不会换行的。

　　换行

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

　　单词间距和字母间距

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

　　缩进和悬挂

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

　　1、设置复杂
　　2、有意不使用
　　3、设计人员不知道如何使用

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

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

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

 blockquote {  
     text-indent: -0.2em;  
} 

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