列表很有用，因为它们以结构化和有组织的方式呈现信息。列表提高了网页内容的可读性和理解性。因此，如果内容被列出，就很容易理解。

列表通常用于显示项目、步骤、选项或任何其他类型的应按顺序或成组呈现的相关信息。

本章将讨论如何使用 CSS 控制列表类型、位置、样式等。在此之前，让我们了解一下以下部分中 HTML 列表有何不同。

HTML 列表

HTML 主要提供两种列表 - <ol>（有序列表）和 <ul>（无序列表） .

名称描述语法
有序列表 (<ol>)

当项目需要以特定顺序呈现时，使用有序列表。通常用于过程、步骤、指令或顺序重要的任何信息序列。

 
<ol class="list">
    <li></li>
</ol>
无序列表 (<ul>)

当项目的顺序无关紧要并且您希望将项目作为一个组呈现时，可以使用无序列表。通常用于功能、优点、选项或任何非顺序信息的列表。

 
<ul class="list">
    <li></li>
</ul>

示例

让我们看一下两种列表的示例（没有 CSS）:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Lists</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 {margin-bottom: 5px;}
        </style>
    </head>
    <body>
        <div>
            <h2>有序列表</h2>
            <ol class="list">
                <li>列表已排序。</li>
                <li>It is used in cases where we need to follow a sequence.</li>
                <li>The points are numbered.</li>
            </ol>
            <h2>无序列表</h2>
            <ul class="list">
                <li>该列表无序。</li>
                <li>It is used in cases where we need not follow a sequence.</li>
                <li>The points are bulleted.</li>
            </ul>
        </div>
    </body>
</html>

列表 - CSS 属性

CSS 提供了一组属性，可以可应用于任何列表，如下所示:

  • list-style-type 允许您控制标记的形状或外观。

  • 列表样式位置指定换行到第二行的长点是否应与第一行对齐，还是从标记开头下方开始。

  • list-style-image 指定标记的图像，而不是项目符号点或数字。

  • list-style 作为前面的属性。

列表或项目符号样式的项目标记

要更改用于列表项目的标记类型，属性 list-style-type可以使用。相同的属性可用于有序列表和无序列表。

让我们看一个示例:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Lists</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 { margin-bottom: 5px; }
            ol.o1 { list-style-type: lower-roman; }
            ol.o2 { list-style-type: upper-alpha; }
            ul.u1 { list-style-type:square; }
            ul.u2 { list-style-type: circle; }
        </style>
    </head>
    <body>
        <div>
            <h2>Ordered list - Item markers</h2>
            <ol class="o1">
                <li>The item marker is lower-roman.</li>
                <li>It is used in cases where we need to follow a sequence.</li>
            </ol>
            <ol class="o2">
                <li>The item marker is upper-alpha.</li>
                <li>It is used in cases where we need to follow a sequence.</li>
            </ol>
            <h2>Unordered list - Item markers</h2>
            <ul class="u1">
                <li>The item marker is square.</li>
                <li>It is used in cases where we need not follow a sequence.</li>
            </ul>
            <ul class="u2">
                <li>The item marker is circle.</li>
                <li>It is used in cases where we need not follow a sequence.</li>
            </ul>
        </div>
    </body>
</html>

下表列出了可用于属性 list-style-type 的可能值:

值说明示例
无NANA
圆盘（默认）实心圆
圆空圆
正方形实心正方形
小数数字1, 2, 3, 4 , 5, ...
小数点前导零数字前加 001, 02, 03, 04 , 05, ...
小写字母小写字母数字字符a, b, c, d, e, ...
大写字母大写字母数字字符A、B、C、D、E、...
小写罗马数字小写罗马数字i, ii, iii, iv, v, ...
大写罗马数字大写罗马数字I、II、III、IV、V、...
低位希腊语标记为低位希腊语alpha、beta、gamma、...
下拉丁文标记为下拉丁文a、b、c、d、e、...
上拉丁文标记为上拉丁文A、B、C、D、E、...
希伯来语标记为传统希伯来语编号
亚美尼亚语标记为传统的亚美尼亚编号
格鲁吉亚编号标记为传统的格鲁吉亚编号
中日韩表意文字标记是纯表意数字
平假名标记为日语编号 - 平假名a、i、u、e、o、ka、ki
片假名标记是日语编号 - 片假名A、I、U、E、O、KA、KI
hiragana-iroha标记为日语编号（平假名-iroha）i、ro、ha、ni、ho、he、to
片假名- iroha标记为日文编号（片假名-iroha）I、RO、HA、NI、HO、HE、TO
list-style-type 属性以及所有其他与列表相关的属性只能应用于显示 list-item 的元素，但 CSS 不区分有序列表项和无序列表项。用户代理可以禁止将有序标记应用于无序列表，反之亦然。您不能指望这一点，所以要小心。

