【CSS 列表属性 (List)】


CSS 列表属性(List)

用于属性名CSS 版本
① 简写属性, 在一个声明中,一次性设置 所有的 列表属性list-style1
② 将 列表项标记 设置为图像list-style-image1
③ 列表项标记的 放置位置。设置 列表项标记的 相对位置 (相对于列表项,适用于 列表项标记 符号/图像)list-style-position1
④ 列表项标记的 符号类型 (实心圆,空心圆等)。list-style-type1

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
      • 同时设置了 列表项类型和图像: 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 修复的影响,并且 不会对列表项 进行不恰当的描述。
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 代码

.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 中测试在这里插入图片描述

♣ 结束语 和 友情链接

  • 支持作者: 持续更新中,❤ 您的每一分赞助,让作者走得更远。
    • 可以备注 支持的理由 或 想对作者说的话哦~
      在这里插入图片描述
  • 赞助二维码:
    在这里插入图片描述


  • 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
  • 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭

  • 转载 请评论告知作者 并注明出处 ,Thanks♪(・ω・)ノ
    • 作者:Hey_Coder
    • 来源:CSDN
    • 原文:https://blog.csdn.net/VickyTsai/article/details/103221074
    • 版权声明:本文为博主原创文章,转载 请评论告知作者 并附上博文链接!

在这里插入图片描述

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值