第24章　列表

读者或许已经对列表这个词有点儿印象，本章不再介绍列表的HTML知识，而是讲解如何用CSS对列表产生影响，以达到网页想表达的效果。属性列表是复合属性，其下包含几个不是作用的属性来设置列表项目的内容。

学习本章，主要是对列表的样式做些控制，介绍在CSS中对HTML的列表控制。

本章主要学习以下内容：

❑列表的基本语法；

❑设置列表中的图像；

❑列表中的文本排列；

❑列表的预设标记。

24.1　列表的基本语法

本章所介绍的列表与在4.4节中的列表是不一样的。不是从HTML角度介绍如何设置列表，而是用CSS属性来控制列表外观，通过样式对列表进行设置，但是有一点，本章中的列表是在HTML中的列表基础上进行设置的。

属性列表在CSS中用list-style表示，是复合属性，其下包含列表的图像（list-style-image）、列表文本排列（list-style-position）和列表预设标记类型（list-style-type），属性list-style的完整语法表示如下。

/列表属性/

list-style：list-style-image||list-style-position||list-style-type

列表属性后接三个单属性，它们的作用如下所述。

❑参数list-style-image：用来设置列表的图像。

❑参数list-style-position：用来设置列表项标记如何根据文本排列。

❑参数list-style-type：用来设置列表项所使用的预设标记。

以上参数都是属性，这些参数的后面接的值，稍后作详细介绍，默认值为disc outside none。在本节中只用实例来演示复合属性list-style如何使用，让读者对本复合属性有一个初步认识，代码24.1表示了复合属性list-style用法。

代码24.1　源代码\第24章\list-style用法.html

—————————————文件名：list-style用法.html—————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞list-style用法＜/title＞

01 ＜style type="text/css"＞

02 #l1

03 {

04 /设置边框/

05 border：1px solid red；

06 }

07 #l2

08 {

09 /设置边框和列表/

10 border：1px solid red；

11 margin-top：5px；

12 /列表设置/

13 list-style：url（"list1.gif"）inside none；

14 }

15 ＜/style＞

16 ＜/head＞

17 ＜body＞

18 ＜！-层中包含列表—＞

19 ＜div id="l1"＞

20 这个层表示列表默认状态：

21 ＜ul＞

22 ＜li＞表项一＜/li＞

23 ＜li＞表项二＜/li＞

24 ＜li＞表项三＜/li＞

25 ＜/ul＞

26 ＜/div＞

27 ＜div id="l2"＞

28 这个层表示设置列表后的状态：

29 ＜ul＞

30 ＜li＞表项一＜/li＞

31 ＜li＞表项二＜/li＞

32 ＜li＞表项三＜/li＞

33 ＜/ul＞

34 ＜/div＞

35 ＜/body＞

36 ＜/html＞

【代码解析】在代码24.1中，用两个层表示了列表的用法。为了对比，代码第19行为第1层，是默认的list-style值（没有存在list-style属性，系统按默认值显示）；代码第27行为第2层，设置了list-style，第1个属性list-style-image用自己的图像来显示，这样第3个属性的类型就设置成none（由于对list-style-image为非none，优先权底的list-style-type属性失效），第2个属性list-style-position设置成inside，表示列表图像放置在文本以内，且环绕文本根据标记对齐，效果如图24.1所示。

图　24.1　list-style用法