第14章 CSS控制列表元素的演示文稿.PPTVIP

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