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指定标记的图像而不是项目符号点或数字。

  • 列表样式用作管理标记的简写属性。

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属性指示标记是否应出现在包含项目符号点的框内部或外部。它可以具有以下值之一 -

  • 没有任何
  • 里面
  • 外部
  • 继承

以下是展示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，那么它将删除标记/项目符号。当将此属性设置为无时，我们需要设置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可以保存的值：

  • <列表样式类型>

  • <列表样式图像>

  • <列表样式位置>

传递给列表样式的值的顺序不固定，三个值中的任何一个都可以省略。如果缺少任何值，则将使用相同的默认值进行填充。但必须至少传递一个值。

以下是一个示例来展示列表样式属性的用法。

<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 列表 - 相关属性

财产 描述
列表式 一种简写属性，用于在一个声明中设置所有列表属性。
列表样式图像 将图像设置为列表项的标记。
列表样式位置 设置列表项标记（项目符号点）的位置
列表样式类型 设置列表项标记的类型