Css 简明教程

CSS - Lists

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

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

本章将讨论如何使用 CSS 来控制列表类型、位置、样式等。在此之前，让我们先在以下各节中了解 HTML 列表的差别。

HTML Lists

HTML 主要提供两种列表 <ol> (ordered list) 和 <ul> (unordered list) 。

Name

Description

Syntax

Ordered List (<ol>)

当需要以特定顺序呈现项目时，使用有序列表。通常用于程序、步骤、说明或任何顺序信息（其中顺序很重要）。

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

Unordered List (<ul>)

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

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

Example

让我们来看一个两种列表（没有 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>Ordered list</h2>
            <ol class="list">
                <li>The list is ordered.</li>
                <li>It is used in cases where we need to follow a sequence.</li>
                <li>The points are numbered.</li>
            </ol>
            <h2>Unordered list</h2>
            <ul class="list">
                <li>The list is unordered.</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>

Lists - CSS Properties

CSS 提供了一套可应用于任何列表的属性，如下所示：

  1. list-style-type 允许你控制标记的形状或外观。

  2. list-style-position 指定换行到第二行的长点是否应与第一行对齐或者从标记的开头下方开始。

  3. list-style-image 为标记指定一个图像，而不是项目符号或数字。

  4. list-style 用作前面属性的简写。

Item markers for lists or Bullet Styles

要更改用于列表项目的标记类型，可以使用属性 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 的可能值：

Value

Description

Example

none

NA

NA

disc (default)

A filled-in circle

circle

An empty circle

square

A filled-in square

decimal

Number

1, 2, 3, 4, 5, …​

decimal-leading-zero

0 before the number

01, 02, 03, 04, 05, …​

lower-alpha

Lowercase alphanumeric characters

a, b, c, d, e, …​

upper-alpha

Uppercase alphanumeric characters

A, B, C, D, E, …​

lower-roman

Lowercase Roman numerals

i, ii, iii, iv, v, …​

upper-roman

Uppercase Roman numerals

I, II, III, IV, V, …​

lower-greek

The marker is lower-greek

alpha, beta, gamma, …​

lower-latin

The marker is lower-latin

a, b, c, d, e, …​

upper-latin

The marker is upper-latin

A, B, C, D, E, …​

hebrew

标记为传统的希伯来语编号

armenian

标记为传统的亚美尼亚语编号

georgian

标记为传统的格鲁吉亚语编号

cjk-ideographic

标记为普通的表意文字数字

hiragana

标记为日语编号 - 平假名

a, i, u, e, o, ka, ki

katakana

标记为日语编号——片假名

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

Item list marker - an image (Using a custom bullet image)

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

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

Syntax

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>

Points to remember:

  1. 建议提供图像的替代方案作为列表标记，这样在图像未加载或损坏的情况下，用户会有一个后备选项。语法：

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

  1. 如果您不希望图像作为嵌套列表的标记，请为嵌套列表项指定 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>

The list item marker - Position or Bullet position

list-style-position 属性表示标记是应该显示在包含项目符号的框内还是框外。它可以具有以下值之一：

Sr.No.

Value

Description

1

none

NA

2

inside

如果文本进入第二行，该文本会换行到标记下方。它还将具有适当的缩进。

3

outside

如果文本进入第二行，该文本会与第一行的开始对齐（在项目符号的右侧）。

4

inherit

继承父级列表的属性。

让我们看一个示例，其中从列表中移除了填充并添加了左边的红色边框：

<!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 - Shorthand Property

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

以下是列表样式可能包含的值：

  1. <list-style-type>

  2. <list-style-image>

  3. <list-style-position>

Points to remember:

我们看一个示例：

<!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>

Controlled list counting

有时候，我们可能想对有序列表以不同的方式进行计数——例如，从 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>Controlled counting using start</h2>
     <ol start="4">
          <li>Java.</li>
          <li>HTML.</li>
          <li>CSS.</li>
          <li>React.</li>
      </ol>
  </body>
</html>

reversed

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>Controlled counting using 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>

Styling lists with colors

我们可以使用一些样式让列表看起来更时尚、更丰富多彩，如下例所示。正如我们所看到的，添加到 <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>Controlled counting using 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>