CSS样式之列表属性介绍

我们在写文章的时候，为了便于读者阅读，通常会使用列表来表达，网页也不例外。列表的样式在一定程度上影响着整篇文档给读者的视觉效果，合理适当地设置列表样式能使列表看起来给人一种与众不同的感觉，从而提高了网站的观赏性。下面，小编将向大家介绍一下css列表样式相关属性的情况。

一、列表和列表属性的相关概念

1.列表

　　从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表，如人口普查、太阳系、家谱、参观菜等等。

2.列表属性

　　简单来说，列表属性就是改变列表项标志，标志放置位置等的属性

　　但遗憾的是，在CSS中，列表样式不太丰富，主要应用于列表标志的设置上。

二、列表相关属性

　　要改变列表的样式，最粗暴直接的方法就是改变其标志类型。

　　标志就是出现在各列表项前面的符号。如无序列表中的圆点、方框；有序列表中的字母或数字等。如下图显示的就是无序列表的标志。

列表标志

1.list-style-type属性

　　这个属性用于修改列表项的标志类型

　　ul {list-style-type : square}

　　上面的规则就是把无序列表中的列表项标志设置为方块

2.list-style-image 属性

　　当常规的标志不够用时，我们可以考虑使用一张图像来作为标志，这时使用list-style-image 属性，加上一个简单的url()值，就可以实现了。

代码如下:

　　ul li {list-style-image : url(cat.gif)}

3. list-style-position属性

　　该属性在CSS2.1中主要应用于确定标志出现在列表项内容之外还是内容内部。其值为inside和outside。

　　三、简写列表样式

　　为了简化代码,我们可以把以上3个列表样式属性合并为一个方便的属性。

list-style就像这样：

　　li {list-style : url(example.gif) square inside}

　　list-style的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

　　最后把列表相关属性汇总如下:

列表属性汇总表

　　在CSS中,虽然列表样式不太丰富,但通过合理灵活使用,将会给你的列表带来与众不同的效果.所以相信大家看完这个教程之后，都想自己尝试一下，如给无序列表定义不同类型的列表标记等等,或许会有意想不到的收获喔!

标签： CSS教程属性 CSS代码