运行一下

---

列表属性

HTML列表分为两类，无序列表和有序列表；无序列表通过ul元素定义，有序列表通过ol元素定义。在CSS中列表相关属性的主要功效如下：

• 控制无序列表的标记样式
• 控制有序列表的标记样式
• 自定义图片作为标记物
• 改变列表背景、颜色、字体等属性

HTML 无序列表的标记样式

通过设置<ul>标签的list-style-type属性即可设置标记的样式。

具体样式有如下几种：

list-style-type	标记样式描述
disc	实心圆圈（默认）
circle	空心圆圈
square	小方块
none	不进行标记

运行一次下面的这个例子就全懂啦 ~

<ul style="list-style-type:disc">
  <li>专否社区</li>
  <li>专否沙盒</li>
</ul>

<ul style="list-style-type:circle">
  <li>专否社区</li>
  <li>专否沙盒</li>
</ul>

<ul style="list-style-type:square">
  <li>专否社区</li>
  <li>专否沙盒</li>
</ul>

<ul style="list-style-type:none">
  <li>专否社区</li>
  <li>专否沙盒</li>
</ul>

运行一下

---

HTML 有序列表的标记样式

通过设置<ul>标签的type属性即可设置标记的样式。

常用样式有如下几种：

list-style-type	标记样式描述
decimal	用阿拉伯数字表示顺序（默认）
upper-alpha	使用大写字母来表示顺序
lower-alpha	使用小写字母来表示顺序
upper-roman	使用大写的罗马数字来排序
lower-roman	使用小写的罗马数字来排序

运行一次下面的这个例子就全懂啦 ~

<ol style="list-style-type:decimal">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

<ol style="list-style-type:upper-alpha">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

<ol style="list-style-type:lower-alpha">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

<ol style="list-style-type:upper-roman">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

<ol style="list-style-type:lower-roman">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

运行一下

自定义图片作为标记物

通过CSS中的list-style-image属性即可自定义某张图片作为列表的标记物。如下：

ul {
    list-style-image: url('https://logo.zhuanfou.com/program-logo-60.png');
}

运行一下

标记物的位置

CSS中的list-style-position属性可定义标记物的位置，如果取值outside标记物则在列表内容之外，若取值inside标记物则在列表内容之内，但缩进依然存在。

"list-style-position: outside;"的效果如下：

• 司马光 - 司马光砸缸，司马缸砸光，司马光砸缸，司马缸砸光，司马光砸缸，司马缸砸光……
• 司马懿
• 司马昭

"list-style-position: inside;"的效果如下：

• 司马光 - 司马光砸缸，司马缸砸光，司马光砸缸，司马缸砸光，司马光砸缸，司马缸砸光……
• 司马懿
• 司马昭

如下例所示：

ul.position_outside {
    list-style-position: outside;
}

ul.position_inside {
    list-style-position: inside;
}

运行一下

删除默认设定

通过CSS中的list-style-type:none这种属性与取值，可以删除浏览器关于列表样式的默认设置；为了显得更纯粹，最好把列表元素的内边距padding和外边距margin都设置成零。如下例子所示：

ul.demo {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

运行一下

列表 list-style直接通吃

洒家在此，洒家认为要分别声明list-style-type、list-style-position、list-style-image有点麻烦，洒家是个粗人，记这么多的属性名有点费事，所以洒家决定只用list-style来通吃上述三种属性。

• list-style-type（如果没有设置list-style-image或者list-style-image引入的图片加载失败，则会显示该属性设置的标记物）
• list-style-position
• list-style-image（自定义图片作为列表标记物）

如果上述某个属性是可以缺省的，缺省则会取浏览器默认值。另外，上述三者属性的顺序如何是无所谓的，随便搞吧！

设置列表元素的颜色

空谈误学，实干兴邦，看例子：

ol {
    background: Tomato;
    padding: 20px;
}

ul {
    background: rgba(70, 172, 182, 0.2);
    padding: 20px;
}

ol li {
    background: #f8ebe7;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    color: White;
    background: #46acb6;
    margin: 5px;
}

运行一下