控制列表和表格元素的显

《控制列表和表格元素的显》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第17章控制列表和表格元素的显示列表是制作网页的重要元素之一。在网页中，列表元素通常用来定义导航或者文章标题列表等内容。本章将介绍列表样式的定义方法。列表属性用来定义列表元素的显示效果。其中包括list-style-type属性、list-style-image属性、list-style-position属性等。17.1控制列表元素的显示在CSS中，列表元素的控制包括控制列表符号和列表图片、控制列表的位置等几个方面的内容。通过定义其属性，可以更改列表的默认显示方式，但是想要完全控制列表元素的显示，还需要依赖其他的CSS属性。17.1.1定义列表符号CSS列表属性可以改变H

2、TML列表的显示方式。通常使用list-style-type属性定义列表的样式，list-style-image属性定义列表样式的图片，list-style-position属性定义列表样式的位置，list-style属性统一定义列表样式的几个属性。17.1.2使用列表图片在实际应用中，仅有列表符号来制作页面效果是不够的，可以考虑使用列表图片来替换项目符号。列表图片属性list-style-image可以将列表符号的位置替换为列表图片，其相关属性如表17-2所示。列表项目符号图像属性list-style-image相关属性值url（图片地址）、none、inherit17

3、.1.3定义标记位置在前面介绍了关于列表符号和列表图像的应用，在实际应用中发现仅有符号或者图片是不够的，因为有的时候，需要在不同的位置来显示符号或者图片，于是引入了一个关于列表标记位置的属性。列表标记位置属性list-style-position是用来定义项目符号的显示位置的一种属性，其相关属性如表17-3所示。列表项目符号位置属性list-style-position相关属性值inside、outside、inherit17.1.4标记位置属性与列表高度通过CSS的属性可知，在定义块的高度时，可以使用height来定义一个固定高度，也可以使用padding属性来定义一个

4、随内容变化的高度。对于列表来说，也是如此。然而在列表中，又涉及了标记位置的属性，所以这就使得列表的高度与普通的块级元素不同了。17.1.5综合定义列表的显示效果在上面的讲解中列举了列表不同显示效果的属性以及属性值，那么能不能像诸如背景属性那样将属性值写在一起呢？答案是可以的。列表综合属性list-style就是用来综合定义列表的显示属性，list-style属性是综合设置li样式的属性，它是一个可以继承的属性，其语法结构如下。list-style:list-style-type

5、list-style-image

6、list-style-position17.2列表元素的补白

7、和边界列表元素的补白和边界属性，是指列表元素整体在默认状态下的补白和边界值，下面通过实例来说明。【实例17-6】定义4个列表元素，然后分别逐步使用不同的补白值和边界值，从而看出列表元素补白和边界的效果。17.3控制表格元素的显示使用表格对页面进行布局即传统的table布局是在DIV+CSS布局流行之前的不二选择，但是当样式应用逐渐成熟后，table布局的不足逐渐显示出来，从而慢慢被DIV+CSS所取代。但是并不是说页面中不能使用table，因为table元素仍然是显示数据的最好方式，如显示数据报表等内容。而在XHTML环境下，使用CSS的布局与传统的table布局还是有所

8、区别的，在本节中，将学习一些应用表格进行布局的属性。17.3.1合并边框表格的样式与其他对象的样式没有什么区别，都是使用margin、padding、border、background这些属性对表格进行操作。而表格较复杂的是，对其子级内容的控制更多。经过使用表格标签进行内容的标记，可以方便地区分开各个区域，因此可以开始实现对表格各个区域的样式设定。这一节将会使用到一种表格边框属性border-collapse，来合并相邻的两个边框宽度。17.3.2定义表格边框间距表格的边框间距是通过cellpadding和cellspacing属性来控制的。cellpadding称之为表

9、格填充属性，代表单元格外面的一个距离，用于隔开单元格与单元格空间。cellspacing称为表格间距属性，代表表格边框与单元格补白的距离，也是单元格补白之间的距离17.3.3定义表格标题位置表格标题位置属性caption-side是用来定义表格标题元素显示的位置。在表格标题位置属性中，可以使用4个属性值：top、right、bottom和left来定义4个方向的标题位置。其相关属性如表17-7所示。表格标题位置属性caption-side相关属性值top、right、bottom、left17.3.4设置表格