CSS 列表（Lists）7

WEI_Gaot
133 阅读7分钟

核心列表属性:

  1. list-style-type

    • 作用: 设置列表项标记 (marker) 的类型。这是最常用的列表样式属性。

    • 值:

      • 用于

          (无序列表) 的常见值:

          • disc: (默认值) 实心圆点 ●
          • circle: 空心圆圈 ○
          • square: 实心方块 ■
          • none: 不显示任何标记。

        • 用于

            (有序列表) 的常见值:

            • decimal: (默认值) 十进制数字 (1, 2, 3, ...)。
            • decimal-leading-zero: 带前导零的十进制数字 (01, 02, 03, ...)。
            • lower-roman: 小写罗马数字 (i, ii, iii, ...)。
            • upper-roman: 大写罗马数字 (I, II, III, ...)。
            • lower-alpha / lower-latin: 小写英文字母 (a, b, c, ...)。
            • upper-alpha / upper-latin: 大写英文字母 (A, B, C, ...)。
            • lower-greek: 小写希腊字母 (α, β, γ, ...)。

          1. 其他语言/脚本的值: (支持程度取决于浏览器和操作系统)

            • armenian, georgian: 亚美尼亚/格鲁吉亚数字。
            • cjk-ideographic: 表意数字 (一, 二, 三, ...)。
            • hiragana, katakana: 日语平假名/片假名序号 (あ, い, う, ... / ア, イ, ウ, ...)。
            • hebrew: 希伯来数字。
            • ethiopic-numeric: 埃塞俄比亚数字。
            • ... 还有更多用于特定语言和区域的计数系统。

          2. 符号值 (CSS3):

            • : 使用指定的字符串作为标记 (例如 "✓ ")。
            • symbols(): 定义一个循环使用的符号列表 (例如 symbols(cyclic "*" "+" "-"))。

      • 示例: list-style-type: square;, list-style-type: lower-roman;, list-style-type: none;

    • list-style-image

      • 作用: 使用一个图像作为列表项的标记，而不是使用 list-style-type 定义的符号或数字。

      • 值:

        • none: (默认值) 不使用图像标记。
        • url(): 指定图像文件的路径。

      • 注意: 如果同时设置了 list-style-type 和 list-style-image，并且图像加载成功，list-style-image 会覆盖 list-style-type。如果图像加载失败，则会回退到 list-style-type。精确控制图片标记的大小和位置比较困难，没有专门的属性。

      • 示例: list-style-image: url("images/bullet.png");

    • list-style-position

      • 作用: 指定列表项标记 (marker) 相对于列表项内容框的位置。

      • 值:

        • outside: (默认值) 标记位于列表项内容框的外部。文本内容会垂直对齐，不会因为标记而缩进。
        • inside: 标记位于列表项内容框的内部，就像是列表项内容的第一个行内元素。文本内容会围绕标记缩进。

      • 示例: list-style-position: inside;

    • list-style (简写属性)

      • 作用: 在一个声明中设置 list-style-type, list-style-position, 和 list-style-image。

      • 语法: 可以包含这三个属性的值，顺序不固定，省略的值会被设置为其初始值。

      • 示例:

        • list-style: square inside; (类型为方块，位置在内部，图片为 none)
        • list-style: lower-roman url("star.gif") outside; (类型为小写罗马数字，使用图片覆盖，位置在外部)
        • list-style: none; (等同于 list-style-type: none;)

      • 重要: 使用简写属性时要小心，未指定的值会被重置为默认值。例如，如果你之前单独设置了 list-style-image，然后使用 list-style: circle;，那么图片设置会被 none 覆盖。