项目列表标记 - 图像（使用自定义项目符号图像）

您可能更喜欢使用图像作为项目列表标记。 list-style-image 属性可用于指定图像作为项目列表标记。

您可以使用自己的项目符号样式。如果未找到图像，则返回默认项目符号。

语法

ul { list-style-image: url('URL') }

让我们看一个示例:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Lists</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 { margin-bottom: 5px; }
            div { padding: 5px; margin-left: 100px;}
            ul { list-style-image: url('/images/bullet.gif') }
        </style>
    </head>
    <body>
        <div>
            <h2>Unordered list - Image as item marker</h2>
            <ul>
                <li>The item marker is square.</li>
                <li>It is used in cases where we need not follow a sequence.</li>
            </ul>
            <ul>
                <li>The item marker is circle.</li>
                <li>It is used in cases where we need not follow a sequence.</li>
            </ul>
        </div>
    </body>
</html>

要记住的要点:

  • 建议为图像提供替代方案作为列表标记，以便在图像未加载或损坏的情况下，用户有一个后备选项。

    • 语法:

      • ul { list-style-image: url('URL'); list-style-type: circle / square; }
  • 如果您不希望图像嵌套列表的标记，为嵌套列表项指定list-style-image: none。

    • 语法:

      • ul { list-style-image: url('URL'); list-style-type: circle / square; }
ul ul { list-style-image: none; }

以上各点在以下示例中得到演示:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Lists</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 { margin-bottom: 5px; }
            div { padding: 5px; margin-left: 100px;}
            ul { list-style-image: url('/images/bullet.gif') }
            ul ul { list-style-image: none; }
        </style>
    </head>
    <body>
        <div>
            <h2>Unordered list - Image as item marker</h2>
            <ul>
                <li>The item marker is an image.</li>
                <li>It is used in cases where we need use images.
                     <ul>
                        <li>The item marker is a circle.</li>
                        <li>this demonstrates skipping image marker for sub item list.</li>
                    </ul>
                </li>
            </ul>

        </div>
    </body>
</html>

列表项标记 - 位置或项目符号位置

list-style-position 属性指示标记应出现在包含项目符号点的框内部还是外部。它可以具有以下值之一 -

序号值描述
1无NA
2内部如果文本进入第二行，文本将换行到标记下方。它还将具有适当的缩进。
3外部如果文本进入第二行，则文本将是与第一行的开头对齐（在项目符号的右侧）。
4继承继承属性

让我们看一下下面的示例，其中从列表中删除了填充并添加了左侧红色边框:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Lists</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
        body {
          padding-left: 50px;
        }

        ul:nth-of-type(1) {
          list-style-position: inside;
          padding: 0;
          border-left: solid 2px red;
        }

        ul:nth-of-type(2) {
          list-style-position: outside;
          padding: 0;
          border-left: solid 2px red;
        }
        </style>
  </head>
  <body>
     <h2>List style position</h2>
     <div>
        <ul style = "list-style-type:circle; list-style-position:outside;">
            <li>The item marker is circle, with style position as outside. Let us see where the bullet is lying.</li>
            <li>It is used in cases where we need not follow a sequence.</li>
        </ul>
    </div>
    <div>
        <ul style = "list-style-type:square; list-style-position:inside;">
            <li>The item marker is square, with style position as inside. Let us see where the bullet is lying.</li>
            <li>It is used in cases where we need not follow a sequence.</li>
        </ul>
    </div>
  </body>
