css中列表样式 css列表样式名称

CSS中的列表样式可以通过list-style属性来设置。该属性可以设置列表项的标记样式、位置和图片等。

1、标记样式：

标记样式可以是实心圆圈（disc）、空心圆圈（circle）、实心方块（square）、小写字母（lower-alpha）、大写字母（upper-alpha）、小写罗马数字（lower-roman）、大写罗马数字（upper-roman）等。默认值是实心圆圈。

示例代码：

<ul style="list-style-type: square;">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

2、标记位置：

标记位置可以是内部（inside）或外部（outside），默认值是外部。内部表示标记位于列表项文本的前面，而外部表示标记位于列表项文本的外面。

示例代码：

<ul style="list-style-position: inside;">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

3、自定义图片作为标记：

除了使用预定义的标记样式，还可以使用自定义的图片作为标记。可以通过list-style-image属性来设置，值为图片的URL。

示例代码：

<ul style="list-style-image: url('bullet.png');">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

需要注意的是，自定义图片作为标记时，建议使用透明的图片，并且图片大小适当，以免影响列表项的布局。

除了以上常用的列表样式设置，还可以通过伪元素::before和::after来进一步自定义列表样式。通过设置content属性为标记内容，再配合其他样式设置，可以实现更加丰富的列表样式效果。

总结一下，CSS中的列表样式可以通过list-style属性来设置，包括标记样式、位置和自定义图片等。可以根据需求选择合适的样式，并且通过伪元素来进一步自定义列表样式。