第17章 控制列表和表格元素的显示.pptVIP

1-* 第17章 控制列表和表格元素的显示 列表是制作网页的重要元素之一。在网页中，列表元素通常用来定义导航或者文章标题列表等内容。本章将介绍列表样式的定义方法。列表属性用来定义列表元素的显示效果。其中包括list-style-type属性、list-style-image属性、list-style-position属性等。 17.1 控制列表元素的显示 在CSS中，列表元素的控制包括控制列表符号和列表图片、控制列表的位置等几个方面的内容。通过定义其属性，可以更改列表的默认显示方式，但是想要完全控制列表元素的显示，还需要依赖其他的CSS属性。 17.1.1 定义列表符号 CSS列表属性可以改变HTML列表的显示方式。通常使用list-style-type属性定义列表的样式，list-style-image属性定义列表样式的图片，list-style-position属性定义列表样式的位置，list-style属性统一定义列表样式的几个属性。 17.1.2 使用列表图片 在实际应用中，仅有列表符号来制作页面效果是不够的，可以考虑使用列表图片来替换项目符号。列表图片属性list-style-image可以将列表符号的位置替换为列表图片，其相关属性如表17-2所示。 列表项目符号图像属性 list-style-image 相关属性值 url（图片地址）、none、inherit 17.1.3 定义标记位置 在前面介绍了关于列表符号和列表图像的应用，在实际应用中发现仅有符号或者图片是不够的，因为有的时候，需要在不同的位置来显示符号或者图片，于是引入了一个关于列表标记位置的属性。列表标记位置属性list-style-position是用来定义项目符号的显示位置的一种属性，其相关属性如表17-3所示。 列表项目符号位置属性 list-style-position 相关属性值 inside、outside、inherit 17.1.4 标记位置属性与列表高度 通过CSS的属性可知，在定义块的高度时，可以使用height来定义一个固定高度，也可以使用padding属性来定义一个随内容变化的高度。对于列表来说，也是如此。然而在列表中，又涉及了标记位置的属性，所以这就使得列表的高度与普通的块级元素不同了。 17.1.5 综合定义列表的显示效果 在上面的讲解中列举了列表不同显示效果的属性以及属性值，那么能不能像诸如背景属性那样将属性值写在一起呢？答案是可以的。列表综合属性list-style就是用来综合定义列表的显示属性，list-style属性是综合设置li样式的属性，它是一个可以继承的属性，其语法结构如下。 list-style : list-style-type | list-style-image | list-style-position 17.2 列表元素的补白和边界 列表元素的补白和边界属性，是指列表元素整体在默认状态下的补白和边界值，下面通过实例来说明。 【实例17-6】定义4个列表元素，然后分别逐步使用不同的补白值和边界值，从而看出列表元素补白和边界的效果。 17.3 控制表格元素的显示 使用表格对页面进行布局即传统的table布局是在DIV+CSS布局流行之前的不二选择，但是当样式应用逐渐成熟后，table布局的不足逐渐显示出来，从而慢慢被DIV+CSS所取代。但是并不是说页面中不能使用table，因为table元素仍然是显示数据的最好方式，如显示数据报表等内容。而在XHTML环境下，使用CSS的布局与传统的table布局还是有所区别的，在本节中，将学习一些应用表格进行布局的属性。 17.3.1 合并边框 表格的样式与其他对象的样式没有什么区别，都是使用margin、padding、border、background这些属性对表格进行操作。而表格较复杂的是，对其子级内容的控制更多。经过使用表格标签进行内容的标记，可以方便地区分开各个区域，因此可以开始实现对表格各个区域的样式设定。这一节将会使用到一种表格边框属性border-collapse，来合并相邻的两个边框宽度。 17.3.2 定义表格边框间距 表格的边框间距是通过cellpadding和cellspacing属性来控制的。cellpadding称之为表格填充属性，代表单元格外面的一个距离，用于隔开单元格与单元格空间。cellspacing称为表格间距属性，代表表格边框与单元格补白的距离，也是单元格补白之间的距离 17.3.3 定义表格标题位置 表格标题位置属性caption-side是用来定义表格标题元素caption显示的位置。在表格标题位置属性中，可以使用4个属性值：top、right、bottom和left来定义4个方向的标