与列表样式相关的其他属性（虽然不专属于列表，但常用于列表样式化）：

  • padding-left / padding-inline-start: 控制列表项内容相对于标记的缩进。浏览器通常会给

      和
        设置默认的 padding-left 或 padding-inline-start 来为标记留出空间。如果你设置 list-style-position: inside; 或者 list-style-type: none;，你可能需要手动调整 padding-left 为 0 或其他期望的值。

        • 示例: ul { list-style: none; padding-left: 0; }

      1. margin: 控制整个列表 (ul/ol) 或单个列表项 (li) 与其他元素的间距。浏览器通常也给 ul/ol 设置默认的 margin-top 和 margin-bottom。

      2. display: list-item; : 这是

      3. 元素的默认 display 值。如果需要让其他元素（如 div）表现得像列表项并拥有标记，可以设置此值。

      4. counter-reset 和 counter-increment (CSS Counters): 可以用来创建自定义的、更复杂的列表编号系统，不局限于 list-style-type 提供的样式。常与 ::before 或 ::marker 伪元素配合使用。

      5. ::marker 伪元素 (CSS Pseudo-Element): 这是一个较新的伪元素，允许你直接选择和样式化列表项的标记本身（包括其内容、颜色、字体大小等），提供了比传统 list-style-* 属性更精细的控制。

        • 示例: li::marker { color: red; font-size: 1.2em; content: "► "; }

    总结列表属性:

    属性主要作用常用值
    list-style-type设置标记的类型 (符号/数字/字母)disc, circle, square, decimal, lower-roman, upper-alpha, none, , symbols() 等
    list-style-image使用图片作为标记none, url()
    list-style-position设置标记相对于内容的位置outside (默认), inside
    list-style上述三个属性的简写组合值，如 square inside, none
    ::marker (伪元素)直接样式化标记本身 (颜色、字体、内容等)CSS 属性，如 color: red;, content: "• ";

    案例 1

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 列表属性示例</title>
    <link rel="stylesheet" href="111.css">
</head>
<body>

    <h1>CSS 列表属性演示</h1>

    <section class="container">
        <h2>无序列表样式 (ul)</h2>

        <h3>默认样式 (disc)</h3>
        <ul class="list-default">
            <li>列表项 1</li>
            <li>列表项 2</li>
            <li>列表项 3</li>
        </ul>

        <h3>方形标记 (square)</h3>
        <ul class="list-square">
            <li>列表项 A</li>
            <li>列表项 B</li>
            <li>列表项 C</li>
        </ul>

        <h3>空心圆标记 (circle)</h3>
        <ul class="list-circle">
            <li>列表项 Alpha</li>
            <li>列表项 Beta</li>
            <li>列表项 Gamma</li>
        </ul>

        <h3>无标记 (none)</h3>
        <ul class="list-none">
            <li>列表项 一</li>
            <li>列表项 二</li>
            <li>列表项 三</li>
        </ul>

        <h3>自定义图片标记</h3>
        <ul class="list-image">
            <li>使用图片作为标记 1</li>
            <li>使用图片作为标记 2</li>
            <li>使用图片作为标记 3 (如果图片加载失败会回退到 square)</li>
        </ul>

        <h3>标记在内部 (inside)</h3>
        <ul class="list-inside">
            <li>这是一个标记在内部的列表项，可以看到文本是如何围绕标记缩进的。</li>
            <li>第二项也是如此。</li>
        </ul>
    </section>

    <section class="container">
        <h2>有序列表样式 (ol)</h2>

        <h3>默认样式 (decimal)</h3>
        <ol class="list-decimal">
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ol>

        <h3>小写罗马数字 (lower-roman)</h3>
        <ol class="list-lower-roman">
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ol>

        <h3>大写字母 (upper-alpha)</h3>
        <ol class="list-upper-alpha">
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ol>

        <h3>带前导零的数字 (decimal-leading-zero)</h3>
        <ol class="list-leading-zero" start="8"> <!-- 可以使用 start 属性改变起始编号 -->
            <li>第八项</li>
            <li>第九项</li>
            <li>第十项</li>
        </ol>

        <h3>自定义字符串标记 (string)</h3>
        <ol class="list-custom-string">
            <li>任务 1</li>
            <li>任务 2</li>
            <li>任务 3</li>
        </ol>
    </section>

    <section class="container">
        <h2>使用 list-style 简写</h2>
        <ul class="list-shorthand">
            <li>简写设置：方形、内部</li>
            <li>第二项</li>
        </ul>
    </section>

    <section class="container">
        <h2>使用 ::marker 伪元素自定义</h2>
        <ul class="list-marker-custom">
            <li>使用 ::marker 设置红色箭头</li>
            <li>每个标记都应用相同样式</li>
            <li>可以控制标记的字体、颜色等</li>
        </ul>
        <ol class="ordered-marker-custom">
            <li>有序列表也可以用 ::marker</li>
            <li>甚至可以覆盖默认编号</li>
            <li>但通常用于样式化现有标记</li>
        </ol>
    </section>

