|
在支持列表方面，CSS提供有list-style-type、list-style-image、list-style-position、list-style等属性，IE还提出了marker-offset属性。
1、list-style-type
我们知道有两种列表：有序列表和无序列表。有序列表用阿拉伯数字、英文字母等为标识，无序列表用“●”（在Firefox等浏览器中显示为“◆”）、“○”等来做标识。可以用list-style-type来定义列表标识，格式为：
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman
| lower-alpha | upper-alpha | none
其中各个取值的意义如下：
● disc：默认值，实心圆“●”，在Firefox等浏览器中显示为“◆”。
● circle：空心圆“○”。
● square：实心方块。
● decimal：阿拉伯数字。
● lower-roman：小写罗马数字。
● upper-roman：大写罗马数字。
● lower-alpha：小写英文字母。
● upper-alpha：大写英文字母。
● none：不使用项目符号。
在这些值中，disc、circle、square表示无序列表；decimal、upper-roman、lower-roman、upper-alpha、lower-alpha表示有序列表。
假如一个列表项目的左外补丁（margin-left）被设置为0，则列表项目标记不会被显示。所以最好把margin-left的值设置得大一些，以便容纳列表项目标记。
例如，如果希望有序列表的标识为大写罗马字母，可以这样定义：
li.upperroman {list-style-type: upper-roman}
其中<li>是有序列表中列表项的标记。
2、list-style-image
列表项标记还可以用图片来表示，这用list-style-image设置，格式为：
list-style-image: none | url(图片文件)
如果取none则不指定图像，这是默认值；用url(图片文件)可以指定图像为列表标记。
若list-style-image属性值为none，或指定url地址的图片不能被显示时，list-style-type属性才发生作用。
例如，如果想指定某幅图片为列表标记，可以这样定义：
ul{list-style-image: url(../images/css_tutorials/dot02.gif)}
其中<ul>是无序列表标记。
3、list-style-position
本属性用于设置列表项标记的排列位置，语法为：
list-style-position: outside | inside
outside是默认值，表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐；inside则设置列表项目标记放置在文本以内，且环绕文本根据标记对齐。
注意，list-style-type和list-style-position属性仅作用于display属性值等于list-item的标记，如<li>标记。
4、list-style
以上三个属性可以用一个复合属性list-style来设置，语法为：
list-style : list-style-type || list-style-image || list-style-position
其各参数的取值请参阅前面的讲解，默认值为：none disc outside，即实心圆为列表项目标记，项目标记放置在文本以外。
当list-style-image和list-style-type都被指定时，list-style-image将获得优先权。除非list-style-image设置为 none 或指定 url 地址的图片不能被显示。
【例19】下面用几种方法来实现列表，测试列表的CSS设置。
<html>
<head>
<title>itsway ---- 列表</title>
<style type = "text/css">
/*下面样式中的属性都是标准CSS支持的*/
.iddiv1{width:300px;background-color:#ffd700;font-family:verdana,tahoma;
font-size:12px; color:#000080; list-style: disc outside none;
line-height:18px; margin-left:12px;}
ol.in{display: list-item; list-style-position:outside;
list-style-type: upper-roman; background-color:#ffd700;
font-family:verdana,tahoma; font-size:12px; color:#000080;
line-height:18px;}
.iddiv2{width:300px;background-color: #ffd700;
font-family:verdana,tahoma; font-size:12px; color:#000080 ;
list-style-image: url("list-image1.gif");
line-height:18px; margin-left:5px;}
</style>
</head>
<body>
<div class = "iddiv1">
<ul>
<li>Virtue and happiness are mother and daugher.
<li>美德和幸福犹如母女。
</ul></div>
<p></p>
<ol class = "in">
<li>Cunning proceeds from want of capacity.
<li>狡诈出自于能力的缺乏。
</ol>
<p></p>
<div class = "iddiv2">
<ul>
<li style = "list-style-position:inside">When you're good to others,you are best to yourself. A true great man will neither trample on a worm,nor sneak to an emperpor.
<li style = "list-style-position:outside">善待他人，即是最善待自己。真正的伟人既不大肆践踏小人物，也不会在皇帝面前奴顔卑膝。
</ul></div>
</body>
</html>
在IE6.0以前版本的浏览器中显示的结果如下图所示。
在IE6.0及以后的版本、Firefox、Netscape中的浏览结果大致如下图所示。
可以看出，列表的图像最好设置得和背景协调，否则不太好看。而且即使都使用CSS标准设置，浏览器的显示还是略有不同。IE6.0之后的版本，有越来越遵循标准CSS规范的趋势，也许这是因为Firefox逐渐流行的原因吧。
上一篇：14、文本样式（3） 下一篇：16、超链接
|
