CSS 列表

什么是列表

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

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

本章将介绍如何使用CSS控制列表类型、位置、样式等等。在此之前，让我们了解HTML中有哪些不同类型的列表。

HTML列表

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

有序列表

当需要按照特定顺序使用数字或字母标记项目时，使用有序列表。以下是创建HTML有序列表的语法：

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

无序列表

无序列表用于将项目以简单的项目符号标记的特定顺序展示出来。以下是创建HTML无序列表的语法：

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

CSS列表- 属性

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

list-style-type 允许您控制列表标记（项目符号）的形状或外观。
list-style-position 允许指定列表项目标记的位置。
list-style-image 指定标记的图像，而不是项目符号或数字。
list-style 作为缩写属性，用于管理标记。

CSS列表- 标记类型

CSS允许您控制列表标记（项目符号）的形状。以下示例显示CSS属性 list-style-type 为有序列表和无序列表设置不同的标记。同一属性可用于有序列表和无序列表。

无序列表示例

<html>
<head>
<style>
   ul.a { 
      list-style-type: circle; 
   }
   ul.b { 
      list-style-type: square; 
   }
</style>
</head>
<body>
   <h2>Unordered List Example</h2>
   <ul class="a">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

   <ul class="b">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

</body>
</html>

有序列表示例

<html>
<head>
<style>
   ol.a { 
      list-style-type: decimal; 
   }
   ol.b { 
      list-style-type: lower-alpha; 
   }
</style>
</head>
<body>
   <h2>Ordered List Example</h2>
   <ol class="a">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ol>

   <ol class="b">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ol>

</body>
</html>

您可以检查CSS属性 list-style-type 了解所有可能的列表标记类型的详细信息。

CSS列表-图像标记

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

您可以使用自己的项目符号样式。如果找不到图像，则会打印默认的符号。以下是一个示例，显示了 list-style-image 属性的用法。

<html>
<head>
<style>
   ul { 
      list-style-image: url('/images/icon-bullet.png');
   }
</style>
</head>
<body>
   <h2>CSS Lists - Image Marker</h2>
   <ul>
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

</body>
</html>

CSS列表 – 标记位置

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

none
inside
outside
inherit

以下是一个示例，显示了使用 list-style-position 属性的用法。

<html>
<head>
<style>
   ul.a { 
      list-style-position: outside; 
   }
   ul.b { 
      list-style-position: inside; 
   }
</style>
</head>
<body>
   <h2>CSS Lists - Marker Position</h2>
   <ul class="a">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
   </ul>

   <ul class="b">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
   </ul>

</body>
</html>

CSS列表 – 默认标记位置

如果CSS的 list-style-position 属性设置为 none ，则会移除标记/项目符号。在将此属性设置为none时，我们需要设置 margin:0 和 padding:0 –

以下是一个示例，展示 list-style-position=none 属性的使用方法。

<html>
<head>
<style>
   ul { 
      list-style-position: none; margin:0; padding:0;
   }
</style>
</head>
<body>
   <h2>CSS Lists - Default Marker Position</h2>
   <ul>
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
   </ul>

</body>
</html>

CSS列表 – 简写属性

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

以下是 list-style 可以包含的值：

<list-style-type>
<list-style-image>
<list-style-position>

传递给list-style的值的顺序不固定，可以省略任何三个值中的任何一个。如果缺少任何一个值，该值将被相同属性的默认值填充。但是必须传递至少一个值。

以下是一个示例，显示 list-style 属性的用法。

<html>
<body>
   <h2>CSS Lists - Shorthand Property</h2>
   <h3>Three values passed</h3>
   <ul style = "list-style: url('/images/icon-bullet.png') circle outside;">
      <li>All the three values have been provided</li>
      <li>The item marker is an image, position as outside.</li>
      <li>It is used in cases we do not need to 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 we do nit need to 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>

CSS列表 – 控制计数

有时候我们可能希望在有序列表中以不同的方式进行计数，比如从一个不是1的数字开始计数，或者倒数计数，或者以大于1的步长计数。

以下是可以帮助控制列表编号的三个CSS属性：

< start> - 允许你从一个不是1的数字开始计数。
< reversed> - 倒数计数，从上到下开始计数。
< value> - 允许你将列表项设置为特定的数字值。

下面是一个示例，展示了如何使用这些属性。

<html>
<body>
   <h2>CSS Lists - Controlled Counting</h2>
   <h3>start attribute</h3>
   <ol start="4">
      <li>Java.</li>
      <li>HTML.</li>
      <li>CSS.</li>
      <li>React.</li>
   </ol>

   <h3>reverse attribute</h3>
   <ol reversed>
      <li>Java.</li>
      <li>HTML.</li>
      <li>CSS.</li>
      <li>React.</li>
   </ol>

   <h3>value attribute</h3>
   <ol>
      <li value="2">Java.</li>
      <li value="3">HTML.</li>
      <li value="1">CSS.</li>
      <li value="4">React.</li>
   </ol>

</body>
</html>

CSS列表 – 设置颜色

我们可以使用CSS样式使列表看起来更时尚和丰富多彩，如下面的示例所示。我们可以看到，添加到<ul>或<ol>标签的任何样式都会影响整个列表，而对于个别的<li>标签的添加只会影响相应列表的项目。

以下是一个示例，展示了为列表设置不同CSS属性的用法。

<html>
<head>
<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>CSS Lists -  Setting Colors</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>

CSS列表-相关属性

属性	描述
list-style	一次性声明所有列表属性的简写属性。
list-style-image	将图像设为列表项的标记。
list-style-position	设置列表项目标记（项目符号）的位置。
list-style-type	设置列表项目标记的类型。