|
序号 中文说明 标记语法 备注 1 控制空白 {white-space:normal|pre|nowarp} 2 控制显示 {display:none|block|inline|list-item} 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:目录样式类型|目录样式位置|url} 6 位置列表 {list-style-position:inside|outside} 7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉。 样式表为列表增加了一些功能,控制列表的样式包括列表样式、图形符号、列表位置三个部分。
1.控制空白:white-space
语法:{white-space:normal|pre|nowarp} 作用:控制元素內的空白。 说明: ·normal 不改变,保持缺省值,在浏览器页面长度处换行。 ·pre 要求文档显示中采用源代码中的格式。 ·nowarp 不让访问者在元素內换行。 2. 控制显示:display
语法:{display:none|block|inline|list-item} 作用:改变元素的显示值,可以将元素类型线上,块和清单项目相互变换。 说明: ·none 不显示元素 ·block 块显示,在元素前后设置分行符 ·inline 删除元素前后的分行符,使其并入其它元素流中 ·list-item 将元素设置为清单中的一行 注意:可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。
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 } OL OL { list-style-type: decimal } OL OL OL { list-style-type: lower-roman } 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
语法:{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 }
6. 位置列表:list-style-position
语法:{list-style-position:inside|outside} 作用:用于设置强调符的缩排或伸排,这个属性可以让强调符突出于清单以外或与清单项目对齐。 说明: ·inside - 缩排,将强调符与清单项目内容左边界对齐 ·outside - 伸排,强调符突出到清单项目内容左边界以外
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 左下箭头形
|