CSS 播客 - 030:列表
假设您打算在下次要购买杂货时购买一些商品。一种常见的视觉表现方式是列表,但如何向购物清单中添加样式呢?
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
创建列表
上述列表以语义元素或 <ul>
开头,并以杂货列表项(<li>
元素)作为子项。如果您检查每个 <li>
元素,可以看到它们全都有 display: list-item
,这就是浏览器默认呈现 ::marker
的原因。
li {
display: list-item;
}
还有两种其他类型的列表。
可以使用 <ol>
创建有序列表,在这种情况下,列表项会将数字显示为 ::marker
。
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
说明列表是使用 <dl>
创建的,但此列表类型不使用 <li>
列表项元素。
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
列表样式
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
现在,您已经知道如何创建列表,可以设置列表的样式了。首先要发现的 CSS 属性是应用于整个列表的属性。
您可以使用以下三种列表样式属性来设置示例的样式:list-style-position
、list-style-image
和 list-style-type
。
list-style-position
借助 list-style-position
,您可以将项目符号移动到 inside
或 outside
列表项的内容。默认的 outside
表示列表项内容不包含项目符号,而 inside
在列表项内容中移动第一个元素。
list-style-image
list-style-image
可让您将列表的项目符号替换为图片。这样,您就可以设置 url
或 none
等图片,将项目符号变成图片、svg 或 gif 格式。您还可以使用任何媒体类型,甚至是数据 URI。
我们来看看如何将每种杂货项的图片添加为 list-style-image
:
list-style-type
最后一个选项是设置 list-style-type
的样式,这会将项目符号更改为已知的关键字样式、自定义字符串、表情符号等。您可以在此处查看所有可能的列表样式类型。
list-style
简写形式
现在,您已经拥有了所有这些单独的属性,接下来可以使用 list-style
简写形式在一行中设置所有列表样式:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
可让您以任意顺序声明 1 个、2 个或 3 个 list-style
属性的组合。如果 list-style-type
和 list-style-image
均已设置,则在图片不可用时,list-style-type
将用作后备方案。
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
这是本部分介绍的列表样式中最常用的属性。一种常用的应用是使用 list-style: none
来隐藏默认样式。默认样式来自浏览器,重置样式表经常移除内边距和外边距等列表样式。您也可以使用此简写形式设置样式,例如 list-style: square inside;
到目前为止,所举示例都是侧重于设置整个列表和列表项的样式,但如果采用更精细的方法呢?
::marker
伪元素
list-item
标记元素是项目符号、连字符或罗马数字,有助于指示列表中的每一项。
如果您在开发者工具中检查列表,则可以看到每个列表项的 ::marker
元素,尽管未在 HTML 中声明任何元素。如果您进一步检查 ::marker
,会看到它的浏览器默认样式。
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
声明列表时,尽管 HTML 中不含项目符号或罗马数字,但每个项目都会获得一个标记。这是一个伪元素,因为浏览器会为您生成它,并提供一个有限的样式 API 来定位它。详细了解 CSS 项目符号。::marker
在 Safari 中的支持有限。
标记框
在 CSS 布局模型中,列表项标记由与每个列表项关联的标记框来表示。标记框是一个容器,通常包含项目符号或编号。
如要设置标记框的样式,您可以使用 ::marker
选择器。这样,您就可以只选择标记,而不是根据整个列表进行样式设置。
标记样式
现在您已经选择了标记,我们来看一看此选择器可用的样式属性。如需详细了解使用 CSS ::marker 的自定义项目符号,请访问 web.dev。
有以下几个允许的 CSS ::marker
属性:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
屏幕类型
所有的 list-style
和 ::marker
属性都知道设置 <li>
元素的样式,因为它们的默认显示值为 list-item。您还可以将非 <li>
的内容变为列表项。
为此,您可以添加 display: list-item
属性。例如,如果您想在标题上添加悬挂式项目符号,以便使用 ::marker
将其更改为其他内容,则可以使用 display: list-item
。以下示例展示了使用 display: list-item
进行样式设置的标题,以及使用正确列表标记的列表。
虽然您可以使用 display
将任何内容转换为列表项视图,但如果您正在设置样式的内容确实是一个列表,则您不应使用此参数,而是使用正确的列表标记。将某项的视觉外观更改为列表项不会改变无障碍服务读取和识别该项的方式,因此屏幕阅读器或切换设备时,系统不会将其作为列表项读出。您应始终使用语义标记并尽可能使用 <li>
创建列表。
检查您的理解情况
测试您对列表的掌握情况
列表项之前的元素称为
::bullet
::marker
::pencil
::counter
HTML 列表有三种类型,
<ol>
<lo>
<dl>
<ul>
<list>
<li>
此列表中的哪两种样式会将样式应用于 ::marker
?
color
background-color
transition
display