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


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


最基础的东西


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


  1. .post h2 {  
  2.     font-weight: bold;  
  3.     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,因此,如果表格太小,单元格中的数字是不会换行的。 


WordPress仪表板使用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规范了。 


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

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


单词间距和字母间距


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


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

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


缩进和悬挂


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


1、设置复杂

2、有意不使用

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


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

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


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


  1. p + p {  
  2.     text-indent: 1em;  

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


  1. blockquote {  
  2.     text-indent: -0.2em;  

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


标签:

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2