基础 CSS 基础版式定义列表

CSS 是 Cascading Style Sheets（层叠样式表）的缩写，用于设置网页的布局和样式。列表是网页中常用的元素，用于表示一组相关的内容，如文章的章节、商品的种类等。

在 CSS 中，可以使用样式表来定义列表的样式。具体地说，可以使用以下属性来设置列表的版式：

• list-style-type：用于设置列表项的标记类型。
• list-style-position：用于设置列表项的标记位置。
• list-style-image：用于设置列表项的自定义标记图片。

list-style-type 属性

list-style-type 属性用于设置列表项的标记类型。常用的值包括：

• disc：默认值，表示使用实心圆点作为标记。
• circle：使用空心圆作为标记。
• square：使用实心方块作为标记。
• decimal：使用数字作为标记。
• lower-alpha：使用小写字母作为标记。
• upper-alpha：使用大写字母作为标记。
• lower-roman：使用小写罗马数字作为标记。
• upper-roman：使用大写罗马数字作为标记。

示例代码：

ul {
  list-style-type: disc;
}

list-style-position 属性

list-style-position 属性用于设置列表项的标记位置。常用的值包括：

• outside：默认值，表示标记在列表项外部。
• inside：表示标记在列表项内部。

示例代码：

ul {
  list-style-position: inside;
}

list-style-image 属性

list-style-image 属性用于设置列表项的自定义标记图片。将属性值设为图片的 URL 即可。

示例代码：

ul {
  list-style-image: url('marker.png');
}

需要注意的是，list-style-image 属性不会覆盖 list-style-type 属性。如果同时指定了这两个属性，那么在支持自定义标记图片的浏览器中，将显示自定义标记图片；在不支持自定义标记图片的浏览器中，将显示 list-style-type 属性指定的标记类型。因此，建议在使用自定义标记图片时，将 list-style-type 属性设为 none，以避免出现意外效果。

示例代码：

ul {
  list-style-type: none;
  list-style-image: url('marker.png');
}

总结

通过使用 list-style-type、list-style-position 和 list-style-image 这些属性，我们可以灵活地控制列表的版式。在实际应用中，可以根据情况选择合适的标记类型、位置和图片，以使列表更加美观和易于阅读。