在CSS中,我们可以使用list-style
属性来设置列表项的样式,如无序列表(<ul>
)和有序列表(<ol>
)。
ul { list-style: disc; } ol { list-style: decimal; }
以上代码设置无序列表项为实心圆点(disc),有序列表项为数字(decimal)。
除了这两种常见的样式值,list-style
属性还有其他值可用:
ul { list-style: none; } ol { list-style: upper-roman; }
none
值可以让列表项不显示任何标志符,upper-roman
值可以让有序列表项以大写罗马数字表示。
除了以上所述的三个样式值外,还有其他的样式值可用,如circle
、square
、lower-alpha
、lower-roman
、upper-alpha
和disclosure-closed
等等。
ul { list-style: circle; } ol { list-style: lower-roman; }
以上代码设置无序列表项为圆圈(circle),有序列表项为小写罗马数字(lower-roman)。
需要注意的是,list-style
属性是一个简写属性,可以设置三个值分别为:list-style-type
、list-style-image
和list-style-position
,分别表示标志符的类型、图片和位置。
ul { list-style-type: disc; list-style-image: none; list-style-position: inside; } ol { list-style-type: decimal; list-style-image: url("bullet.png"); list-style-position: outside; }
以上代码将无序列表项的标志符设置为实心圆点(disc),背景图片为无,位置为列表项内部(inside);有序列表项的标志符设置为数字(decimal),背景图片为一个名为bullet.png
的图片,位置为列表项外部(outside)。
总之,list-style
属性是一个非常有用的CSS属性,可以帮助我们灵活地控制列表项的样式。