css 文本间距-动手练习：设置嵌套列表的样式

设置列表样式

大部分与其他文本相同，但仍然有一些特殊的 CSS 属性需要了解，以及一些可供参考的最佳实践，本文将探讨所有这些。

前提：

计算机基础知识、HTML基础知识（学过的HTML简介）、CSS基础知识（学过的CSS基础知识）、基础CSS文本和字体样式。

目标：

熟悉与列表相关的样式和最佳实践

首先，让我们看一个简单的列表示例。 在文章中我们将看到无序、有序和描述性列表——它们都有相似的风格特征，但个体特征不同。 Github 上是否有其他样式的反例（另请参阅源代码）。

示例列表的 HTML 代码如下：

html

<h2>Shopping (unordered) list</h2>
<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>
<ul>
  <li>Hummus</li>
  <li>Pita</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>
<h2>Recipe (ordered) list</h2>
<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>
<ol>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
<h2>Ingredient description list</h2>
<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
</p>
<dl>
  <dt>Hummus</dt>
  <dd>
    A thick dip/sauce generally made from chick peas blended with tahini, lemon
    juice, salt, garlic, and other ingredients.
  </dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>
    A semi-hard, unripened, brined cheese with a higher-than-usual melting
    point, usually made from goat/sheep milk.
  </dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

现在，如果您转到示例的演示页面，并使用浏览器开发人员工具查看这些列表元素，您会注意到几个默认样式预设：

在设计列表样式时，需要调整样式，使其保持与周围元素（例如段落和图像，有时称为垂直节奏）相同的垂直宽度以及彼此相对的水平宽度（可以参考 Github 上的这个）完成添加样式的例子css 文本间距，源代码也可以找到）。

文本样式和宽度的 CSS 如下所示：

CSS

/* 通用样式 */
html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}
h2 {
  font-size: 2rem;
}
ul,
ol,
dl,
p {
  font-size: 1.5rem;
}
li,
p {
  line-height: 1.5;
}
/* 描述列表样式 */
dd,
dt {
  line-height: 1.5;
}
dt {
  font-weight: bold;
}

现在我们了解了列表的一般宽度，让我们检查一下列表具有的一些特定属性。我们从三个属性开始，这些属性可以在

如前所述，list-style-type 属性允许您设置项目符号的类型，在我们的示例中，我们在有序列表上设置小写罗马数字：

CSS

ol {
  list-style-type: upper-roman;
}

显示效果如下：

您可以在列表样式类型参考页面上找到更多选项。

list-style-position 设置项目符号在每个项目开始之前是出现在列表项的内部还是外部。 如上所示，默认为outside，将项目符号放置在列表项之外。

如果该值设置为 inside，则项目符号将放置在线条内部。

CSS

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

list-style-image 属性允许将自定义图像用于项目符号。 它的语法非常简单：

CSS

ul {
  list-style-image: url(star.svg);
}

但是css 文本间距，此属性在控制项目符号位置、大小等方面受到限制。最好使用背景属性系列，您将在背景和边框一文中了解更多信息。 在这里我们只是尝试一下！

在我们的示例中，我们的无序列表最终看起来像这样（如之前所示位于底部）：

CSS

ul {
  padding-left: 2rem;
  list-style-type: none;
}
ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

我们做这样的事情：

显示效果如下：

可以使用单个缩写属性列表样式来设置上述三个属性。 例如，以下 CSS：

CSS

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

可以替换为：

ul {
  list-style: square url(example.png) inside;
}

属性值可以任意顺序，可以设置一个、两个或全部三个值（排除属性使用disc、none和outside的默认值），如果指定了type和image，如果由于某种原因如果图像加载失败，将使用类型作为后备。

有时，您可能想对排序列表执行不同的计数方法。 例如：从 1 以外的数字开始，或者从侧面倒数，或者以小于 1 的步数进行计数。HTML 和 CSS 有一些工具可以帮助您：

属性允许您从 1 以外的数字开始计数。以下示例：

html

<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

输出结果如下：

属性将反转列表的计数。 下面的例子：

html

<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

输出结果如下：

注意：如果向后计数的列表项数量大于start属性的值，则计数将继续归零并正向减少。

属性允许设置列表项指定值，如下示例：

html

<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  </li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

输出结果如下：

注意：即使您使用非数字列表样式类型，您仍然需要在 value 属性中使用等效的数字值。

在本次学习课程中，我们希望您尝试使用上面学到的内容来设计嵌套列表的样式。 我们已经提供了 HTML 代码，请在其基础上完成以下任务：

为这个无序列表提供圆形项目符号。 为无序列表和有序列表项指定的列宽为其字体大小的 1.5 倍。 为有序列表提供小写项目符号。 请随意使用该列表，尝试不同的项目符号类型、间距和各种其他属性。

如果您犯了错误，您可以随时单击重置按钮来重置。 如果您确实遇到困难并且无法继续，请单击“显示解决方案”按钮以查看可能的解决方案。

<div
  class="body-wrapper"
  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML 输入</h2>
  <textarea
    id="code"
    class="html-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<ul>
  <li>首先，点亮蜡烛。</li>
  <li>其次，打开盒子。</li>
  <li>最后，以这个特定顺序，将三个魔法物品依次放在盒子中，完成这个咒语：
    <ol>
      <li>魔法之书（The book of spells）</li>
      <li>闪光棒（The shiny rod）</li>
      <li>哥布林雕像（The goblin statue）</li>
    </ol>
  </li>
</ul>
  </textarea>
  <h2>CSS 输入</h2>
  <textarea
    id="code"
    class="css-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>
  <h2>输出</h2>
  <div
    class="output"
    style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
  <div class="controls">
    <input
      id="reset"
      type="button"
      value="重置"
      style="margin: 10px 10px 0 0;" />
    <input
      id="solution"
      type="button"
      value="显示解答"
      style="margin: 10px 0 0 10px;" />
  </div>
</div>

const htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
const htmlCode = htmlInput.value;
const cssCode = cssInput.value;
const output = document.querySelector(".output");
const solution = document.getElementById("solution");
const styleElem = document.createElement("style");
const headElem = document.querySelector("head");
headElem.appendChild(styleElem);
function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}
reset.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});
solution.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = `ul {
  list-style-type: square;
}
ul li,
ol li {
  line-height: 1.5;
}
ol {
  list-style-type: lower-alpha;
}`;
  drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

一旦掌握了一些基本原则和所涉及的特定属性，列表样式就相对容易理解。 在上一篇文章中，我们将转向另一个主题 - 设置链接样式的各种方法。

CSS 计数器提供了用于自定义列表计数和样式的中级工具，但它们相当复杂。 如果您想更深入地了解，请查看以下资源：

发现此页面内容有问题？ 想更多地参与吗？ 了解如何做出贡献。

本页面最后一次修改是由 MDN 贡献者于 2023 年 7 月 9 日进行的。