文章目录
CSS 列表
无序列表
有序列表
HTML 列表和 CSS 列表属性
在 HTML 中,有两种主要类型的列表:
- 无序列表 (
<ul>
) - 列表项用项目符号标记 - 有序列表 (
<ol>
) - 列表项用数字或字母标记
CSS 列表属性允许:
- 为有序列表设置不同的列表项标记
- 为无序列表设置不同的列表项标记
- 将图像设置为列表项标记
- 为列表和列表项添加背景颜色
不同的列表项标记list-style-type
list-style-type 属性指定列表项标记的类型。
以下示例显示了一些可用的列表项标记:
示例
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
注意:有些值用于无序列表,有些值用于有序列表。
图像作为列表项标记list-style-image
list-style-image 属性指定图像作为列表项标记:
示例
ul {
list-style-image: url('sqpurple.gif');
}
定位列表项标记list-style-position
list-style-position 属性指定列表项标记(项目符号)的位置。
“list-style-position: outside;” 表示项目符号将位于列表项之外。列表项每行的开头将垂直对齐。这是默认设置:
“list-style-position: inside;” 表示项目符号将位于列表项内。由于它是列表项的一部分,因此它将成为文本的一部分并将文本推到开头:
示例
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
删除默认设置list-style-type:none
list-style-type:none 属性也可用于删除标记/项目符号。请注意,列表还具有默认边距和填充。要删除此功能,请将 margin:0 和 padding:0 添加到 <ul>
或 <ol>
:
示例
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
列表 - 简写属性
list-style 属性是一个简写属性。它用于在一个声明中设置所有列表属性:
示例
ul {
list-style: square inside url("sqpurple.gif");
}
使用简写属性时,属性值的顺序为:
- list-style-type(如果指定了 list-style-image,则当图像由于某种原因无法显示时将显示此属性的值)
- list-style-position(指定列表项标记应出现在内容流内部还是外部)
- list-style-image(指定图像作为列表项标记)
如果上述属性值之一缺失,则将插入缺失属性的默认值(如果有)。
使用颜色设置列表样式
我们还可以使用颜色设置列表样式,使其看起来更有趣。
任何添加到 <ol>
或 <ul>
标签的内容都会影响整个列表,而添加到