《HTML5+CSS3网页设计入门必读》——6.2 粗体、斜体和特殊的文本格式化

本节书摘来自异步社区《html5+css3网页设计入门必读》一书中的第6章，第6.2节,作者： 【美】julie meloni更多章节内容可以访问云栖社区“异步社区”公众号查看。

回到打字机的时代，我们满足于纯文本显示，以及使用临时的下划线来突出重点。今天，粗体（boldface）和斜体（italic）文本在所有纸面交流中都变成了社交礼节所要求的。自然，也可以向web内容中添加粗体和斜体文本。多个标签和样式规则使文本格式化成为可能。

给文本添加粗体和斜体格式化效果的老派方法——这里将简要讨论，因为如果你选择查看源代码，那么将不可避免地会在许多web站点的源代码中看到它，包括< b > b >和< i > i >标签对。对于粗体文本，将用< b >和标签包围文本。类似地，要使任何文本以斜体显示，将在< i >和 i >标签内封闭它。尽管这种方法在浏览器中仍然会工作得很好，但它不像用于文本格式化的css样式规则那样灵活或强大，应该避免使用。

注意：

尽管只要有可能，你都希望使用样式来影响表示，但是在处理粗体和斜体文本时，样式规则的一种替代方法涉及< strong > strong >和< em > em >标签对。在大多数浏览器中，< strong >标签所做的事情与< b >标签相同，而< em >标签就像< i >标签一样，用于把文本格式化为斜体。当然，也可以按你喜欢的方式设置这些标签的样式，但是这些是默认设置。

< strong >和< em >标签被认为是< b >和< i >之上的改进，因为它们只暗示文本应该接受特殊的强调。它们没有明确规定应该如何实现这种效果。换句话说，浏览器不必把< strong >解释为意指粗体或者把< em >解释为意指斜体。这使< strong >和< em >更适合于html5，因为它们给文本添加了含义，并且会影响文本的显示方式。

本书第iii部分“利用css进行高级web页面设计”更深入地介绍了css样式规则，但是这里做一点铺垫是合适的，以便你可以理解一些基本的文本格式化选项。font-weight样式规则使你能够使用一个样式规则设置字体的粗细或鲜明度，用于font-weight的标准设置包括normal、bold、bolder和lighter（其中normal是默认设置）。斜体文本是通过font-style规则控制的，可以把它设置为normal、italic或oblique。如果希望应用多个样式规则，也可以一起指定样式规则，如下面的示例所示：

在这个示例中，在< p >标签的style属性中指定了两个样式规则。使用多个样式规则的关键是：必须用分号（;）把它们隔开。

不过，并不仅限于在段落中使用字体样式。下面的代码显示了如何把项目符号列表中的文本设置为斜体字：

也可以在标题内使用font-weight样式，但是一种更粗重的字体通常不会影响标题，因为它们默认已经是粗体。

尽管使用css允许对文本应用丰富的格式化效果，但是当不必像css所允许的那样具体时，另外几个有效的html5标签也适合于给文本添加特殊的格式化效果。下面给出了其中一些标签，所有其他的文本格式化实际上应该都是利用css完成的。每个标签的实际应用如程序清单6.2和图6.2所示。

：上标文本。

：下标文本。

：强调的（斜体）文本。

：醒目的（粗体）文本。

：预先格式化的（通常是等宽的）文本，保留空格和换行符。

watch警告：

在过去，< u >标签用于创建加下划线的文本，但是你现在将不想使用它，这是由于下面两个原因。第一，用户期望加下划线的文本是一个链接，因此如果加下划线的文本不是链接，那么他们可能会糊涂。第二，< u >标签是过时的，这意味着它将html语言逐步淘汰（就像< strike >标签一样）。在web浏览器中仍然支持这两个标签，并且很可能持续相当长的一段时间，但是使用css是创建加下划线和删除线的文本的首选方法。

程序清单6.2 特殊格式化的标签

https://yqfile.alicdn.com/2caeae39d5ad33763b532a584b301430f6cba844.png" >

< pre >标签导致文本以等宽字体显示，并且会做另外某件独特而有用的事情。如你在第2章中所学到的，在html文件中通常会忽略多个空格和换行符，但是< pre >可以保留额外的间距和换行符。例如，如果没有< pre >，图6.2末尾的文本看起来将如下所示：

即使在每一行末尾添加< br />标签，列也不会正确地对齐。不过，当在开头放置< pre >并在末尾放置 pre >时，列将正确地对齐，因为这样会保留精确的空格，而无需使用< br />标签。< pre >标签提供了一种快捷、容易的方式，用于以最少的工作量保留你可能想转换成web页面的任何等宽文本文件的对齐方式。

css提供了一些用于对齐文本（实际上可以对文本做任何事情）的更健壮的方法，在本书整个第iii部分将学习关于它们的更多知识。