HTML5与CSS3基础语法自学教程（二十一）

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！

导读：本小节主要讲解有关列表的 CSS 样式。简单来说，就是学习 CSS 中的 list-style 属性以及相关其他 CSS 属性。在本小节并不针对应用场景去讲解其他相关 CSS 样式属性内容。

什么是列表样式

列表样式主要是针对 HTML 页面中的列表元 CSS 所提供的样式。具体来讲，主要就是 CSS 中的 list-style 属性以及相关属性内容。

由于 list-style 属性是简写形式，具体划分为如下 3 普通属性：

• list-style-type 属性

• list-style-image 属性

• list-style-position 属性

项目符号样式

CSS list-style-type 属性用来设置列表元素的项目符号（编号/序号）。该属性可以被应用在 <ol> 元素、<ul> 元素和 <li> 元素中。

list-style-type 属性的值可以划分如下 2 种类型的值：

• none：表示不显示任何项目符号。

• 关键字：表示特定含义的项目符号关键字。

关于 list-style-type 属性的值为关键字的情况，还可以划分为有序列表和无序列表 2 种：

• 有序列表：

  • decimal：十进制阿拉伯数字，从 1 开始

  • decimal-leading-zero：十进制阿拉伯数字，例如 01、02、03… …

  • lower-alpha：小写英文字母

  • upper-alpha：大写英文字母

  • lower-roman：小写罗马数字

  • upper-roman：大写罗马数字

• 无序列表：

  • disc：实心圆点

  • circle：空心圆点

  • square：实心方块

如下示例代码展示了 list-style-type 属性的用法：

ul {
  list-style-type: circle;
}

ol {
  list-style-type: lower-alpha;
}

上述示例代码运行效果如下图所示：

02-01.png

项目符号图像

CSS list-style-image 属性用来设置某个图像为列表元素的项目符号，该属性的值可以划分如下 2 种类型的值：

• none：没有任何图像作为项目符号。这种情况下，将使用 list-style-type 属性的值来替代。

• url() 函数：设置引入图像的路径。

如下示例代码展示了 list-style-image 属性的用法：

ul {
  list-style-image: url("files/rocket.svg");
}

上述示例代码运行效果如下图所示：

02-02.png

项目符号定位

CSS list-style-position 属性用来设置列表元素的项目符号的位置，该属性的值可以划分如下 2 种类型的值：

• inside：该值表示项目符号位于文本块的内部，同时文本会进行缩进。

• outside：该值表示项目符号位于文本块的左侧。

如下示例代码展示了 list-style-position 属性的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>项目符号定位</title>
  <style>
    li {
      background-color: lightcoral;
    }

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

    .outside {
      list-style-position: outside;
    }
  </style>
</head>

<body>
  <ul class="inside">
    <li>iPhone手机</li>
    <li>小米手机</li>
    <li>华为手机</li>
  </ul>
  <ul class="outside">
    <li>iPhone手机</li>
    <li>小米手机</li>
    <li>华为手机</li>
  </ul>
</body>

</html>

上述示例代码运行效果如下图所示：

02-03.png

list-style 属性

CSS list-style 属性是一个简写属性，list-style-type 属性、list-style-image 属性和 list-style-position 属性的值可以同时定义在 list-style 属性中。

如下示例代码展示了 list-style 属性的用法：

ul {
  list-style: url("files/rocket.svg") outside;
}

上述示例代码运行效果如下图所示：

02-04.png

总结

本小节讲解了有关列表样式的内容，主要是围绕 CSS 中的 list-style 属性进行讲解的，其中包含了 list-style-type 属性、list-style-image 属性以及 list-style-position 属性等内容。

预告：下一节，我们将讲解有关 CSS 中的计数器内容。

如要转载本文，请先加作者微信(2080954535，与 QQ 同号)，获得转载许可。原创不易，请尊重作者劳动！

作者二维码.png