网站列表list属性介绍

2015-10-23 00:00:00140

 网站列表list属性介绍

css标准允许控制列表元素的外观-尤其是有序和无序列表。

浏览器会你格式化任何其他块项目一样格式化列表项,除了这个块的内容前面有一些排序记号外。对无序列表来说,这个记号是某种分类记号;对编号来说,这个记号是数字或阿拉伯字母或符号。css列表属性允许控制列表项记号的外观和位置。

list-style-image属性

list-style-image属性定义了浏览器用来标记一个列表项的图像。这个属性值是一个图像文件的url或者关键字none。默认值是none。

图像是较受欢迎的列表记号。如果它可以使用,浏览器将显示这个图像来替代任何其他定义的记号。如果图像不可使用或者如果用户禁止调用图像,将使用list-style-type属性定义的记号。

HTMl/XHTML作者可以使用list-style-image属性来给无序列表定义定制的项目符号。当任何图像可以用作项目符号时,我们建议使记号GIF或JPEG图像尺寸很小以确保有效地显示列表。例如,通过在服务器上的文件mybullet.gif中放置需要的项目符号图像,就可以使用那个图像:

li{list-style-image:url(pics/mybullet.gif); list-style-type:square}

在这个示例中,如果浏览器能够成或下载mybullet.gif,那么将使用这个图像。否则,浏览器将使用一个常规的方块形项目符号。

list-style-position属性

有两种方法可用来定位与一个列表项有关的记号:在与项目有关的块外面或里面。因此,list-style-position属性接受以下两个值之一:inside(内部)或outside(外部)。

默认值是outside,表示这个项目记号将悬挂于这一项的左侧,这个项目列表使用的是“outside”标记。inside值使得列表项围绕着这个记号,很像一个悬浮图像:这个项目列表使用的是“inside”标记,注意文本第二行不会缩进,反而与记号的左边缘对齐。

list-style-type属性有双重任务,决定了有序和无序列表项如何显示在能识别样式的浏览器上。这个属性对列表项的效果与type属性一样。

用于无序列表项时,list-style-type属性接受以下4个值之一:disc、circle、square或none。浏览器用相应的方法来给元序列表项做标记。默认值是disc;浏览器根据列表的嵌套层来改变默认值。

用于有序列表项时,list-style-type属性接受以下6个值之一:decimal、lower-roman、upper-roman、lower-alpha、upper-alphan或none。这些值分别把项目编后格式化为十进制值、小写罗马数字、大写罗马数字、小写字母或大写字母。大部分浏览器都默认使用十进制编号策略。

list-style属性

list-style属性是所有其他列表类型属性的缩略形式,可以按照任何顺序接受用于list-style-type、list-style-position和list-style-image属性的值。以下是有效的list-stle属性:

li{list-style: disc}

li{list-style: lower-roman imside}

li{list-style: url(路径)square}