</body>
</html>

        //111.css
body {
  font-family: sans-serif;
  line-height: 1.6;
  margin: 20px;
  color: #333;
}

h1, h2, h3 {
  color: steelblue;
  margin-bottom: 10px;
}
h2 { margin-top: 30px; border-bottom: 1px solid lightgray; padding-bottom: 5px;}
h3 { margin-top: 20px; font-size: 1.1em; color: #555;}

.container {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 30px;
  border-radius: 4px;
}

/* 基础列表样式 (浏览器通常有默认的 padding/margin) */
ul, ol {
  /* 可以取消浏览器默认缩进 */
  /* padding-left: 20px; */
  /* margin-top: 0; */
  /* margin-bottom: 1em; */
}

li {
  margin-bottom: 5px; /* 列表项之间加点间距 */
}


/* --- 无序列表样式 --- */
.list-default {
  /* 默认 list-style-type: disc; */
}

.list-square {
  list-style-type: square;
}

.list-circle {
  list-style-type: circle;
}

.list-none {
  list-style-type: none;
  padding-left: 0; /* 通常需要移除默认缩进 */
}

.list-image {
  /* 提供一个有效的图片 URL */
  /* 如果图片无效，可以放一个本地图片路径 */
  /* list-style-image: url('path/to/your/bullet.png'); */
  /* 这里用一个 data URI 代替，如果图片无效，则显示 square */
  list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" fill="green"/></svg>');
  list-style-type: square; /* 设置回退样式 */
}

.list-inside {
  list-style-position: inside;
  list-style-type: square; /* 方便看效果 */
  background-color: #eee; /* 加背景突出显示 */
  padding-left: 10px; /* 可能需要微调缩进 */
}

/* --- 有序列表样式 --- */
.list-decimal {
  /* 默认 list-style-type: decimal; */
}

.list-lower-roman {
  list-style-type: lower-roman;
}

.list-upper-alpha {
  list-style-type: upper-alpha;
}

.list-leading-zero {
  list-style-type: decimal-leading-zero;
}

.list-custom-string {
  list-style-type: "✅ "; /* 使用字符串作为标记，注意后面的空格 */
}


/* --- list-style 简写 --- */
.list-shorthand {
  /* type position image */
  list-style: square inside;
}


/* --- ::marker 伪元素自定义 --- */
.list-marker-custom li::marker {
  color: red;
  content: "→ "; /* 替换默认标记内容 */
  font-size: 1.1em;
  font-weight: bold;
}

.ordered-marker-custom li::marker {
  color: darkcyan;
  font-weight: bold;
  /* content: counter(list-item) ". "; /* 可以结合 counter 显示数字 */
  /* content: "章 " counter(list-item, cjk-ideographic) ": "; /* 自定义复杂编号 */
}

/* 如果想完全隐藏默认标记并用 ::marker 完全自定义 */
/* .list-marker-custom { list-style: none; } */
/* .list-marker-custom li::before { content: "→ "; color: red; ... } */ /* 旧方法是用 ::before */

    案例 2

    <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>列表属性代码示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* 无序列表样式 */
    .custom-ul {
      list-style-type: square; /* 其他选项: disc, circle, none */
      padding-left: 30px;
      margin-bottom: 20px;
      color: #333;
    }

    /* 有序列表样式 */
    .custom-ol {
      list-style-type: upper-roman; /* 其他选项: decimal, lower-alpha, upper-alpha */
      padding-left: 30px;
      margin-bottom: 20px;
      color: #00695c;
    }

    /* 去除列表符号，通常用于导航菜单 */
    .nav-list {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 20px;
    }

    .nav-list li {
      background: #2196f3;
      color: white;
      padding: 8px 12px;
      border-radius: 5px;
    }

    .nav-list li:hover {
      background: #1976d2;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h2>无序列表（自定义符号 square）</h2>
  <ul class="custom-ul">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <h2>有序列表（罗马数字 upper-roman）</h2>
  <ol class="custom-ol">
    <li>登录</li>
    <li>选择产品</li>
    <li>支付</li>
  </ol>

  <h2>自定义导航列表（去掉默认符号）</h2>
  <ul class="nav-list">
    <li>首页</li>
    <li>关于</li>
    <li>联系</li>
  </ul>

</body>
</html>
avatar
文章
阅读
粉丝