CSS - 列表样式

上一页
下一页

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

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

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

目录


 

列表类型

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

  • 有序列表 (<ol>)：当需要按特定顺序呈现项目时使用。通常用于过程、步骤、说明或任何顺序信息，其中顺序很重要。
  • 无序列表 (<ul>)：当项目的顺序无关紧要，并且您想将项目作为一组呈现时使用。通常用于功能、好处、选项或任何非顺序信息的列表。
  • 定义列表 (<dl>)：用于术语及其相应的定义。

List Style Type 属性

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

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Unordered List Styles */
        ul.circle {
            list-style-type: circle; /* Circle bullets */
        }

        ul.square {
            list-style-type: square; /* Square bullets */
        }

        ul.none {
            list-style-type: none; /* No bullets */
        }

        /* Ordered List Styles */
        ol.decimal {
            list-style-type: decimal; /* Default decimal numbers */
        }

        ol.upper-roman {
            list-style-type: upper-roman; /* Uppercase Roman numerals */
        }

        ol.lower-alpha {
            list-style-type: lower-alpha; /* Lowercase alphabetic characters */
        }
    </style>
</head>
<body>
    <h2>Unordered Lists</h2>
    <ul class="circle">
        <li>Circle bullet 1</li>
        <li>Circle bullet 2</li>
        <li>Circle bullet 3</li>
    </ul>

    <ul class="square">
        <li>Square bullet 1</li>
        <li>Square bullet 2</li>
        <li>Square bullet 3</li>
    </ul>

    <ul class="none">
        <li>No bullet </li>
        <li>No bullet </li>
        <li>No bullet </li>
    </ul>

    <h2>Ordered Lists</h2>
    <ol class="decimal">
        <li>Decimal number </li>
        <li>Decimal number </li>
        <li>Decimal number </li>
    </ol>

    <ol class="upper-roman">
        <li>Roman numeral </li>
        <li>Roman numeral </li>
        <li>Roman numeral </li>
    </ol>

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

List Style Image 属性

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> This is unordered list </li>
        <li> We made custom marker for this </li>
    </ul>

    <ol>
        <li> Incorrect URL given for ol style </li>
        <li> No custom image will be used.</li>
        <li> Specified style type will be used. </li>
    </ol>
</body>

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

List Style Position 属性

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>
          The list style position property is outside. In this 
          case when text overflows to the next line, the marker 
          will lay outside the text area of list. 
      </li>
      <li> Check out yourselves. </li>
  </ul>
  <ul style = "list-style-position:inside;">
      <li>
          The list style position property is inside. In this 
          case when text overflows to the next line, the marker 
          will lay inside the text area of list. 
      </li>
      <li> Check out yourselves. </li>
  </ul>
</body>
</html>

List Style 简写属性

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

ul{
    list-style: url() | Marker Type |  Marker Position;
}

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

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>List style shorthand</h2>
      <ul>
          <li> Item 1</li>
          <li> Item 2</li>
          <li> Item 3</li>
          <li> Item 4</li>
      </ul>
</body>
</html>

无序列表样式

以下示例显示如何通过添加背景颜色、悬停效果和其他 CSS 属性来设置 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>Unordered List</h2>
            <ul class="styled-list">
                <li>First item</li>
                <li>Second item</li>
                <li>Third item</li>
                <li>Fourth item</li>
            </ul>
        </div>
    </div>
</body>

</html>

定义列表样式

以下示例显示如何通过添加背景颜色、悬停效果和其他 CSS 属性来设置 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>Definition List</h2>
            <dl class="styled-dl">
                <dt>HTML</dt>
                <dd> 
                    A standard markup language for creating web 
                    pages.
                </dd>

                <dt>CSS</dt>
                <dd>
                    A style sheet language used for describing the 
                    presentation of a document.
                </dd>

                <dt>JavaScript</dt>
                <dd>
                    A programming language that enables interactive 
                    web pages.
                </dd>
            </dl>
        </div>
    </div>
</body>

</html>

List Style Type 参考

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

值 描述 示例
none 不显示任何标记。 NA
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
打印页面
上一页
下一页
广告
© . All rights reserved.