第3章文字_轻松学HTML+CSS网站开发-QQ阅读男生玄幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

第3章文字

文字是网页传达信息最常用的方式。任何网页元素都无法代替文字的作用。它不仅是网站信息传递的主要载体，也是网页中必不可少的重要视觉艺术传达符号。文字设计的好坏会直接影响整个网站的视觉传达效果。本章将详细讲解网页中文字的使用。

3.1 网页中的文字

由于网页自身的特点，在网页中使用文字需要考虑诸多因素，如文字的编码、文字的字体、文字的表示。一旦忽略这些因素，会给信息的传达造成各种障碍。下面依次讲解这些因素。

3.1.1 文字编码——字符集

在计算机中，所有的信息都是用数字表示的。对于非数字的内容，必须按照一定的规则进行编码，才能进行保存。而网页中的文字，同样要采用编码的形式进行保存。世界上存在众多语言，文字形式也各不相同。由于历史原因，各种文字有多种编码形式。下面讲解常用的基本编码模式。

● Unicode联盟开发了Unicode标准，目的是用标准的Unicode转换格式（UTF）来取代现有的字符集。一般我们使用的是UTF-8。UTF-8中的字符可以是1～4字节长。UTF-8可以表示Unicode标准中的任意字符。UTF-8向后兼容ASCII编码。UTF-8是网页和电子邮件的首选编码。

● GBK是汉字编码标准之一。GBK向下与GB2312编码兼容，向上支持ISO-10646-1国际标准，是前者向后者过渡过程中的一个承上启下的标准。GBK编码收录了21003个汉字，目前广泛使用于Windows 2000中文版等操作系统中。

● GB2312一般用于简体中文，与Unicode一样，都是字符集，但GB2312支持的汉字数量相对较少。

1.使用HTML标签设置文字编码

HTML并没有提供专门的标签来设置文字编码，用户只能在 <meta> 标签中进行设置，方法如下。

在框中设置需要的编码类型，如UTF-8、GBK或GB2312。

2.使用Dreamweaver设置文字编码

在Dreamweaver中，用户可以直接以界面化的方式进行设置。打开HTML文档，在“属性”面板中单击“页面属性”按钮进行设置，如图3.1所示。

图3.1 文字编码设置

注意：如果一个网页没有设定编码，会由浏览器自动识别。一旦识别错误，会造成在网页中出现乱码的问题。

【示例3-1】如下网页未设置文字编码，由浏览器自动识别，可能会出现编码错误。

3.1.2 文字的字体

字符集决定文字在计算机内部的编码，但是文字的具体显示由字体决定。换句话说，字体决定了一个文字编码在屏幕上显示出来的样式。在网页设计过程中，常用的文字字体有宋体、黑体、楷体和Wingdings。其中，Wingdings是网页中的特殊字体，下面详细讲解该字体。

Wingdings是一个符号字体系列，它将许多字母渲染成各式各样的符号，常用的符号如图3.2所示。

图3.2 常用的Wingdings符号

注意：在图3.2中，第1行、第3行、第5行、第7行是普通字体效果。第2行、第4行、第6行、第8行是使用Wingdings字体后的效果。

后来，微软相继推出Wingdings2和Wingdings3。其中，Wingdings2的规格中包括16种索引、字母、数字（从0到10）序号、多种记号、问/叹号、数个几何形状和星形。常用的Wingdings2符号如图3.3所示。

图3.3 常用的Wingdings2符号

而Wingdings3则包含箭头形状的全部种类，常用的如图3.4所示。

图3.4 常用的Wingdings3符号

1.使用HTML设置文字字体

在HTML中，使用字体标签 <font> 来对字体、字符集进行设置，语法规则如下所示。

  <font face="字体名称">设置字体的内容</font>

【示例3-2】下面使用 <font> 标签设置文字的字体为黑体。

2.使用Dreamweaver设置文字字体

在Dreamweaver中，用户可以直接以界面化的方式进行设置。打开HTML文档，在“属性”面板中单击“页面属性”按钮进行设置，如图3.5所示。

图3.5 文字字体设置

