CSS列表样式
在web开发中，列表是常见的元素之一。在HTML中，可以使用<ul>和<ol>标签来创建无序和有序列表。然而，默认的列表样式可能不会满足设计需求，这时候就需要使用CSS来自定义列表样式。本文将介绍如何使用CSS来改变列表样式。
无序列表样式
无序列表使用<ul>标签包裹，列表项使用<li>标签包裹。默认情况下，无序列表会显示为一个实心圆点。如果想要改变列表标记的样式，可以使用CSS的list-style-type属性。
ul {
list-style-type: square;
}
在上述代码中，我们设置list-style-type为square，这样列表项的标记将显示为一个实心方块。除了square外，其他常见的无序列表样式有circle、disc等。如果想要去掉列表项的标记，可以将list-style-type设置为none。
有序列表样式
有序列表使用<ol>标签包裹，列表项也使用<li>标签包裹。默认情况下，有序列表会以阿拉伯数字作为标记。
ol {
list-style-type: upper-roman;
}
在上述代码中，我们设置list-style-type为upper-roman，这样列表项的标记将显示为大写罗马数字。除了upper-roman外，其他常见的有序列表样式有decimal、lower-alpha等。与无序列表类似，可以将list-style-type设置为none来去掉列表项的标记。
自定义列表标记
除了使用CSS内置的列表样式，还可以通过使用图片或自定义样式来设置列表标记。
要使用图片作为列表标记，可以使用background-image属性：
ul {
list-style-image: url('bullet.png');
}
在上述代码中，我们将bullet.png作为列表标记的背景图片。
如果想要自定义标记的样式，可以使用before伪元素来添加自定义内容：
ul {
list-style: none;
position: relative;
padding-left: 20px;
}
ul li:before {
content: "+";
position: absolute;
left: 0;
}
在上述代码中，我们将ul的list-style设置为none，去掉默认的列表标记。然后使用before伪元素在每个列表项前添加自定义的内容。在本例中，我们使用+作为自定义列表标记。
通过使用CSS，我们可以轻松地改变列表的样式，使其更符合设计需求。无论是调整标记样式还是使用自定义内容，都可以通过CSS来实现。
总结
本文介绍了如何使用CSS来改变列表的样式。通过设置list-style-type属性，我们可以改变无序列表和有序列表的默认标记样式。此外，还可以使用背景图片或伪元素来自定义列表标记。通过灵活运用CSS，我们可以实现各种各样的列表样式，以满足不同的设计需求。