CSS控制列表样式属性list

CSS列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。 样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。

CSS列表样式分为有序列表、无序列表和定义列表。

有序列表是按照顺序排列如12345、ABCDE等；

无序列表包含圆点、方块、空心圆等。

CSS列表属性样式常见语法如下：

1、 控制显示：display

语法：{display:none|block|inline|list-item}

作用：改变元素的显示值，可以将元素类型线上，块和清单项目相互变换。

说明：

2、控制空白：white-space

语法：{white-space:normal|pre|nowarp}

作用：控制元素內的空白。

说明：

3、符号列表：list-style-type

语法：{list-style-type:none|disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha}

作用：指定清单所用的强调符或编号类型

说明：

例子：

4、图片列表：list-style-image

语法：{list-style-image:URL}

作用：用于将清单中标准强调符换成所选的图形

说明： ·url - 图形URL地址

例子：

语法：{list-style-position:inside|outside}

作用：用于设置强调符的缩排或伸排，这个属性可以让强调符突出于清单以外或与清单项目对齐。

说明：

6、 目录列表：list-style

语法：{list-style:目录样式类型|目录样式位置|url}

作用：目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写

说明：

注意：这些值的细节见各个属性部分。

例子：

7、鼠标形状cursor

语法：{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

作用：CSS提供了多达13种的鼠标形状，供我们选择。

说明：

可参阅W3Cschool官网上的《CSS 列表样式(ul)》及《CSS list-style 属性》

● list-style

定义:

用于在一个声明中设置一个列表的所有属性的简写属性，该属性是一个简写属性，涵盖了所有其他列表样式属性，仅作用于具有display值等于list-item的对象(如li对象)。

相关 : list-style-image || list-style-position || list-style-type

● list-style-image

说明:

设置或检索作为对象的列表项标记的图像。若此属性值为 none 或指定 url 地址的图片不能被显示时，list-style-type 属性将发生作用。

取值:

● list-style-position

说明:

设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁( margin-left )被设置为 0 ，则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。

取值:

● list-style-type

说明:

设置或检索对象的列表项所使用的预设标记。若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时，此属性将发生作用。

取值:

使用背景图片改变列表符

改变列表符位置

list-style-position: