1、第14章 CSS控制列表元素的显示,在网页中,列表元素通常用来定义导航,或者文章标题列表等内容。在CSS中,可以通过相应的属性,控制列表元素的各种显示效果,在本章中,将对CSS中控制列表元素的显示和列表元素的使用和嵌套做详细的讲解,学习的时候可通过对照前面所学知识来加深对本章的理解。通过本章学习,应该掌握以下知识要点: 重点掌握CSS控制列表元素的使用方法。 熟悉列表元素的各种属性。 学会使用嵌套的列表。,14.1 控制列表元素的显示,在CSS中,列表元素的控制,包括控制控制列表符号、列表图片、控制列表的位置、等几个方面的内容。通过定义各种属性可以更改列表的默认显示方式,但是想要完全控制列表元
2、素的显示,还需要依赖其他的CSS属性。下面将一一进行详细讲解。,14.1.1 列表符号属性list-style-type,列表符号属性(list-style-type),用来定义列表中使用的预设符号。其中使用的属性值有很多,部分属性值还不被浏览器所支持。,14.1.2 列表符号的混用,在定义列表元素的时候,有时候会混用各种列表符号。当混用的列表符号中,包含顺序问题的时候,同一列表中将会计算所有列表项目的数目,确定当前列表项目的显示方式。,14.1.3 列表图像属性list-style-image,列表图像属性(list-style-image),用来定义列表元素中,替换列表符号的图像。在列表图
3、像属性中,可以使用两个属性值:none和URL,其语法结构如下所示。,14.1.4 列表图像的显示位置,在列表图像属性中,使用的列表图像的显示位置将与文本的底部基线对齐。所以在使用列表图像的时候,要注意选择合适的图像大小,否则将会显示异常。,14.1.5 标记位置属性list-style-position,标记位置属性(list-style-position),用来定义列表中标记的显示位置。在字体样式属性中,可以使用两个属性值:outside、inside。,14.1.6 标记位置属性与列表高度,当使用标记位置属性,同时定义了列表高度的时候,列表标记将会显示在列表的底部,而不会显示在列表内容第
4、一行之中。,14.1.7 列表综合属性list-style,列表综合属性(list-style),用来统一定义列表的各种显示效果。在列表综合属性中,可以同时定义列表的标记位置、使用图片、列表符号等属性。,14.2 列表元素的使用和嵌套,在制作页面的时候,经常会使用列表元素来制作各种页面内容。在HTML中,列表元素默认会包含各种预先定义的显示效果,这些显示效果在不同的浏览器中,使用的属性值也不相同。所以在使用CSS控制列表元素的时候,要对列表元素的显示效果有所了解。同时使用嵌套的列表元素可以制作出各种复杂的显示效果。具体内容如下所示。,14.2.1 列表元素的默认属性值,在列表元素中,如果未定义任何表现属性的时候。在IE浏览器中,会为列表定义默认的边界属性。在Firefox浏览器中,会为列表同时定义默认的补白和边界属性。,14.2.2 统一列表元素的边界和补白,通过14.2.1的讲解,可以知道,造成列表元素显示差异的主要原因是:存在不同的边界和补白属性值。所以可以通过定义边界和补白属性,来统一列表元素的显示差异。,14.3 本章习题,一选择题。二填空题。三实战练习。,