【示例3-3】下面的网页代码中使用了一种不常用的字体——华文琥珀。当客户端计算机没有安装该字体时，则会使用系统默认字体代替。

3.使用CSS设置文字字体

在CSS中，我们通常使用 <font-family> 标签对字体进行设置，格式如下所示。

{font-family:"字体名称";}

【示例3-4】使用 <font-family> 标签设置字体为楷体和宋体，如下所示。

注意：由于网页显示在访问者的浏览器中，所以，如果访问者的操作系统中没有网页中所指定的字体，浏览器会使用其他字体代替不存在的字体，这时，网页将无法达到预期效果。通常，网页设计中应尽量使用常见字体，否则应采用图片代替。

3.1.3 文字的表示

在网页中，HTML标签也是由文字构成的。当用户要表达的内容中包含网页标签时，就不会被显示出来。为了避免这种情况，HTML提供了特殊的文字——字符实体，其语法如下所示。

字符实体由3个部分组成，一个和号（&），一个实体名称（或者“#”号和一个实体编号），以及一个分号（；）。下面介绍几种常用的字符实体，如表3.1所示。

表3.1 常用的字符实体

注意：空格是HTML中最普遍的字符实体。一般情况下，HTML会删掉文档中的空格。例如，在文档中连续输入10个空格，则HTML会删掉其中的9个。如果使用“ ”就可以在文档中增加空格。

【示例3-5】在HTML中，使用“ ”在文档中增加空格，如下所示。

说明：这里的“口”字无实际意义，目的是让读者看到两个字之间的距离。

3.2 字体属性设置

文字是网页中最常见的一种元素，使用范围也最广。下面我们就来介绍有关文字的属性设置。

3.2.1 文字大小

在HTML中，我们通常使用 <font size> 标签来设置文字的大小，格式如下。

<font size="数值">文字内容</font>

对于字体大小，我们从以下两个方面介绍。

1.绝对大小

字体的绝对大小主要取决于客户端设定的标准，可能会有1～7个尺寸。一般用户的首选字体大小是“3”，比“3”大的尺寸表示将字体变大，比“3”小的尺寸表示将字体变小。

2.相对大小

在HTML中，一般使用 <basefont> 标签定义基准字体。这个标签可以为文档中的所有文本定义默认字体大小、字体颜色和字体系列。一般客户端默认的字体大小为“3”；当设置为“+1”时，是将字体的大小设为比默认字体大一号的字体；当设置为“+2”时，是将字体的大小设为比默认字体大两号的字体；当设置为“-1”时，是将字体的大小设为比默认字体小一号的字体；以此类推，如下所示。

【示例3-6】使用 <font size> 标签设置文字大小。

在CSS中通常使用 <font-size> 标签设置文字的大小。font-size值可以使用绝对值或相对值。

● 绝对值：将文本设置为指定的大小；不允许用户在所有浏览器中改变文本大小（不利于可用性）；绝对大小在确定了输出的物理尺寸时很有用。

● 相对值：相对于周围的元素来设置大小；允许用户在浏览器中改变文本大小。

注意：如果没有规定字体大小，普通文本（如段落）的默认大小是16像素（16xp=1em）。

使用像素来设置字体大小，格式如下。

{font-size:数值px;}

【示例3-7】使用 <font-size> 标签设置字体大小，如下所示。

在Firefox、Chrome和Safari浏览器中，可以重新调整【示例3-7】中的文本大小，但是在IE浏览器中不可以调整。虽然可以通过IE浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。

使用相对长度来设置字体大小时，可以在所有浏览器中调整文本的大小。换算公式为1pixels/16=1em，使用格式如下。

{font-size:数值em;}

【示例3-8】使用font-size值设置字体大小，如下所示。

注意：虽然使用em单位时可以在所有浏览器中调整文字的大小，但是在IE浏览器中仍存在问题——在重设文本大小时，会比正常的尺寸更大或更小。

3.2.2 文字颜色

为网页内容加上颜色，可以更好地表达内容的主题。网页内容包含链接文字和普通文字，这里我们着重讲解如何设置普通文字的颜色，在第5.3.4节中再详细介绍如何设置链接文字的颜色。

