4.2 文本属性

上一节我们讲了字体属性，这一节讲文本属性。如果你想缩进段落，实现106中的上角标效果，在标题字符间增加一些间距，以及其他一些排版效果，就要用到CSS的文本属性。

以下是几个最有用的CSS文本属性：

  • text-indent
  • letter-spacing
  • word-spacing
  • text-decoration
  • text-align
  • line-height
  • text-transform
  • vertical-align

4.2.1 文本缩进

值：长度值（正、负均可）。

示例：p {text-indent:3em;}。

text-indent属性设定行内盒子相对于包含元素的起点。默认情况下，这个起点就是包含元素的左上角。

给text-indent设定正值，文本向右移，得到的是段落首行缩进效果，如图4-5（中的第一个段落）所示。

enter image description here图4-5 这4个段落演示了text-indent属性

继承的值与计算的值

这里有一个非常重要的问题，必须请读者注意：text-indent是可以被子元素继承的。如果你在一个div上设定了text-indent属性，那么div中的所有段落都会继承该缩进值。然而，与所有继承的CSS值一样，这个缩进值并不是祖先元素中设定的值，而是计算的值。下面举一个例子说明。

假设有一个400像素宽的div，包含的文本缩进5%，则缩进的距离是20像素（400的5%）。在这个div中有一个200像素宽的段落。作为子元素，它继承父元素的text-indent值，所以它包含的文本也缩进。但继承的缩进值是多少呢？不是5%，而是20像素。也就是说，子元素继承的是根据父元素宽度计算得到的缩进值。结果，虽然段落只有父元素一半宽，但其中的文本也会缩进20像素。这样可以确保无论段落多宽，它们的缩进距离都一样。当然，在子元素上重新设定text-indent属性，可以覆盖继承的值。

要是给text-indent设定一个负值，那段落的首行会从包含元素的左侧探出头来。如果你想要这种效果，那么一定得给它留出空间。没有空间，而且在左侧还有其他元素的情况下，探出头来的文本就会挡住那个元素。如果左侧是浏览器窗口，那它就会被切掉（如图4-5中第二段所示）。解决这个问题的技巧，就是设定一个比负缩进值更长的负左外边距值。图4-5中第二段的缩进值为-1.5em，而在图中第三段，我们设定了值为2em的左外边距，以下是相应的CSS规则：

  1. p {
  2.     text-indent:-1.5em; 
  3.     margin-left:2em; 
  4.     border:1px solid red;
  5. }

缩进给人一种专业版式的感觉，也能提示读者每段文本在哪儿开头。请注意，在设定缩进和外边距时要像这里一样使用em，以便在用户（或你自己）改变字体大小时，它们的长度能够按比例变化。

文本之“蛇”

在CSS中控制文本要理解一个重要概念。CSS会把元素中的文本放在一个不可见的盒子里，比如对p元素中的一段文本，CSS将其视为很长的一行，只不过在遇到容器边界时会折行。为了看到这个长长的盒子，图4-6为包含元素（段落）添加了粗边框，为文本盒子添加了细边框。所有文本属性都会应用给这个细边框的文本盒子。

enter image description here 图4-6 文本被包含在一个细长的盒子中，这个盒子往往因为折行而断开，分布在多行中

在这个例子中，文本元素大致如下： <p><span>Here is a long paragraph…</span></p>

相应的样式如下： p {border:3px solid red;} span {border:1px solid green;}

这里的文本盒子跨行时是断开的，只有第一行开头和最后一行末尾是封闭的。知道这一点，可以更快地实现你想要的效果。比如，你想缩进段落的第一行，可以使用文本属性text-indent（如图4-5所示），而实际上你缩进的是这个文本盒子的起点位置。后续的行是不会缩进的，因为在CSS看来，它们就是一个整体。

如果你想缩进整个段落，可以使用段落的margin-left属性。换句话说，你得把整个包含盒子向右移动才行。而你永远要记住，文本属性只应用于这个长长的、细细的、内部的文本盒子，而不是包含元素的盒子。

4.2.2 字符间距

值：任何长度值（正、负值均可）。

示例：p {letter-spacing:.2em;}。

letter-spacing为正值时增大字符1间距，为负值时缩小间距2。无论设定字体大小时使用的是什么单位，设定字符间距一定要用相对单位，以便字间距能随字体大小同比例变化。图4-7展示了默认字符间距、增大字符间距和缩小字符间距的例子。用传统排版的术语讲，letter-spacing控制字距（tracking），也就是文本块中所有字符之间的间距。与字距相对的一个排版术语叫字紧排（kerning），紧排只调整两个字符的间距。

1 letter-spacing对英文字母、汉字及其他字符都起作用，为方便读者理解和记忆，特地译为“字符间距”。——译者注 2 letter-spacing的值是在浏览器默认值基础上增加或减少的值。——译者注

enter image description here图4-7 调整字符间距的结果

默认的字符间距在字体变大时会使文本显得松散，因此缩小大标题的字距可以让网页显得更专业。图4-7中缩小字距的例子只在默认间距基础上缩小了.05em（1/20），再多的话可能会导致字符交错。

4.2.3 单词间距

值：任何长度值（正、负值均可）。

示例：p {word-spacing:.2em;}。

单词间距与字符间距非常相似，区别在于它只调整单词间距，而不影响字符间距。CSS把任何两边有空白的字符和字符串都视作“单词”1。另外，单词间距比字符间距更容易设定得过大，从而导致文本难以阅读（参见图4-8）。

1 纯汉字文本一段之中没有空格，因此word-spacing对中文网页几乎没有用，但对中英混排段落可能有用。——译者注

只加宽字符间距而不加宽单词间距，不容易看出有什么差别。此时，再加上一点单词间距效果会很好。

enter image description here图4-8 单词间距分别为默认值、负值和正值时的几个段落和标题

4.2.4 文本装饰

值：underline、overline、line-through、blink、none。

示例：.retailprice {text-decoration:line-through;}。

除了blink之外，text-decoration属性其他值的效果如图4-9所示。blink是为文本添加闪烁效果的，实际上很讨厌，应该少用，最好不用。

enter image description here图4-9 这里展示了text-decoration属性各个值的效果，其中使用最多的是用它控制链接的下划线

必须注意，上网的人都习惯了把带下划线的文本当成链接。如果你给本来不是链接的文本加上下划线，很容易导致困惑和无效点击。

文本装饰最主要的应用是控制链接的下划线。下面这个例子展示了怎么通过text-decoration去掉导航条中链接的下划线。导航条中的文本显然是可以点击的，下划线徒增混乱而已。不过，在鼠标悬停状态下加上下划线，则是一种有效的视觉反馈。

  1. nav a {text-decoration:none;}
  2. a:hover {text-decoration:underline;}

4.2.5 文本对齐

值：left、right、center、justify。

示例：p {text-align:right;}。

text-align属性只有4个值，left、right、center和justify，控制着文本在水平方向对齐的方式。其中，center值也可以用来在较大的元素中居中较小的固定宽度的元素或图片。图4-10展示了text-align属性4个值的实际效果。

enter image description here图4-10 text-align的4个值：左对齐、右对齐、居中对齐和两端对齐

4.2.6 行高

值：任何数字值（不用指定单位）。

示例：p {line-height:1.5;}。

CSS通过line-height属性实现了印刷行业中常说的加铅条（leading）1。铅条在活字排版时代用于在文本行之间增加间距。

1 关于传统印刷行业中“铅条”这个术语的更多有意思的背景介绍，请参考图灵社区文章“你未必知道的CSS故事：揭开leading的面纱”：http://www.ituring.com.cn/article/18076。——译者注

相信不少读者是头一次听说“铅条”。铅活字印刷时代，两行字模之间的空白间距就是通过向其中加入细铅条实现的。

CSS中的行高平均分布在一行文本的上方和下方。举个例子，如果字体大小是12像素，行高是20像素，则浏览器会在文本上方和下方各加4像素的空白，以凑足20像素的行高。1

1 注意，与外边距不同，行高是不叠加的。——译者注

对于类似标题的一行文本来说，line-height增加的空白就像外边距一样，较大的标题（如h1和h2）往往有较大的默认行高。这一点应该记住，因为有时候即使把外边距和内边距全去掉，标题上下仍然会有空白。如果想把这些空白也去掉，那就只能把文本的行高设定为比字体高度（就是字体大小）还要小，比如设定为小于1的值。

enter image description here图4-11 在标准行高的基础上有所变化，是让页面与众不同的一种简单方式

如图4-11所示，修改默认行高最简单的方式就是使用font快捷属性，以复合值的形式把font-size和line-height值写在一块，比如：

  1. div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

就这个例子来说，行高就是字体大小1.2em的1.4倍。注意这里不用给line-height值指定单位，只要一个数值就可以。此时，浏览器会用计算得到的1.2em的像素数乘以1.4，结果就是行高。如果后来你把字体大小增大到1.5em，则行高仍然是1.5em计算值的1.4倍。在设定行高时如果使用了绝对单位（如像素），那将来增大字体有可能导致行与行之间重叠。

4.2.7 文本转换

值：none、uppercase、lowercase、capitalize。

示例：p {text-transform:capitalize;}。

text-transform属性用于转换元素中文本的大小写，它可以设定英文文本首字母大写、全部字母大写和全部字母小写。图4-12展示了text-transform属性几个值的作用。

enter image description here图4-12 使用text-transform可以实现类似英文报纸标题的效果

capitalize值会将每个词的首字母转换为大写，这种效果在很多广告、报道、杂志的标题中很常见。但人为的情况下，像“of”、“as”，还有“Tom and Jerry Go to Vegas.”中的“and”这些词首字母是不大写的，而在CSS中，则一律大写。因此用CSS设定capitalize值，你看到将是“Tom And Jerry Go To Vegas.”。

要想实现小型大写字母的首字母放大效果，可以再加上font-variant:small-caps声明。

4.2.8 垂直对齐

值：任意长度值以及sub、super、top、middle、bottom等。

示例：span {vertical-align:60%;}。

vertical-align以基线为参照上下移动文本，但这个属性只影响行内元素。如果你想在垂直方向上对齐块级元素，必须把其display属性设定为inline。vertical-align属性最常用于公式或化学分子式中的上标和下标，比如x4-y-5或N3O，或者用于文本中脚注的角标，比如把星号变成上角标。我个人不太喜欢浏览器为上标设定的默认样式，我觉得有点大，位置也有点高（下标的位置有点低）。写一点样式就可以得到更好的效果，而且能够跨浏览器保持相同比例。

就以下面的HTML为例：

  1. <h4>Default <code>sub</code> and <code>sup</code> styles</h4>
  2. <p>Enjoy mountain spring H<sub>2</sub>O. It’s 10<sup>5</sup> times better than tap<sup>&dagger;</sup> water!</p>
  3. <p class="customsmall"><sup>&dagger;</sup><em>This means water provided through a municipal distribution system</em></p>
  4. <h4>Custom <code>sub</code> and <code>sup</code> styles</h4>
  5. <p class="custom">Enjoy mountain spring H<sub>2</sub>O. It’s 10<sup>5</sup> times better than tap<sup>&dagger;</sup> water!</p>
  6. <p class="customsmall"><sup>&dagger;</sup><em>This means water provided through a municipal distribution system</em></p>

配上下面的CSS规则：

  1. p.custom sub {font-size:60%; vertical-align:-.4em;}
  2. p.custom sup {font-size:65%; vertical-align:.65em;}
  3. p.customsmall {font-size:.8em; vertical-align:1em;}

就可以得到如图4-13下面所示的效果。

enter image description here图4-13 上标和下标的垂直位置和字体大小都不一样

虽然HTML标签<sup>和<sub>有默认的上标和下标样式，但重新设定一下vertical-align和font-size属性能得到更美观的效果。

目前我们已经介绍完了CSS字体和文本属性，接下来该讲一讲让网页下载字体了。