您的位置:知识库 » Web前端

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

来源: 51CTO  发布时间: 2010-03-26 12:21  阅读: 1726 次  推荐: 1   原文链接   [收藏]  
[1] CSS排版基础知识
[2] 网页字体和字体装饰
[3] CSS如何控制溢出

 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,否则,项目符合将不可见。

1
0
标签:CSS3

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