控制列表和表格元素的显.ppt

第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所示。,17.1.3 定义标记位置,在前面介绍了关于列表符号和列表图像的应用，在实际应用中发现仅有符号或者图片是不够的，因为有的时候，需要在不同的位置来显示符号或者图片，于是引入了一个关于列表标记位置的属性。列表标记位置属性list-style-position是用来定义项目符号的显示位置的一种属性，其相关属性如表17-3所示。,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是用来定义表格标题元素显示的位置。在表格标题位置属性中，可以使用4个属性值：top、right、bottom和left来定义4个方向的标题位置。其相关属性如表17-7所示。,17.3.4 设置表格的布局,利用表格对页面进行布局是在DIV+CSS应用之前广为流行的页面布局方式，但是由于表格的固定性，不利于页面变通以及表格在嵌套时候产生的冗余代码，是很让人头疼的事情。所以当DIV+CSS发展之后，应用表格布局的方式逐渐退出了历史舞台。,