CSS - 列表

上一页
下一页

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

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

本章将讨论如何使用 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>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>

列表 - CSS 属性

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

  • list-style-type 允许您控制标记的形状或外观。
  • list-style-position 指定包裹到第二行的长点是应与第一条线对齐，还是应从标记起点下方开始。
  • 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 的可能值：

值 描述 示例
none NA NA
disc (default) 一个填充的圆圈  
circle 一个空的圆圈  
square 一个填充的正方形  
decimal 数字 1, 2, 3, 4, 5, ...
decimal-leading-zero 0 在数字之前 01, 02, 03, 04, 05, ...
lower-alpha 小写字母数字字符 a, b, c, d, e, ...
upper-alpha 大写字母数字字符 A, B, C, D, E, ...
lower-roman 小写罗马数字 i, ii, iii, iv, v, ...
upper-roman 大写罗马数字 I, II, III, IV, V, ...
lower-greek 标记是低希腊语 alpha, beta, gamma, ...
lower-latin 标记是低拉丁语 a, b, c, d, e, ...
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 标记是日本编号（hiragana-iroha） i, ro, ha, ni, ho, he, to
katakana-iroha 标记是日本编号（片假名-iroha） I, RO, HA, NI, HO, HE, TO
list-style-type 属性以及所有其他与列表相关的属性可以是 仅适用于显示列表项的元素，但 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 属性指示标记应显示在包含项目符号的框的内部还是外部。它可以具有以下值之一 -

Sr.No. 值 描述
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 属性

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

以下是 list-style 可以保存的值：

  • <list-style-type>
  • <list-style-image>
  • <list-style-position>
要记住的要点：
  • 传递给列表样式的值的顺序不是固定的。
  • 这三个值中的任何一个都可以省略。
  • 如果缺少任何值，则将由相同的默认值填充。但是必须至少传递一个值。

让我们看一个例子：


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

受控列表计数

有时，我们可能希望在有序列表上以不同的方式计数——例如，从不是 1 的数字开始，或者倒数，或者以超过 1 的步长计数。HTML 和 CSS 在这里有一些工具可以帮助您。

开始

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 属性将开始反向或向下计数列表，而不是向上计数，如以下示例所示：


	 <!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 属性允许您将列表项设置为特定的数值，如以下示例所示：


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

使用颜色设置列表样式

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