CSS2 样式表(属性·列表)

最新推荐文章于 2023-04-25 23:57:05 发布

vinceding

最新推荐文章于 2023-04-25 23:57:05 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css url 脚本浏览器

本文链接：https://blog.youkuaiyun.com/vince6799/article/details/1854731

CSS 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了CSS中列表样式的设置方法，包括list-style、list-style-image、list-style-position及list-style-type等属性的使用技巧，并提供了多个示例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、list-style

语法：
list-style : list-style-image || list-style-position || list-style-type
取值：
该属性是复合属性。请参阅各参数对应的属性。
默认值为：disc outside none。

说明：
设置列表项目相关样式。
当 list-style-image 和 list-style-type 都被指定了时， list-style-image 将获得优先权。除非 list-style-image 设置为 none 或指定 url 地址的图片不能被显示。
对应的脚本特性为 listStyle 。

示例：

li { list-style: url("http://www.dhtmlet.com/devgurupix.gif") inside circle; }
ul { list-style: outside upper-roman; }
ol { list-style: square; }

2、list-style-image

语法：
list-style-image : none | url ( url )
取值：
none : 默认值。不指定图像
url ( url ) : 使用绝对或相对 url 地址指定图像

说明：
设置或检索作为对象的列表项标记的图像。
若此属性值为 none 或指定 url 地址的图片不能被显示时， list-style-type 属性将发生作用。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 listStyleImage 。

示例：

ul.out { list-style-position: outside; list-style-image: url("images/ie.gif"); }

3、list-style-position

语法：
list-style-position : outside | inside
取值：
outside : 默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside : 列表项目标记放置在文本以内，且环绕文本根据标记对齐

说明：
设置或检索作为对象的列表项标记如何根据文本排列。
假如一个列表项目的左外补丁( margin-left )被设置为 0 ，则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。
仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。
注意： ol 对象和 ul 对象的 type 属性为其后的所有列表项目(如 li 对象)指明列表属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 listStylePosition 。

示例：

ul.in { display: list-item; list-style-position: inside; }

4、list-style-type

说明：
设置或检索对象的列表项所使用的预设标记。
若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时，此属性将发生作用。
假如一个列表项目的左外补丁( margin-left )被设置为 0 ，则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。
仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。
注意： ol 对象和 ul 对象的 type 属性为其后的所有列表项目(如 li 对象)指明列表属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 listStyleType 。

示例：

ul.in { display: list-item; list-style-position: inside; }

5、marker-offset

语法：
marker-offset : auto | length
取值：
auto : 默认值。浏览器自动设置间距
length : 由浮点数字和单位标识符组成的长度值。可为负值。请参阅长度单位

说明：
设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距。
作用于 display 属性值为 marker 的元素。
对应的脚本特性为 markerOffset 。

示例：

li:before { display: marker; marker-offset: 5px; }