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

相关文章
|
3月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
260 91
|
17天前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
15 0
CSS3几何透明层文本悬停变色源码
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
50 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
68 28
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
66 19
|
3月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
51 15
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
56 13
|
2月前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
28 0
|
3月前
|
前端开发
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。