CSS(7)列表

  CSS列表属性主要包括列表类型(list-style-type)、列表图像(list-style-image)和列表位置(list-style-position)。

一、list-style-type

  list-style-type属性用于设置列表类型(标志类型)。例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点(disc);在有序列表中,标志可能是字母(a/A/...)、数字(1/i/I...)或另外某种计数体系中的一个符号。例如,下面的声明把无序列表中的列表项标志设置为方块。

 /*将无序列表中的列表项标志设置为方块*/
  ul {list-style-type : square} 

二、list-style-image

  list-style-image属性用于设置列表的类型为一幅图片,也就是使用图像来替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。list-style-image属性的语法为:ul li {list-style-image : url(xxx.gif)},只需要简单地使用一个 url() 值,就可以使用图像作为标志。 例如,下面的声明把图像设置为列表中的项目标记:

/*把图像设置为列表中的项目标记*/
ul
  {
  list-style-image:url("/i/arrow.gif");
  list-style-type:square;
  }

说明:上面的例子将ul中li的项目标记用list-style-image属性设置为"/i/arrow.gif"这幅图片,并且使用一个list-style-type属性设置来防止图像标记不可用。

三、list-style-position

  list-style-position 属性用于设置列表项标记的位置,就是指定在何处放置列表项标记。该属性用于声明列表标志相对于列表项内容的位置,取值包括:外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义;内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。例如,下面的例子规定列表中列表项目标记的位置:

/*列表项标记在列表内容的内部*/
ul.inside 
{
list-style-position: inside
}

/*列表项标记在列表内容的外部*/
ul.outside 
{
list-style-position: outside
}

四、list-style
  list-style是各种列表属性的一个组合,是一种简写属性,它在一个声明中设置所有的列表属性。该声明涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。

/*CSS列表的简写*/
li {list-style : url(example.gif) square inside}

参考:http://www.w3school.com.cn/css/css_list.asp

 

posted @ 2012-08-30 22:50  YunshiSun  阅读(1269)  评论(0编辑  收藏  举报