</html>

list-style - 简写属性

list-style 允许您将所有三个列表属性指定到一个表达式中。

以下是 list- 的值style 可以容纳:

  • <list-style-type>

  • <list-style-image>

  • <list-style-position>

要记住的要点:

  1. 传递给list-style的值的顺序不固定。

  2. 三个值中的任何一个都可以省略.

  3. 如果缺少任何值，则将使用相同的默认值进行填充。但必须至少传递一个值。

让我们看一个例子:

<!DOCTYPE html>
<html>
   <head>
        <title>CSS - Lists</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div { border: 2px solid; width: 500px;}
        </style>
  </head>
  <body>
     <h2>List style - shorthand</h2>
     <h3>Three values passed</h3>
        <ul style = "list-style: url('C:/WORK/CSS/tp-css/images/try-it.jpg') circle outside;">
            <li>The item marker is an image, position as outside. In absence of image, the marker will be a circle.
                Try not loading the image and see the type as circle.</li>
            <li>It is used in cases where we need not follow a sequence.</li>
        </ul>

        <h3>Two values passed</h3>
        <ul style = "list-style: square inside">
            <li>The item marker is square, with style position as inside and no image.</li>
            <li>It is used in cases where we need not follow a sequence.</li>
        </ul>

        <h3>One value passed</h3>
        <ul style = "list-style: disc">
            <li>The item marker is disc, with style position as outside (default) and no image (default - none).</li>
            <li>It is used in cases where we need not follow a sequence.</li>
        </ul>
  </body>
</html>

受控列表计数

At我们可能希望对有序列表进行不同的计数 - 例如，从 1 以外的数字开始，或者向后计数，或者以大于 1 的步长计数。HTML 和 CSS 有一些工具可以在这方面为您提供帮助。

start

start 属性允许您从 1 以外的数字开始计数，如以下示例所示:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Lists</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
     <h2>使用start控制计数</h2>
     <ol start="4">
          <li>Java.</li>
          <li>HTML.</li>
          <li>CSS.</li>
          <li>React.</li>
      </ol>
  </body>
</html>

reversed

相反的属性将启动列表反向或向下计数，而不是向上计数，如下例所示:

<!DOCTYPE html>
  <html>
      <head>
          <title>CSS - Lists</title>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
       <h2>Controlled counting using start</h2>
       <ol start="4" reversed>
            <li>Java.</li>
            <li>HTML.</li>
            <li>CSS.</li>
            <li>React.</li>
        </ol>
    </body>
  </html>

value

value 属性允许您将列表项设置为特定的数字值，如以下示例所示:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Lists</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
     <h2>使用start控制计数</h2>
     <ol start="4" reversed>
          <li value="2">Java.</li>
          <li value="3">HTML.</li>
          <li value="1">CSS.</li>
          <li value="4">React.</li>
      </ol>
  </body>
</html>

使用颜色设置列表样式

我们可以使用某些样式使列表看起来更时尚、色彩更丰富，如以下示例所示。正如我们所见，添加到 <ul> 或 <ol> 标记的任何样式都会影响整个列表，而添加到单独的 <li> 标记只会影响相应列表的项目。

<!DOCTYPE html>
<html>
    <head>
      <title>CSS - Lists</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
      ol{
        list-style: upper-latin;
        background: Aquamarine;
        padding:20px;
      }
      ol li{
        background: silver;
        padding:10px;
        font-size:20px;
        margin:10px;
      }
      ul{
        list-style: square inside;
        background: teal;
        padding:20px;
      }
      ul li{
        background: olive;
        color:white;
        padding:10px;
        font-size:20px;
        margin:10px;
      }
    </style>
  </head>
  <body>
     <h2>使用start控制计数</h2>
     <ol>
          <li>Java.</li>
          <li>HTML.</li>
          <li>CSS.</li>
          <li>React.</li>
      </ol>
      <ul>
          <li>Java.</li>
          <li>HTML.</li>
          <li>CSS.</li>
          <li>React.</li>
      </ul>
  </body>
</html>