CSS 列表属性 List
CSS 列表属性(List)
用于 | 属性名 | CSS 版本 |
---|---|---|
① 简写属性, 在一个声明中,一次性设置 所有的 列表属性。 | list-style | 1 |
② 将 列表项标记 设置为图像。 | list-style-image | 1 |
③ 列表项标记的 放置位置。设置 列表项标记的 相对位置 (相对于列表项,适用于 列表项标记 符号/图像) | list-style-position | 1 |
④ 列表项标记的 符号类型 (实心圆,空心圆等)。 | list-style-type | 1 |
1. list-style 属性: 设置 列表样式 (简写属性)
- ⑴ 设置 列表样式:
list-style
- 在一个声明中,一次性设置 所有的列表属性。
- 简写属性: 是设置 以下属性的 简写属性
list-style-type
list-style-position
list-style-image
- ⑵ 列表样式的 适用对象
- ① 列表项,一般
<li>
标签- 所有
display: list-item;
的元素 - 默认情况下 是
<li>
标签.
- 所有
- ② 列表项的父元素:
<ol>
,<ul>
- 继承性: 因为该属性是 继承的,所以可以 在父元素上 设置它
- 一般是 有序列表
<ol>
标签 和 无序列表<ul>
标签 - 父元素, 会将 相同的列表样式 应用于其中的所有 列表项。
- 一般是 有序列表
- 继承性: 因为该属性是 继承的,所以可以 在父元素上 设置它
- ① 列表项,一般
- ⑶
list-style
属性值的个数 和 顺序- ① 顺序: 以 任何顺序 (无顺序要求)
- ② 个数: 1~3 个值,可接受 1 个值,2 个值 或者 3 个值
- 未设置的属性: 使用 默认值。
- 3个属性 默认值:
disc outside none
- 3个属性 默认值:
- 同时设置了 列表项类型和图像:
list-style-type
,list-style-image
- 优先使用: 列表项图像
- 回退: 列表项图像 不可用时,列表项类型 才作为 回退 使用.
- 未设置的属性: 使用 默认值。
- ⑷ 列表样式的 语法
list-style: none|list-style-type | list-style-position | list-style-image|inherit;
/* 列表项类型 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: unset;
- ⑸ 列表样式的 属性值
- ① 列表项标记的 符号类型:
list-style-type
- 设置 列表项标记的 类型。
- ② 列表项标记的 位置:
list-style- position
- 设置 在何处放置 列表项标记。
- ③ 列表项标记 图像:
list-style-image
- 使用 图像来替换 列表项的标记。
- ④ 继承父亲:
inherit
- 从 父元素 继承
list-style
属性的值。
- 从 父元素 继承
- ⑤ 不使用 列表项样式:
none
- ① 列表项标记的 符号类型:
- ⑹ 可访问性问题
- 不识别为列表: Safari 中,如果 无序列表 设置为
list-style: none;
,则不会 在可访问性树中 将其识别为列表。 - 解决办法:
- 伪内容: 在每个列表项之前 添加一个 零宽度的空间 作为伪内容,以确保 正确识别 列表。
\u200b
字符 = 0宽度的空格 = Zero width space (没有宽度的空格)- 确保设计不受 bug 修复的影响,并且 不会对列表项 进行不恰当的描述。
- 不识别为列表: Safari 中,如果 无序列表 设置为
ul{
list-style: none;
}
ul li::before{
content:"\200B";
}
- ⑺ 列表样式的 浏览器支持
- 示例1: 给一个 无序列表 设置列表项
- css
.fruit{
list-style: square outside url("https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg");
border: solid #000000;
width: 30%;
}
.fruit li{
background-color: #e8ffec;
width: 25%;
}
- html
<ul class="fruit">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>葡萄</li>
</ul>
1.1 list-style-type 属性: 列表项的 标记符号 (实心圆,空心圆等)
- ⑴ 列表项的 标记符号:
list-style-type
- 设置 列表项元素的 标记符号
marker
- 标记的颜色
- 将与它 所应用的元素的计算颜色 相同。
- 设置 列表项元素的 标记符号
- ⑵
list-style-type
的 适用对象- ① 默认元素:
<li>
,<summary>
- 默认是
display:list-item
。
- 默认是
- ② 设置为 列表项的元素
- 可以应用于 任何元素,只要
display: list-item
= 列表项元素
- 可以应用于 任何元素,只要
- ③ 列表项的父元素
- 此外,由于此属性是 继承的,因此可以 在列表项的父元素上
list-style-type
设置它 , 这样 使其应用于 所有列表项。 - 最常见的 默认的列表项的 父元素:
<ul>
,<ol>
标签
- 此外,由于此属性是 继承的,因此可以 在列表项的父元素上
- ① 默认元素:
- ⑶ 列表样式 类型的 语法
list-style-type
:disc|none|circle|square |decimal|decimal-leading-zero|lower-roman|upper-roman |lower-alpha|upper-alpha|lower-greek|lower-latin|upper-latin|hebrew|armenia|georgian|cjk-ideographic|hiragana |katakana|hiragana-iroha|katakana-iroha|inherit;
/* 部分类型值 Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;
/* 字符串值 <string> value */
list-style-type: '-';
/* 与@counter样式规则匹配的标识符 Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;
/* 关键字值 Keyword value */
list-style-type: none;
/* 全局值 Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;
- ⑷ 列表样式类型的 属性值 取值
- 以下值的 任意一种:
- ① 一个自定义标识符
<custom-ident>
值- identifier,美 /aɪˈdentɪfaɪər/, 标识符
- 与 自定义计数器样式 @counter-sytle 或预定义样式之一的值 匹配的标识符
- 自定义计数器的浏览器支持 还不好
- ② 一个 symbols() 值
- CSS函数 允许 定义计数器样式,直接作为 列表样式等属性的值
- 目前支持还不好
- ③ 一个 字符串
<string>
值- 目前支持度 还不好
- ④ 关键字值 和
none
.
- ⑸ 列表样式 类型的 常用 关键字 属性值
- ① 无列表项 标记:
none
- 定义这个关键字,就不显示 列表项的标记符号
- 使用这个关键字,要注意兼容 Firefox的bug,见
list-style
属性的介绍
- ② 其他 40个 关键字值,如下
- 越靠前,使用的越多,有些属性值 虽然是实验中属性,但是已经被 很多新浏览器支持了
- 一些支持度不好的 属性值,没有写在这里
- 点击查看 关键字值的 浏览器支持
- ① 无列表项 标记:
① 实心圆 disc | ② 空心圆 circle |
---|---|
![]() | ![]() |
③ 实心方块 square, 美 /skwer/ | ④ 数字 decimal 美 ['dɛsɪml] 十进制 阿拉伯数字, 从1开始 |
![]() | ![]() |
⑤ 0 开头的 数字 decimal-leading-zero (01, 02, 03, … 98, 99) | ⑥ 小写 罗马数字 lower-roman (i, ii, iii, iv, v, 等。) |
![]() | ![]() |
⑦ 大写 罗马数字 upper-roman (I, II, III, IV, V, 等。) | ⑧ 小写 英文字母 lower-alpha (a, b, c, d, e, 等。) |
![]() | ![]() |
⑨ 大写 英文字母 upper-alpha 美 ['ælfə] (A, B, C, D, E, 等。) | ⑩ 小写 希腊字母 lower-greek [grik] (α, β, γ…读作 alpha, beta, gamma, 等。) |
![]() | ![]() |
⑪ 小写 拉丁字母/英文字母 lower-latin 美 /ˈlætn/ (a, b, c, d, e, 等。) | ⑫ 大写 拉丁字母/英文字母 upper-latin (A, B, C, D, E, 等。) |
![]() | ![]() |
⑬ 简体中文 正式编号/简体大写 simp-chinese-formal / -moz-simp-chinese-formal | ⑭ 简体中文 非正式编号/简体小写 simp-chinese-informal |
![]() ![]() | ![]() ![]() |
⑮ 中国传统的正式编号 / 繁体大写 trad-chinese-formal | ⑯ 中国传统的非正式编号 / 繁体小写 trad-chinese-informal (没有繁体的,看不出区别) |
![]() | ![]() |
⑰ 亚美尼亚 编号 armenian [ɑ:'mi:njən] (ayb/ayp, ben/pen, gim/keem…) | ⑱ 乔治亚 编号 georgian 美 /ˈdʒɔːrdʒən/ (an, ban, gan, 等。) |
![]() | ![]() |
⑲ 希伯来 编号 hebrew 美 /ˈhiːbruː/ | ⑳ 中日韩 表意数字 cjk-ideographic 美 /,ɪdɪə'græfɪk/ (一,二,三...) cjk :Chinese Japanese Korean |
![]() | ![]() |
① 平假名 字符 (日语表音) hiragana 美 /ˌhɪrəˈɡɑːnə/ a, i, u, e, o, ka, ki, 等。 | ② 片假名 字符 katakana 美 ['kɑtə'kɑnə] A, I, U, E, O, KA, KI, 等。 |
![]() | ![]() |
③ 平假名 序号 hiragana-iroha :i, ro, ha, ni, ho, he, to, 等。 | ④ 片假名 序号 katakana-iroha I, RO, HA, NI, HO, HE, TO, 等。 |
![]() | ![]() |
⑤ kannada (印)坎那达语 火狐需要 前缀 -moz | ⑥ khmer 高棉语 火狐需要 前缀 -moz |
![]() ![]() | ![]() ![]() |
⑦ 韩语字母符号 korean-hangul-formal 일만 일천일백일십일 | ⑧ 正式的韩文编号 korean-hanja-formal 壹萬 壹仟壹百壹拾壹 |
![]() | ![]() |
⑨ 非正式/简写的 韩文编号 korean-hanja-informal | ⑩ 老挝语 lao |
![]() | ![]() |
⑪ 小写 亚美尼亚 编号 lower-armenian | ⑫ 大写 亚美尼亚语 upper-armenian |
![]() | ![]() |
⑬ 蒙古语 mongolian | ⑭ 缅甸语 Myanmar / -moz-myanmar |
![]() | ![]() |
⑮ 奥里雅语 oriya / -moz-oriya | ⑯ 波斯语 persian /-moz-persian |
![]() | ![]() |
⑰ 泰卢固语(印度东部德拉维拉语言) telugu | ⑱ 泰国语 thai /-moz-thai |
![]() | ![]() |
⑲ 西藏语 tibetan | ⑳ 马拉雅拉姆语 -moz-malayalam |
![]() | ![]() |
1.2 list-style-position 属性: 设置 列表项标记的 相对位置 (相对于列表项,适用于 列表项标记 符号/图像)
- ⑴ 设置 列表项标记的 相对位置:
list-style-position
- 属性设置 列表项标记
::marker
相对于 列表项 的位置。 - ① 简写属性: 属性值 可在 简写属性
list-style
中设置 - ② 适用对象:
- ❶ 列表项
display: list-item;
的元素 - ❷ 列表项的父元素:
display: list-item;
的元素的 父元素,默认最常见的是<ul>
,<ol>
- 因为继承性原因,父元素设置了,也可以被 子元素列表项继承
- ❶ 列表项
- 属性设置 列表项标记
- ⑵ 列表项标记的位置 语法
list-style-position: inside|outside|inherit;
/* 关键字值 Keyword values */
list-style-position: inside;
list-style-position: outside;
/* 全局值 Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;
- ⑶ 列表项标记的位置 类型
- ① 列表项的外部 (默认值):
outside
- 列表项标记 位于 文本的左侧。
- 放置在 文本内容 以外,不作为 列表项内容的一部分
- 放在离 列表项 边框边界一定距离处.
- 这距离在 CSS 中未定义。
- 列表项 有背景色,列表项的标记 在 列表项外部,没有背景色
- 放在离 列表项 边框边界一定距离处.
- 文本对齐
- 不会根据标记 对齐。
- ② 列表项的内部:
inside
- 插入在 列表项内容的 最前面 ,作为第一个 行内框。
- 作为 列表项内容 的一部分
- 列表项 有背景色,列表项的标记 在 列表项内部,也会有背景色
- 列表项 有背景色,列表项的标记 在 列表项内部,也会有背景色
- 文本对齐
- 会根据标记 对齐。
- ③ 继承父亲:
inherit
- 从父元素 继承
list-style-position
属性的值。
- 从父元素 继承
- ① 列表项的外部 (默认值):
- 涉及的代码
- css
.fruit{
border: solid #000000;
width: 10%;
}
.fruit li{
background-color: #e8ffec;
width: 45%;
/*list-style: square outside url("https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg");*/
list-style-type:decimal-leading-zero;
/*list-style-position: outside;*/
list-style-position: inside;
}
- html
<ul class="fruit">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>葡萄</li>
</ul>
- 列表项标记 位置的 浏览器支持
1.3 list-style-image 属性: 设置 列表项标记 图像
- ⑴ 设置 列表项标记 图像:
list-style-image
- 把列表项的标记 设置为图像。
- ⑵ 列表项 标记 图像的 退路/回退操作
- 列表项 标记 符号
list-style-type"
- 应该 始终规定一个 “
list-style-type
” 属性 以防图像不可用。
- 应该 始终规定一个 “
- 优先级: 图像背景 优先于 符号标记
- 列表项 标记 符号
- ⑶ 列表项标记 图像的 语法
list-style-image: none| url| inherit;
/* 关键字值 Keyword values */
list-style-image: none;
/* 图像路径 <url> values */
list-style-image: url('starsolid.gif');
/* 全局值 Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
- ⑷ 列表项标记 图像的 属性值
- ① 无图像(默认值):
none
- 不显示 列表项标记 图像。
- ② 图像路径:
url
- 图像的路径。
- ③ 继承父亲:
inherit
- 从父元素 继承
list-style-image
属性的值。
- 从父元素 继承
- ① 无图像(默认值):
- 上图 涉及 CSS 代码
.fruit{
border: solid #000000;
width: 10%;
}
.fruit li{
background-color: #e8ffec;
width: 55%;
/*list-style: square outside url("https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg");*/
list-style: square outside url("../images/starsolid.gif");
}
2. 相关伪类 ::marker 设置 列表项 标记
- ⑴ 设置 列表项 标记:
::marker
CSS 伪元素- 选择 列表项的 标记 框/盒子,该列表项 通常包含 项目符号或数字。
- 适用对象: 它适用于设置为
display: list-item
的 任何元素 或 伪元素- 比如 默认的
<li>
和<summary>
元素。
- 比如 默认的
::marker {
color: blue;
font-size: 1.2em;
}
-
⑵ 适用属性
- 只有 特定的 CSS 属性 可以在一个规则中使用
::marker
作为选择器: - ① 所有 字体类属性:
font
,font-*
属性 - ②
color
属性- 给列表项的 标记符号 换个颜色
- ③
text-combine-upright
,unicode-bidi
,direction
属性 - ④
content
属性
- 只有 特定的 CSS 属性 可以在一个规则中使用
-
涉及的 CSS 代码
.fruit{
border: solid #000000;
width: 10%;
}
.fruit li{
background-color: #e8ffec;
width: 55%;
/*list-style: square outside url("https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg");*/
list-style-type: square;
list-style-position: outside;
/*list-style-image: url("../images/starsolid.gif");*/
}
.fruit li::marker{
color: red;
content: "标记";
}
- ⑶
::marker
的浏览器支持- 目前支持度 还不好,可在 Firefox 中测试
- 目前支持度 还不好,可在 Firefox 中测试
♣ 结束语 和 友情链接
- 支持作者: 持续更新中,❤ 您的每一分赞助,让作者走得更远。
- 可以备注 支持的理由 或 想对作者说的话哦~
- 可以备注 支持的理由 或 想对作者说的话哦~
- 赞助二维码:
- 参考文档
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 转载 请评论告知作者 并注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/103221074
- 版权声明:本文为博主原创文章,转载 请评论告知作者 并附上博文链接!