间距和样式

林继 VPS 知识 3,358 共写了958个字 (2008-07-27 15:38:38) 没有评论 打印 扫描二维码 百度未收录

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

line-height

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

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

line-height使用示例:

  1. #quickSummary p{<br/><br/>line-height: 0.8;<br/><br/>}

letter-spacing

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

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

letter-spacing使用示例:

  1. #quickSummary p{<br/><br/>letter-spacing: 0.1em;<br/><br/>}

word-spacing

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

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

word-spacing的使用示例:

  1. #quickSummary p{<br/><br/>word-spacing: 1em;<br/><br/>}

text-align

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

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

text-align使用示例:

  1. #quickSummary p{<br/><br/>text-align: right;<br/><br/>}

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >