最近评论
正在载入评论列表...
我觉得回过头来专门用一章篇幅来谈论一些基本的东西是一件好事，比如用CSS来设定文本的样式。控制文本的外观可能是CSS最能发挥能力的地方——即使站点并非完全基于Web标准构建。将重复的<font>标签从页面代码中清除对设计师而言很有吸引力，并且不难发现，用CSS来控制文本样式还有个主要的优势——更进一步地将外观和内容分离。
从本书的众多例子中，我们知道了CSS可以做很多事情——然而对文本样式的设定可能是给最基本的页面加上设计的最简单的一种方式。通过用CSS来控制文本样式，还可以避免引入不必要的图片。
在本章中，我们将看到一些示例：CSS如何能创造性地将整块看上去平淡乏味的超文本提升一个层次（新的色彩、大小和字体）。
13.1 怎么把超文本变酷
给文本设定样式是CSS所擅长的事情——甚至在那些对CSS还不能完全支持的老浏览器上。以前，为了给某些文本设定超过标准的大小或者字体，设计师和开发者都学会了用图片来代替文本。某些站点在这方面还做得有些过头了，导致站点的亲和力就像噩梦一般，用今天的标准看完全无法容忍。（试过用文本浏览器来访问那些所有文本都以图片替代的网站没有？）
为了告诉你一些创建图片的其他办法，并回答本节标题里的那个问题，我们取一段没有附加任何样式的超文本块，然后逐步给它加上各种CSS，把它变得充满吸引力。
13.1.1 改变Times字体
作为开始，我们先来看看将要处理的这段文本在浏览器中以默认字体显示的效果——就我的情况而言，是16像素大的Times字体。我用的是Mac OS X上的Safari浏览器，因此我们看到文本已经经过了无锯齿（antialiased）处理。当Windows XP中启用了ClearType后也会有相似的效果。
Times字体（或者它的变体Times New Roman）是大多数浏览器的默认字体——然而，这个设定能够很轻易地被用户修改成他们所喜欢的，所以当然不能依赖它。
图13-1展示了本章将一直使用的没设定样式的文本：一个简单的用<h1>标记的标题，后面跟着三段文本，其内容是一些关于家庭装修的建议。
图13-1 标题和文本在浏览器中的默认显示效果
13.1.2 改变行间距
设定文本样式的一个最简单有效的方式就是应用line-height属性。给行之间加上更多的空白可以使段落更加好看和易读。这会给页面带来奇迹般的变化。
只需要给<body>元素加上下面的CSS规则就行了。我们当然也可以把这些规则加在任何元素上——例如，我们只想<p>元素里面的文本增加行间距。
上面的规则实际上表示页面上的所有文本应当有一个等于一个字母的高度的1.5倍的行间距。我喜欢用em作为line-height的单位，因为它们会随着字号变化自动增大或者减小。
我们给示例应用line-height属性后的显示效果见图13-2。
图13-2 默认文本有了更大的行间距
看起来已经好多了。这个小小的line-height真是神奇。
13.1.3 都是一家人
当然，我们也能够改变字体，但要记住我们会受到用户计算机上所安装的字体种类的限制。
现在用font-family属性来给我们的例子指定一组我们喜欢的字体吧。这里的做法是指定一个用逗号分隔的多种字体的列表——按照优先级排序。如果用户的操作系统里没有安装列表中的第一个字体，那么浏览器会自动选择第二个、第三个等候选字体。
在这段代码中我们的意思是，“用Georgia字体来渲染所有的文本。如果用户的操作系统里没有安装Georgia字体，则使用Times，如果这个也没有，那就使用默认的serif字体。”
加上了font-family属性后的显示效果见图13-3。
名字里带有空格的字体
对于那些名字里带有空格的字体（比如Lucida Grande），我们需要用引号将它围起来。
图13-3 我们的示例文本现在以Georgia字体显示了
在下面的例子中，我们将把Lucida Grande（一种在Mac上很流行的字体）设置为第一候选字体，Trebuchet MS（一种流行的Windows字体）作为第二候选。最后，我们还会设一个缺省字体sans-serif，以应对前两种字体都没有的情况。
13.1.4 字符间距调整
字符间距调整在排版和印刷界被称为Kerning。和它等价的CSS属性是letter-spacing。接下来，我们在示例的<h1>元素上使用letter-spacing属性，给它增添一些味道。
通过给<h1>元素应用letter-spacing属性，我们可以开始实现一些时髦的效果——而并不需要启动图像编辑器来做一张文本的图片版。
首先，我们用一个负的letter-spacing来让标题中的字母挨得更紧些：
示例现在的效果如图13-4所示。
作为替代，我们来试试添加正的letter-spacing值，并且用font-style属性让标题以斜体显示。
图13-4 负的letter-spacing值被应用于<h1>
结果见图13-5。完全用纯文本实现这样的的效果相当不错吧？明智的做法是不要设置太大或者太小的letter-spacing值，否则都会使文本难以阅读。这样也就没人去注意它是否好看了，对吧？
图13-5 正的letter-spacing值以及斜体效果
13.1.5 段首字母下沉
在印刷品中很常见的段首字母下沉让段落样式更加突出和优雅——不错，它的实现也可以不用借助图片，只使用CSS就行。
首先，我们需要在页面代码中加上一个“样式钩子”，以便能单独关联上第1段的首字母。我们把字母“I”用<span>标签包起来，并给它设一个叫drop的类，这样我们可以在整页或者整站内重复使用。
在某些现代的、完全支持CSS2规范的浏览器中，也可以使用:first-letter伪类来控制段落首字母——不需要再添加多余的<span>。虽然这样具有绝佳的语义优势，但是许多浏览器根本不支持。
现在我们可以完全控制第一段的首字母“I”了。我们来加上一些CSS声明，增大它的字号并将它向左浮动（这样其他文本会环绕在旁边）。我们还会添加一个装饰性的背景以及边框：
给示例加上所有这些样式之后的效果见图13-6——全都没有用到图片，只有简单的CSS和HTML代码。
图13-6 CSS创建的段首字母下沉效果
13.1.6 文本对齐
再次从印刷界寻找灵感，我们还可以用text-align属性来调整文本的对齐。对齐后的文本会自动调整词间距，这样每一行都会是等长的，可以自然地形成一个整齐的栏。
给所有的文本启用对齐调整的CSS规则就这么简单：
对齐后的文本示例如图13-7所示。
图13-7 使用text-align属性对齐的文本
注意到，文本行左右两端都在竖直方向排列整齐了。text-align属性的其他可选值还有left、right和center。
例如，我们也可以给<h1>元素设定text-align属性，使标题文本居中，所需规则如下：
结果见图13-8。
图13-8 text-align属性使标题文本居中
13.1.7 字形变换
text-transform属性可以改变文本的大小写——而不管HTML代码中是怎么写的。例如，在我们的示例中，标题的代码是下面这行：
使用CSS中的text-transform属性，我们可以将整个标题大写化（如有要求当然也可以小写）——而不需要修改页面代码。在我们先前给<h1>元素加的样式的基础上，将标题大写化的CSS如下：
结果见图13-9。无需改动一行HTML，我们就可以随意修改整页甚至全站任何一处文本的大小写，仅仅需要修改一点CSS。
图13-9 用CSS将标题文本大写化
13.1.8 小型大写字母
大多数浏览器都能识别font-variant属性，这允许我们显示小型大写字母（small cap）（当文本被大写化以后）。
下面将font-variant属性应用到示例中的标题上：
结果见图13-10——这又是纯粹用HTML和CSS来模拟印刷版式的一种方式。
图13-10 带有小型大写字母的标题
13.1.9 段落缩进
再一次看看印刷界的情况（嗯，你看出我们的趋势了吧？），我们可以用text-indent属性来将段落首行缩进。加上一个正值就可以缩进相应的量。
因此，我们让每一段的首行都缩进3em——大约是三个字母的最大宽度。我会取消段首字母的大写（下沉），以免和这一段的首行缩进互相干扰。
缩进全部<p>元素的CSS规则可以是这样：
结果见图13-11。可以看到，只有每一段的第一行被缩进了我们所指定的量。我选择使用em作为单位，这样缩进量会和字号保持固定比例关系——当用户想手动调大（小）字号时，这尤其有效。
图13-11 text-indent属性使段落缩进
图书导读
