间距和样式

我们在很多例子中都能看到背景对文字的影响。因此,页面中的间距也能成为一种有效的视觉工具。CSS中自然也提供了各类控制间距的属性。

line-height

数世纪前,印刷师使用可延展的铅条控制两行文字间的距离,这也是行距(leading)这个专有名词的起源。CSS提供了简单易用的行距控制属性line-height。该属性可被设置为绝对数值、相对大小、长度或者百分比,当然也可以设定为inherit。

line-height不需要单位。1.2和1.2m或者120%是同义的—也就是说未加单位的值表示基于当前文字大小的相对值。

line-height使用示例:

  1. #quickSummary p{
    line-height: 0.8;
    }

letter-spacing

字符间距可使用letter-spacing来控制。我们可以将其设定为normal或者一个长度值,该长度值将作为默认值的补充,添加到正常的字符间距上。

由于屏幕分辨率较低,所以我们不应该为大段文字设置字符间距,否则文字将显示很长。因此最好只在标题和小段文字中使用letter-spacing。

letter-spacing使用示例:

  1. #quickSummary p{
    letter-spacing: 0.1em;
    }

word-spacing

和letter-spacing 类似,word-spacing 用于调整单词的间距。该属性可被设置normal、长度值、百分比或者inherit。

需要注意的是诸如文字对齐(使用text-align)和white-space等设定均会影响到浏览器对word-spacing的处理。

word-spacing的使用示例:

  1. #quickSummary p{
    word-spacing: 1em;
    }

text-align

text-align用于对齐文字。可选值为left、right、center和justify。

传统的对齐技术一般使用添加边字符等方式避免拆行所造成的空隙,而浏览器中的调整则相当的不精确,其结果总是会使得字与字之间存在很大的空隙。考虑 到浏览器的不精确控制,我们更建议使用传统的right-align和left-align方式, 而居中对齐则只适合标题、引用等小块文字,不要将其应用到长段文字中。

text-align使用示例:

  1. #quickSummary p{
    text-align: right;
    }

技术 2008-07-27 15:38:38 通过 网页 浏览(561) 打印

共有0条评论!

发表评论