207 lines
6.0 KiB
Markdown
207 lines
6.0 KiB
Markdown
---
|
||
title: Styling Lists
|
||
localeTitle: 样式列表
|
||
---
|
||
## 样式列表
|
||
|
||
### HTML列表回顾
|
||
|
||
HTML中有两种主要类型的列表 - **有序**和**无序** 。
|
||
|
||
在**有序**列表（ `<ol></ol>` ）中，列表项的顺序很重要。这些项目可以按数字，罗马数字，字母数字或其他类型的标记顺序出现。有序列表的默认标记是数字（或`decimal` ）：
|
||
|
||
> 
|
||
|
||
在**无序**列表（ `<ul></ul>` ）中，列表项的顺序无关紧要。项目以项目符号格式显示。无序列表的默认标记是圆形项目符号或`disc` 。
|
||
|
||
> 
|
||
|
||
使用`<li></li>`标记创建有序或无序列表中的每个列表项。
|
||
|
||
### 列表特定样式
|
||
|
||
特定于样式列表的常用属性有三种： `list-style-type` ， `list-style-position`和`list-style-image` 。还有一个速记属性，包括所有三个。
|
||
|
||
#### `list-style-type`
|
||
|
||
出现在有序和无序列表中的标记（或项目符号点）可以通过多种方式设置样式。用于样式化标记类型的CSS属性是`list-style-type` 。有序列表的默认`list-style-type`值是`decimal` ，而无序列表的默认值是`disc` 。
|
||
|
||
有序列表示例：
|
||
|
||
> ```css
|
||
> /* css */
|
||
> ol {
|
||
> list-style-type: upper-roman;
|
||
> }
|
||
>
|
||
> ```
|
||
>
|
||
> 
|
||
|
||
无序列表示例：
|
||
|
||
> ```css
|
||
> /* css */
|
||
> ul {
|
||
> list-style-type: square;
|
||
> }
|
||
>
|
||
> ```
|
||
>
|
||
> 
|
||
|
||
没有标记示例：
|
||
|
||
> ```css
|
||
> /* css */
|
||
> ul {
|
||
> list-style-type: none;
|
||
> }
|
||
>
|
||
> ```
|
||
>
|
||
> 
|
||
|
||
`list-style-type`属性的可接受值包括：
|
||
|
||
_无序：_
|
||
|
||
* 光盘（ _默认_ ）
|
||
* 圈
|
||
* 广场
|
||
|
||
_排序：_
|
||
|
||
* 十进制（ _默认_ ）
|
||
* 小数领先的零
|
||
* 低罗马
|
||
* 上罗马
|
||
* 降低希腊
|
||
* 较低的拉丁
|
||
* 上拉丁
|
||
* 亚美尼亚
|
||
* 格鲁吉亚
|
||
* 下-α
|
||
* 上-α
|
||
|
||
_其他：_
|
||
|
||
* 没有
|
||
|
||
注意：上面列出的所有属性值都可用于为有序列表和无序列表设置样式（例如：带有`square`列表标记的有序列表）。
|
||
|
||
#### `list-style-position`
|
||
|
||
`list-style-position`控制列表标记是出现在每个列表项元素的内部还是外部（ `<li></li>` ）。该属性接受两个值， `outside` （默认）或`inside` 。
|
||
|
||
将标记`outside`列表项元素`outside` ，每个列表项的所有文本行和子行将垂直对齐：
|
||
|
||
> ```css
|
||
> /* css */
|
||
> ul {
|
||
> list-style-position: outside; /* default */
|
||
> }
|
||
>
|
||
> ```
|
||
>
|
||
> 
|
||
|
||
将标记`inside` ，每个列表项的第一个文本行将缩进，以便为标记腾出空间。相同列表项的任何子行都将与标记对齐，而不是与第一个文本行对齐：
|
||
|
||
> ```css
|
||
> /* css */
|
||
> ul {
|
||
> list-style-position: inside;
|
||
> }
|
||
>
|
||
> ```
|
||
>
|
||
> 
|
||
|
||
#### `list-style-image`
|
||
|
||
`list-style-image`属性接受图像URL代替列表标记。此属性的默认值为`none` 。
|
||
|
||
> ```css
|
||
> /* css */
|
||
> ul {
|
||
> list-style-image: url(https://url-to-image);
|
||
> }
|
||
>
|
||
> ```
|
||
|
||
#### `list-style`速记
|
||
|
||
`list-style`是上面列出的三个样式属性的简写属性。 `list-style`接受的值的顺序是`list-style-type` ， `list-style-position`和`list-style-image` 。如果省略任何值，将使用该属性的默认值。
|
||
|
||
> 例：
|
||
>
|
||
> ```css
|
||
> /* css */
|
||
> ul {
|
||
> list-style: circle inside none;
|
||
> }
|
||
>
|
||
> ```
|
||
>
|
||
> 
|
||
|
||
#### 更多列表特定的样式
|
||
|
||
有序列表标签还接受控制其列表项的流量，计数或特定标记值的属性。这些包括`start` ， `reversed`和`value`属性。有关更多详细信息，请参阅下面列出的MDN资源。
|
||
|
||
### 一般造型
|
||
|
||
列表内容可以像其他`p`或`div`元素一样进行样式设置。 `color` ， `font-family` ， `margin` ， `padding`或`border`只是可以添加到`ul` ， `ol`或`li`元素的属性的几个示例。
|
||
|
||
请注意，添加到`ul`或`ol`元素的任何样式都将影响整个列表。直接添加到`li`元素的样式将影响单个列表项。在下面的示例中，border和background-color属性在list和list item元素之间的样式不同：
|
||
|
||
> ```css
|
||
> /* css */
|
||
> ul {
|
||
> list-style-type: circle;
|
||
> border: 2px solid blue;
|
||
> background-color: lightblue;
|
||
> }
|
||
> li {
|
||
> margin: 5px;
|
||
> background-color: lightyellow;
|
||
> }
|
||
>
|
||
> ```
|
||
>
|
||
> 
|
||
|
||
#### 列表间距
|
||
|
||
当`list-style-type`设置为`none`时，您可能会注意到列表项前面有额外的间距。在list元素上将`padding`设置为`0` （或者首选任何间距）将覆盖此默认填充。
|
||
|
||
> ```css
|
||
> /* css */
|
||
> ul {
|
||
> list-style: none;
|
||
> padding: 0;
|
||
> }
|
||
> li {
|
||
> padding: 5px 10px;
|
||
> background-color: #EEEEEE;
|
||
> border: 1px solid #DDDDDD;
|
||
> }
|
||
>
|
||
> ```
|
||
>
|
||
> 
|
||
|
||
* * *
|
||
|
||
#### 资料来源：
|
||
|
||
下面的链接在本文中的编译信息中引用。有关此主题的更多详细信息，请访问它们。
|
||
|
||
#### 更多信息：
|
||
|
||
[MDN - 样式列表](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
|
||
|
||
[W3Schools - CSS列表](https://www.w3schools.com/css/css_list.asp)
|
||
|
||
[CSS技巧 - 列表样式](https://css-tricks.com/almanac/properties/l/list-style/) |