在HTML中，我们通常使用 <font color> 标签来设置文字颜色，格式如下。

<font color="颜色值">设置颜色的内容</font>

【示例3-9】使用 <font color> 标签设置文字的颜色，如下所示。

在CSS中，通常通过以下形式设置文字颜色。

{color:red}

【示例3-10】在CSS中设置文字的颜色，如下所示。

3.2.3 文字对齐方式

网页内容的摆放有时要求整齐统一，有时要求活泼大方，有时要求错落有致，可以看出对齐方式的设置对网页的重要性。

在HTML中，我们通常使用align属性设置文字的对齐方式，格式如下。

align="对齐方式"

【示例3-11】使用align属性设置文字的对齐方式，如下所示。

注意：除了段落标签 <p> 可以设置align属性，还有很多标签也可以设置align属性，如 <h1> 和 <font>。

在CSS中，我们通常使用text-align属性设置文字的对齐方式，格式如下。

{text-align:对齐方式}

【示例3-12】在CSS中设置文字的对齐方式，如下所示。

CSS字体属性的具体描述如表3.2所示。

表3.2 CSS字体属性

3.3 文本格式化

文本格式化是指对网页设计中所用到的文本的格式进行设置。下面我们就来介绍文本格式化的相关知识。

3.3.1 定义粗体文本

粗体文字可以使文字在显示的时候笔画加粗。通常，采用该方式是为了让文字着重表现。在HTML中，可以使用 <b> 和 <strong> 两种方式进行加粗。同时，CSS也提供了bold属性供我们使用，语法如下。

【示例3-13】以下代码演示定义粗体文本的使用。

注意：在Dreamweaver中，HTML的字体加粗按钮，默认使用 <strong> 标签，如图3.6所示。

图3.6 <strong> 标签的默认使用

注意：随着网络时代的发展，对于文本的加粗等样式的改变，尤其是对多个网页中的文本进行加粗改变，人们越来越多的是在CSS中进行定义，这样不仅方便快捷，而且精准。

3.3.2 定义着重文字

着重文字是使文字在显示的时候，字体形态变为倾斜，与其他文字形成鲜明的对比，以加深读者的印象。在HTML中，可以使用 <em> 和 <i> 标签两种方式进行着重表现。同时，在CSS中也可以设置italic属性，达到着重表现文字的效果，语法如下。

【示例3-14】以下代码演示定义着重文本的使用。

注意：在Dreamweaver中，HTML的字体斜体按钮，默认使用 <em> 标签，如图3.7所示。

图3.7 <em> 标签的默认使用

3.3.3 定义计算机代码

计算机代码标签可用在显示计算机/编程代码的编写中，使得读者更容易辨别区分。在HTML中，可以使用 <code> 等标签进行设置，语法如下。

【示例3-15】以下代码演示了“计算机输出”标签的显示结果。

3.3.4 预格式文本

格式化输出是指将 <pre> 和 </pre> 标签之间的内容按原文件的格式输出，空格和换行不会忽略，尤其是在计算机代码中。

在HTML中，使用 <pre> 标签可以对文件中的空行和空格进行严格控制，语法如下。

【示例3-16】以下代码演示了 <pre> 标签对空行和空格进行的控制。

【示例3-16】使用 <pre> 标签时显示的文本，明确演示了 <pre> 标签的作用，既不会省略空格，也不会丢掉空格，进而使我们的文本正确地显示出来。

3.3.5 定义地址

定义地址是指在网页设计过程中通过编写代码使某个地址具体呈现出来或者作为超链接使用，在HTML中语法如下。

【示例3-17】以下代码演示了地址代码的使用方法。

注意：<address> 标签中的地址默认是斜体。

3.3.6 定义文字方向

文字方向的定义是我们为了增加文字的表现效果自定义的一种文字方向。在HTML中使用 <bdo> 标签来定义文字方向，语法如下。

【示例3-18】以下代码演示了方向代码的设置方法。

<bdo> 标签可以让我们随意改变文字的方向，增强了页面的可读性，但需注意，设置 <bdo>标签中“dir”的原方向和目标方向时，一定要使用相应英文单词的首字母，例如，左边（left）用“l”表示，右边（right）用“r”表示。

