首页 » 建站技术 » 浏览内容

间距和样式


2008-07-27 15:38:38 3,321 0 发表评论 字体: 作者:C.K.
标签: css语法

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

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

line-height

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

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

line-height使用示例:

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

letter-spacing

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

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

letter-spacing使用示例:

#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的使用示例:

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

text-align

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

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

text-align使用示例:

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

网站统计 Statistics

  • 创建时间: 2005年1月3日 距今5066 天
  • 日志总数: 2461
  • 评论总数: 630
  • 标签总数: 654
  • 链接总数: 273
  • 最后更新: 2018-8-31 17:57:04
  • 您是本站第 14166812 位访客

广告区 Guǎng Gào