本节书摘来自异步社区《HTML5+CSS3网页设计入门必读》一书中的第6章，第6.2节,作者： 【美】Julie Meloni更多章节内容可以访问云栖社区“异步社区”公众号查看。
6.2 粗体、斜体和特殊的文本格式化
回到打字机的时代，我们满足于纯文本显示，以及使用临时的下划线来突出重点。今天，粗体（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:bold; font-style:italic">This paragraph is bold and italic!</p>
在这个示例中，在< p >标签的style属性中指定了两个样式规则。使用多个样式规则的关键是：必须用分号（;）把它们隔开。
不过，并不仅限于在段落中使用字体样式。下面的代码显示了如何把项目符号列表中的文本设置为斜体字：
<ul>
<li style="font-style:italic">Important Stuff</li>
<li style="font-style:italic">Critical Information</li>
<li style="font-style:italic">Highly Sensitive Material</li>
<li>Nothing All That Useful</li>
</ul>
也可以在标题内使用font-weight样式，但是一种更粗重的字体通常不会影响标题，因为它们默认已经是粗体。
尽管使用CSS允许对文本应用丰富的格式化效果，但是当不必像CSS所允许的那样具体时，另外几个有效的HTML5标签也适合于给文本添加特殊的格式化效果。下面给出了其中一些标签，所有其他的文本格式化实际上应该都是利用CSS完成的。每个标签的实际应用如程序清单6.2和图6.2所示。
- ：上标文本。
- ：下标文本。
- ：强调的（斜体）文本。
- ：醒目的（粗体）文本。
- ：预先格式化的（通常是等宽的）文本，保留空格和换行符。
watch警告：
在过去，< u >标签用于创建加下划线的文本，但是你现在将不想使用它，这是由于下面两个原因。第一，用户期望加下划线的文本是一个链接，因此如果加下划线的文本不是链接，那么他们可能会糊涂。第二，< u >标签是过时的，这意味着它将HTML语言逐步淘汰（就像< strike >标签一样）。在Web浏览器中仍然支持这两个标签，并且很可能持续相当长的一段时间，但是使用CSS是创建加下划线和删除线的文本的首选方法。
程序清单6.2 特殊格式化的标签
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Miracle Product</title>
</head>
<body>
<p>
New <sup>Super</sup><strong>Strength</strong> H<sub>2</sub>O
<em>plus</em> will knock out any stain.<br/>Look for new
<sup>Super</sup><strong>Strength</strong> H<sub>2</sub>O <em>plus</em>
in a stream near you.
</p>
<pre>
NUTRITION INFORMATION (void where prohibited)
Calories Grams USRDA
/Serving of Fat Moisture
Regular 3 4 100%
Unleaded 3 2 100%
Organic 2 3 99%
Sugar Free 0 1 110%
</pre>
</body>
</html>
< pre >标签导致文本以等宽字体显示，并且会做另外某件独特而有用的事情。如你在第2章中所学到的，在HTML文件中通常会忽略多个空格和换行符，但是< pre >可以保留额外的间距和换行符。例如，如果没有< pre >，图6.2末尾的文本看起来将如下所示：
calories grams usrda /serving of fat moisture regular
3 4 100% unleaded 3 2 100% organic 2 3 99% sugar free 0 1 110%
即使在每一行末尾添加< br />标签，列也不会正确地对齐。不过，当在开头放置< pre >并在末尾放置 pre >时，列将正确地对齐，因为这样会保留精确的空格，而无需使用< br />标签。< pre >标签提供了一种快捷、容易的方式，用于以最少的工作量保留你可能想转换成Web页面的任何等宽文本文件的对齐方式。
CSS提供了一些用于对齐文本（实际上可以对文本做任何事情）的更健壮的方法，在本书整个第III部分将学习关于它们的更多知识。
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