3.3.7 块引用

块作为HTML的重要元素集，包含address（地址）、blockquote（块引用）、form（交互表单）等。对块的引用有两种，一种是长的引用，一般使用 <blockquote> 标签，另一种是短的引用，常用 <q> 标签定义，语法规则如下。

【示例3-19】以下代码演示如何实现长短不一的引用语。

在这个示例中我们可以看到，使用 <blockquote> 标签时，浏览器会自动插入换行和外边距，但是使用 <q> 标签时，就不会有任何特殊的呈现。

3.3.8 标签总结

下面给出一些常用的标签，如表3.3至表3.5所示。

表3.3 文本格式化标签

表3.4 计算机输出标签

表3.5 引用、引证和术语定义

3.4 段落

段落在网页的设计过程中使用频率较高，下面我们就来介绍段落的设置及其相关属性。

3.4.1 HTML段落

HTML文档可分割为若干段落。段落是通过 <p> 标签定义的，语法规则如下。

【示例3-20】以下代码演示如何定义段落。

使用空的段落标记 <p> 和 </p> 插入一个空行是个坏习惯，应该使用 <br/> 标签。但注意不要使用 <br/> 标签去创建列表，后面我们再详细介绍列表的创建。

【示例3-21】以下代码演示了段落的默认行为。

段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

3.4.2 段落的行间距

段落中的行间距对一段文字的美观于否起到了决定性的作用。设置段落的行间距有多种方式，下面我们介绍在CSS中常用的两种方式。

（1）使用像素值设置行间距，格式如下。

{line-height:数值px;}

【示例3-22】使用像素设置段落的行间距。

（2）使用百分比设置行间距，格式如下。

{line-height:数值%}

【示例3-23】使用百分比设置行间距。

3.4.3 标题的定义

HTML标题是通过 <h1> 至 <h6> 标签进行定义的。从 <h1> 到 <h6>，标题字体逐渐减小，其中 <h1> 定义最大的标题，<h6> 定义最小的标题。

搜索引擎使用标题为网页的结构和内容编制索引。为了使用户可以通过标题来快速浏览网页，标题的呈现文档结构就变得很重要，应该将 <h1> 标签用于主标题（最重要的），其次是 <h2>（重要的），再次是 <h3>，以此类推，语法规则如下。

【示例3-24】以下代码演示了如何定义标题。

注意：浏览器会自动在标题的前后添加空行。默认情况下，HTML会自动在块级元素前后各添加一个额外的空行，如段落、标题元素。请确保将HTML <heading> 标签只用于标题，不要仅仅为了产生粗体或大号的文字而使用标题。

3.4.4 HTML水平线

<hr/> 标签用于在HTML页面中创建水平线。在网页设计的过程中，可使用hr元素进行内容的分割，语法规则如下。

【示例3-25】以下代码演示了如何定义水平线。

注意：可以使用水平线（<hr> 标签）分割文章中的节。这是一个办法，但不是唯一的办法。

3.4.5 HTML折行

1.使用 <br/> 标签换行

<br/> 标签是换行标签，可以在不产生一个新段落的情况下进行换行，语法规则如下。

【示例3-26】以下代码演示如何定义换行。

<br/> 标签是一个空的HTML元素。因为关闭它没有任何意义，所以它没有结束标签。

【示例3-27】以下代码演示了HTML如何输出有用的提示。

我们无法确定HTML显示的确切效果，屏幕的大小及对窗口的调整都可能导致不同的效果。对于HTML，我们无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。但需要注意的是，HTML代码中所有连续的空行（换行）也显示为一个空格。

2.在元素中禁止文本折行

文本折行是编辑一段文本时经常遇到的情况，但有时我们为了文本的美观，需要在元素中禁止文本折行，使用规则如下。

{white-space:nowrap}

【示例3-28】下面演示如何设置禁止文本折行。

3.5 列表

列表在网页的设计过程中也是使用频率较高的，下面我们就来详细介绍列表的相关知识。

3.5.1 无序列表

