开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

本节书摘来自异步社区《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>


<a href=https://yqfile.alicdn.com/2caeae39d5ad33763b532a584b301430f6cba844.png" >

< 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部分将学习关于它们的更多知识。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
FLINK在大规模实时无效广告流量检测中的应用
立即下载
《企业全面上云成功路径与实践》
立即下载