CSS - 列表样式

原创

admin 4个月前 (08-07) 阅读数 19 #CSS

CSS - 列表样式

列表以结构化和有组织的方式呈现信息，提高了网页内容的可读性和理解性。当内容以列表形式展示时，更容易被读者理解和跟随。

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

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

列表类型

以下是HTML中使用的列表类型。

有序列表 (<ol>): 当项目需要按特定顺序呈现时使用。常用于程序、步骤、说明或任何顺序重要的信息序列。
无序列表 (<ul>): 当项目顺序不重要，且您希望将项目作为一组呈现时使用。常用于功能列表、优势列表、选项列表或任何非顺序信息。
定义列表 (<dl>): 用于术语及其相应的定义。

列表样式类型属性

CSS的list-style-type属性用于更改有序列表(<ol>)或无序列表(<ul>)中列表项的标记（如项目符号或数字）样式。

以下示例展示了一些列表样式类型。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 无序列表样式 */
        ul.circle {
            list-style-type: circle; /* 圆形项目符号 */
        }

        ul.square {
            list-style-type: square; /* 方形项目符号 */
        }

        ul.none {
            list-style-type: none; /* 无项目符号 */
        }

        /* 有序列表样式 */
        ol.decimal {
            list-style-type: decimal; /* 默认十进制数字 */
        }

        ol.upper-roman {
            list-style-type: upper-roman; /* 大写罗马数字 */
        }

        ol.lower-alpha {
            list-style-type: lower-alpha; /* 小写字母字符 */
        }
    </style>
</head>
<body>
    <h2>无序列表</h2>
    <ul class="circle">
        <li>圆形项目符号1</li>
        <li>圆形项目符号2</li>
        <li>圆形项目符号3</li>
    </ul>

    <ul class="square">
        <li>方形项目符号1</li>
        <li>方形项目符号2</li>
        <li>方形项目符号3</li>
    </ul>

    <ul class="none">
        <li>无项目符号</li>
        <li>无项目符号</li>
        <li>无项目符号</li>
    </ul>

    <h2>有序列表</h2>
    <ol class="decimal">
        <li>十进制数字</li>
        <li>十进制数字</li>
        <li>十进制数字</li>
    </ol>

    <ol class="upper-roman">
        <li>罗马数字</li>
        <li>罗马数字</li>
        <li>罗马数字</li>
    </ol>

    <ol class="lower-alpha">
        <li>字母</li>
        <li>字母</li>
        <li>字母</li>
    </ol>
</body>
</html>

列表样式图像属性

list-style-image属性可用于指定图像/图标作为列表项标记。

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

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        ul { 
            list-style-image: url('/css/images/smiley.png');
        }
        ol{
            list-style-type: upper-roman;
            list-style-image: url('/css/images/smiley');      
        }
    </style>
</head>

<body>
    <ul>
        <li>这是无序列表</li>
        <li>我们为此制作了自定义标记</li>
    </ul>

    <ol>
        <li>为ol样式提供了错误的URL</li>
        <li>不会使用自定义图像。</li>
        <li>将使用指定的样式类型。</li>
    </ol>
</body>

</html>

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

列表样式位置属性

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

list-style-position: inside 如果文本进入第二行，文本将在标记下方换行。它还将有适当的缩进。
list-style-position: outside 如果文本进入第二行，文本将与第一行的开头对齐（位于项目符号的右侧）。
list-style-position: inherit 在嵌套列表的情况下，继承父列表的属性。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            padding: 10px;
        }
        ul {
            padding: 0;
            border-left: solid 2px;
        }
    </style>
</head>

<body>
  <ul style = "list-style-position:outside;">
      <li>
          列表样式位置属性是outside。在这种情况下，
          当文本溢出到下一行时，标记将位于列表文本区域的外部。
      </li>
      <li>自己检查一下。</li>
  </ul>
  <ul style = "list-style-position:inside;">
      <li>
          列表样式位置属性是inside。在这种情况下，
          当文本溢出到下一行时，标记将位于列表文本区域的内部。
      </li>
      <li>自己检查一下。</li>
  </ul>
</body>

</html>

列表样式简写属性

list-style属性允许您在单个声明中指定所有三个列表属性。

ul{
    list-style: url() | 标记类型 | 标记位置;
}

您可以按照任何顺序为list-style属性指定值。如果缺少任何值，将由相同属性的默认值填充。但必须至少传递一个值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        ul{
           list-style: url('/css/images/smiley.png') circle outside;
        }
    </style>
</head>

<body>
   <h2>列表样式简写</h2>
      <ul>
          <li>项目1</li>
          <li>项目2</li>
          <li>项目3</li>
          <li>项目4</li>
      </ul>
</body>
</html>

无序列表样式

以下示例展示了如何通过添加背景颜色、悬停效果和其他CSS属性来设置无序列表的样式。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 20px;
            display: flex;
            justify-content: space-around;
        }

        h2 {
            color: #2c3e50;
        }

        .styled-list {
            list-style-type: none; 
            padding: 0;
            margin: 20px 0;
        }

        .styled-list li {
            background-color: #e3f2fd; 
            margin: 5px 0; 
            padding: 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
        }

        .styled-list li::before {
            content: ""; 
            color: #3498db; 
            font-weight: bold;
            margin-right: 10px;
        }

        .styled-list ol li::before {
            content: counter(list-item) ". "; 
            font-weight: bold;
            color: #3498db;
        }

        .styled-list li:hover {
            background-color: #bbdefb; 
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="ul">
        <h2>无序列表</h2>
            <ul class="styled-list">
                <li>第一项</li>
                <li>第二项</li>
                <li>第三项</li>
                <li>第四项</li>
            </ul>
        </div>
    </div>
</body>

</html>

定义列表样式

以下示例展示了如何通过添加背景颜色、悬停效果和其他CSS属性来设置定义列表的样式。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 20px;
            display: flex;
            justify-content: space-around;
        }

        h2 {
            color: #2c3e50;
        }

        .styled-dl {
            margin: 20px 0;
            padding: 0;
        }

        .styled-dl dt {
            background-color: #e3f2fd;
            margin: 5px 0;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .styled-dl dd {
            margin-left: 20px;
            margin-bottom: 10px;
            padding-left: 10px;
            border-left: 3px solid #3498db;
            color: #555;
            background-color: #f1f8e9;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .styled-dl dt:hover,
        .styled-dl dd:hover {
            background-color: #bbdefb;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="dl">
        <h2>定义列表</h2>
            <dl class="styled-dl">
                <dt>HTML</dt>
                <dd> 
                    用于创建网页的标记语言标准。
                </dd>

                <dt>CSS</dt>
                <dd>
                    用于描述文档呈现的样式表语言。
                </dd>

                <dt>JavaScript</dt>
                <dd>
                    一种使网页具有交互性的编程语言。
                </dd>
            </dl>
        </div>
    </div>
</body>

</html>

列表样式类型参考

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

值	描述	示例
none	不显示任何标记。	不适用
disc (默认)	实心圆
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	标记为日语数字（平假名-伊吕波）	i, ro, ha, ni, ho, he, to
katakana-iroha	标记为日语数字（片假名-伊吕波）	I, RO, HA, NI, HO, HE, TO