css列表样式
css列表样式
关键词：css列表样式
| 序号 | 中文说明 | 标记语法 |
| 1 | 控制显示 | {display:none|block|inline|list-item} |
| 2 | 控制空白 | {white-space:normal|pre|nowarp} |
| 3 | 符号列表 | {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} |
| 4 | 图形列表 | {list-style-image:URL} |
| 5 | 位置列表 | {list-style-position:inside|outside} |
| 6 | 目录列表 | {list-style:目录样式类型|目录样式位置|url} |
| 7 | 鼠标形状 | {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize} |
列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。
样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。
| 1. 控制显示：display |
语法：{display:none|block|inline|list-item}
作用：改变元素的显示值，可以将元素类型线上，块和清单项目相互变换。
说明：
·none 不显示元素
·block 块显示，在元素前后设置分行符
·inline 删除元素前后的分行符，使其并入其它元素流中
·list-item 将元素设置为清单中的一行
注意：可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。
| 2、控制空白：white-space |
语法：{white-space:normal|pre|nowarp}
作用：控制元素內的空白。
说明：
·normal 不改变，保持缺省值，在浏览器页面长度处换行。
·pre 要求文档显示中采用源代码中的格式。
| 3、符号列表：list-style-type |
语法：{list-style-type:none|disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha}
作用：指定清单所用的强调符或编号类型
说明：
·none - 无强调符
·disc - 碟形强调符(实心圆)
·circle - 圆形强调符(空心圆)
·square - 方形强调符(实心)
·decimal - 十进制数强调符
·lower-roman - 小写罗馬字强调符
·upper-roman - 大写罗馬字强调符
·lower-alpha - 小写字母强调符
·upper-alpha - 大写字母强调符
例子：
LI.square { list-style-type: square }
UL.plain { list-style-type: none }
OL { list-style-type: upper-alpha } /* A B C D E etc. */
OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
| 4、图片列表：list-style-image |
语法：{list-style-image:URL}
作用：用于将清单中标准强调符换成所选的图形
说明：
·url - 图形URL地址
例子：
UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x { list-style-image: url(x.png) }
| 5. 位置列表：list-style-position |
语法：{list-style-position:inside|outside}
作用：用于设置强调符的缩排或伸排，这个属性可以让强调符突出于清单以外或与清单项目对齐。
说明：
·inside - 缩排，将强调符与清单项目内容左边界对齐
·outside - 伸排，强调符突出到清单项目内容左边界以外
| 6. 目录列表：list-style |
语法：{list-style:目录样式类型|目录样式位置|url}
作用：目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写
说明：
·list-style-type
·list-style-position
·list-style-image
注意：这些值的细节见各个属性部分。
例子：
LI.square { list-style: square inside }
UL.plain { list-style: none }
UL.check { list-style: url(/LI-markers/checkmark.gif) circle }
OL { list-style: upper-alpha }
OL OL { list-style: lower-roman inside }
| 7．鼠标形状cursor |
语法：{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
作用：CSS提供了多达13种的鼠标形状，供我们选择。
说明：
·hand 手形
·crosshair 十字形
·text 文本形
·wait 沙漏形
·move 十字箭头形
·help 问号形
·e-resize 右箭头形
·n-resize 上箭头形
·nw-resize 左上箭头形
·w-resize 左箭头形
·s-resize 下箭头形
·se-resize 右下箭头形
·sw-resize 左下箭头形