无序列表是一个项目列表，用粗体圆点（典型的小黑圆圈）进行标记，语法规则如下。

【示例3-29】以下代码演示无序列表。

列表项内部可以使用段落、换行符、图片、连接及其他列表等。

为了使无序列表更加简洁、美观，我们可以更改列表项。在HTML中，通过type属性来更改无序列表中的列表样式，使用格式如下。

<ul type="样式名称">无序列表内容</ul>

【示例3-30】下面这个例子将项目符号列表改成空心圆圈。

3.5.2 有序列表

有序列表也是一列项目。列表项目使用数字进行标记，语法规则如下。

【示例3-31】以下代码演示有序列表。

在HTML中，通过type属性来更改无序列表中的列表样式，格式如下，具体参考【示例3-30】。

<ol type="样式名称">有序列表内容</ol>

3.5.3 定义列表

自定义列表是项目及其注释的组合，语法规则如下。

【示例3-32】以下代码演示自定义列表。

3.5.4 CSS列表

在CSS中，列表属性允许防止、改变列表项标志，或者将图像作为列表项标志。

1.列表类型

要改变列表的样式，最简单的办法就是改变其标志类型。修改列表项的标志类型，我们可以使用list-style-type属性，语法规则如下。

【示例3-33】使用list-style-type属性把无序列表中的列表项标志设置为方块。

2.列表项图像

有时，仅有常规的标志是不够的。如果我们想对标志使用一个图像，就可以使用list-style-image属性来制作，格式如下。

【示例3-34】将图像sj.jpg作为有序列表项标记。

3.列表标志位置

在CSS 2.1版本中，通过list-style-position属性可以确定标志出现在列表项的内容之外，还是在内容的内部。使用方法如下。

【示例3-35】本例演示如何放置列表标记。

为了简单起见，我们将以上3个列表样式属性合并为一个方便的属性list-style，具体如下。

li {list-style:url（图片名.gif）列表类型名 列表标志位置

注意：list-style的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其他选项就会填入其默认值。

【示例3-36】将所有针对列表的属性设置为一个简写属性。这里我们设置列表的类型是square，列表标志位置是列表项内容的内部。

CSS列表属性的具体描述如表3.6所示。

表3.6 CSS列表属性标签

3.5.5 示例概括

经过前面的学习，我们已经对列表有了一个初步的了解，下面再给出几个具体的示例，以便大家了解如何定义更美观的列表。

【示例3-37】以下代码演示的是嵌套列表。

注意：列表定义好之后，切记不要丢掉结束标签，因为每对列表都是一对一的。

【示例3-38】以下代码演示的是比较复杂的嵌套列表。

【示例3-39】以下代码演示的是定义列表。

下面给出列表标签的总结，如表3.7所示。

表3.7 列表标签

3.6 小结

本章讲解了有关字体标签、列表标签的知识。通过学习，读者可以了解一些常用的和不常用的标签。常用的标签需要读者牢牢掌握并灵活运用，而不常用的标签希望读者可以有所了解。其中，每个标签都有特定的意义，不能随意使用。

3.7 习题

【习题3-1】运用本章所学知识，分别使用HTML和CSS两种方式制作效果如图3.8所示的网页。

图3.8 网页效果

【分析】这个网页由标题和段落两部分组成，但是对这两类标题分别设置了字体大小、颜色和对齐方式。读者需要特别注意，对齐方式的添加位置与字体大小、颜色的添加位置不同。这里的CSS中选择了id选择器作为参考。

【关键代码】

● HTML代码如下。

<body>
<h1 align="center"><font color="#FF0000">题目1</font></h1>
<p align="left"><font color="#FF0000"; size="24px"; font="宋体">今
天的太阳好大啊！</font></p>
<h3 align="center"><font color="#CCCCCC" ;>题目2</font></h3>
<p align="right"><font color="#CCCCCC"; size="16px"; font="黑体">
今天我们可以穿漂亮裙子了！</font></p>
<h5 align="right"><font color="#FFFF00">题目3</font></h5>
<p align="center"><font color="#FFFF00"; size="14px"; font="楷体">
希望明天还是这么好的天气！</font></p>
</body>

● CSS代码如下。

<head>
<style type="text/css">
#tm1 {
      color: #F00;
      text-align: center;
}
#dl1{
      font-family: "宋体";
      font-size: 24px;
      color: #F00;
      text-align: left;
}
#tm2 {
      color: #CCC;
      text-align: center;
}
#dl2 {
      font-family: "黑体";
      color: #CCC;
      text-align: right;
      font-size: 16px;
}
#tm3 {
      color: #FFC;
      text-align: right;
}
#dl3 {
      font-family: "楷体";
      color: #FFC;
      text-align: center;
      font-size: 14px;
}
</style></head>
<body>
<h1 id="tm1">题目1</font></h1>
<p id="dl1">今天的太阳好大啊！</p>
<h3 id="tm2">题目2</font></h3>
<p id="dl2">今天我们可以穿漂亮裙子了！</p>
<h5 id="tm3">题目3</h5>
<p id="dl3">希望明天还是这么好的天气！</p>
</body>

【习题3-2】将网页中的段落文字变为粗体，并且将字体放大到到20px，颜色更改为红色，效果如图3.9所示。

图3.9 网页最终效果

【分析】本例要求读者用两种方式制作这个网页，实际上是再次考查读者对HTML和CSS的定义方法的掌握程度。

【关键代码】

<head>
<style type="text/css">
#zd1 {
        font-size: 20px;
        color: #F00;
}
#zd2 {
        font-size: 20px;
        color: #F00;
}
#zd3 {
        font-size: 20px;
        color: #F00;
}
</style>
</head>
<body>
<p>最近，<span id="zd1">台风登陆</span>，很多地方都下起了
<span id="zd2">大暴雨</span>，对人们的出行、工作造成了很大的
<span id="zd3">影响</span>。</p>
</body>

【习题3-3】如图3.10所示的段落行间距太小了，文字都重叠在一起。请修改段落行间距，使整个页面变得整洁，如图3.11所示。

图3.10 行间距较小时的效果

图3.11 设置后的效果

【分析】段落的行间距通常情况下是默认的，如果有需要，可以进行定义。

【关键代码】

<head>
<style type="text/css">
.max {
        line-height: 30px;
}
</style>
</head>
<body>
<p class="max">今天的天气很好，大街上很多女孩穿着裙子，但仍
旧有些人穿着很厚的衣服。真是乱穿衣的季节啊！不过希望大家还是
能够以保重身体为首要任务，以免生病了。</p>
</body>

【习题3-4】给出一个网页，如图3.12所示。请说出该网页中水平线使用的标签是什么。

图3.12 网页效果

【分析】从图3.12中可以看出，段落间的横线是水平线，不难得出水平线所使用的标签是<hr/> 标签。

【习题3-5】在网页中创建一个无序表单，并修改其标题为红色、宋体，列表内容为蓝色，效果如图3.13所示。

图3.13 无序列表网页效果

【分析】本例将无序列表和CSS样式表相结合，使制作出来的网页更加美观。这里使用的是标签选择器，读者也可以使用其他选择器来定义。

【关键代码】

<head>
<style type="text/css">
h3{
        font-family: "宋体";
        color: #F00;
}
li {
        color: #00F;
}
</style>
</head>
<body>
<h3>这是一个无序列表：</h3>
<ul type="square">
<li>HMTL</li>
<li>CSS</li>
<li>XHTML</li>
<li>Dreamweaver</li>
</ul>
</body>

【习题3-6】在网页中创建一个有序列表，并修改其标题为红色、黑体，列表内容为蓝色、楷体，效果如图3.14所示。

图3.14 有序列表网页效果

【分析】本例将有序列表和CSS样式表相结合，使制作出来的网页更加美观。这里使用的是类选择器和id选择器，读者也可以使用其他选择器。

【关键代码】

<head>
<style type="text/css">
#tm {
        font-family: "黑体";
        color: #F00;
}
.lb {
        font-family: "楷体";
        font-size: 16px;
        color: #00F;
        text-decoration: underline;
}
</style></head>
<body>
<h3 id="tm">以下是最近几天的天气情况种类：</h3>
<ol type="i" class="lb">
<li>晴</li>
<li>雨</li>
<li>台风</li>
<li>大暴雨</li>
</ol>
</body>

【习题3-7】在网页中创建一个自定义列表，并修改其样式，使两个列表的标题字体是楷体、蓝色，而列表项内容，一种是宋体、灰色，另一种是黑体、红色，效果如图3.15所示。

图3.15 自定义列表效果

【分析】本例将自定义列表和CSS样式表相结合，使读者的发挥空间更大了，可以任意使用CSS样式，这里使用的是类选择器。

【关键代码】

<head>
<style type="text/css">
.outside {
      list-style-position: outside;
      font-family:"宋体";
      font-size:16px;
      color:#CCC;
}
.inside {
      font-family: "黑体";
      font-size: 16px;
      color: #F00;
      list-style-position: inside;
}
.zt{
      font-family: "楷体";
      font-size: 20px;
      color: #00F;
}
</style></head>
<body>
<dl>
<dt class="zt">北方水果种类：</dt>
<dd class="outside">苹果</dd>
<dd class="outside">杏</dd>
<dd class="outside">梨</dd>
<dt class="zt">南方水果种类：</dt>
<dd class="inside">橘子</dd>
<dd class="inside">柚子</dd>
<dd class="inside">杨桃</dd>
</dl>
</body>

【习题3-8】在网页中创建一个嵌套的无序列表，并修改其样式，使两个列表标题字体是宋体、蓝色、16px，列表项内容字体是楷体、绿色、14px，段落字体是红色、黑体、24px，效果如图3.16所示。

图3.16 嵌套列表效果示意

【分析】本例主要希望读者能够掌握嵌套列表的设置方法，并将CSS样式表融合，使网页的效果更加美观。

【关键代码】

<head>
<style type="text/css">
p{ text-align:center;
font-family:"黑体";
font-size:24px;
color:#F00;
}
#lb {
      font-family: "宋体";
      font-size: 16px;
      color: #00F;
}
#lbx{
      font-family:"黑体";
      font-size:14px;
      color:#0F0;
      }
</style>
</head>
<body>
<p>音乐分为：</p>
<ul type="square">
<li id="lb">古典流行音乐
<ul type="disc" id="lbx">
<li>钢琴曲</li>
<li>竖琴</li>
<li>架子鼓</li>
</ul>
</li>
<li id="lb">现代流行音乐
<ul type="disc" id="lbx">
<li>吉他</li>
<li>架子鼓</li>
<li>电子琴</li>
</ul>
</li>
</ul>
</body>

【习题3-9】下面给出一段代码，请指出这段代码中被框选代码的含义。

<head>
<style type="text/css">
li{
        list-style: url(../image/square.jpg) square outside;
        font-family:"宋体";
        font-size:16px;
        color:#F00;}
</style>
</head>
<body>
<ul>
<li>流行服饰</li>
<li>古典服饰</li>
<li>民族服饰</li>
</ul>
</body>

【分析】观察这段代码，不难发现这是一段无序列表的代码，而被框选的代码在 <head>、<style> 标签中，说明这段代码是CSS样式，用来修饰 <li> 标签。代码内容依次是列表标志的路径、列表类型名、列表标志位置。

第3章 文字

3.1 网页中的文字

3.1.1 文字编码——字符集

3.1.2 文字的字体

3.1.3 文字的表示

3.2 字体属性设置

3.2.1 文字大小

3.2.2 文字颜色

3.2.3 文字对齐方式

3.3 文本格式化

3.3.1 定义粗体文本

3.3.2 定义着重文字

3.3.3 定义计算机代码

3.3.4 预格式文本

3.3.5 定义地址

3.3.6 定义文字方向

3.3.7 块引用

3.3.8 标签总结

3.4 段落

3.4.1 HTML段落

3.4.2 段落的行间距

3.4.3 标题的定义

3.4.4 HTML水平线

3.4.5 HTML折行

3.5 列表

3.5.1 无序列表

3.5.2 有序列表

3.5.3 定义列表

3.5.4 CSS列表

3.5.5 示例概括

3.6 小结

3.7 习题

第3章文字