一个简单的例子

首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的特性，而某些特性却又各不相同。Github上有未加载样式的例子(也可以查看源码。)

例子中列表的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>Humous</li>
  <li>Pitta</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 pitta, 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 pitta with salad, humous, 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>Humous</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pitta</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>

现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值:

• The <ul> and <ol> elements have a top and bottom margin of 16px (1em)  and a padding-left of 40px (2.5em.)
• The list items (<li> elements) have no set defaults for spacing.
• The <dl> element has a top and bottom margin of 16px (1em), but no padding set.
• The <dd> elements have margin-left of 40px (2.5em.)
• The <p> elements we've included for reference have a top and bottom margin of 16px (1em), the same as the different list types.

处理列表间距

在样式列表中，您需要调整它们的样式，使它们保持与其周围元素相同的垂直间距(例如段落和图像;有时称为垂直节奏)，以及相同的水平间距(您可以看到 ="external"href ="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">完成样式示例在Github上， "href ="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">也找到源代码。)

用于文本样式和间距的CSS如下:

/* General styles */

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;
}

/* Description list styles */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}

• The first rule sets a sitewide font, and a baseline font size of 10px. These are inherited by everything on the page.
• Rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. This means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent.
• Rule 4 sets the same line-height on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. This will also help to keep the vertical rhythm consistent.
• Rules 5–7 apply to the description list — we set the same line-height on the description list terms and descriptions as we did with the paragraphs and list items, and a margin-bottom of 1.5rem — the same as the paragraphs (p) and list items (li) currently have. Again, consistency is good! We also make the description terms have bold font, so they visually stand out easier. 

列表特定样式

现在我们看看列表的一般间距，让我们探索一些列表特定的属性。 您应该了解的三个属性，您可以在 < ul> / a>或 < ol> 元素:

• list-style-type: Sets the type of bullets to use for the list, for example square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.
• list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.
• list-style-image: Allows you to use a custom image for the bullet, rather than a simple square or circle.

项目符号样式

如上所述， list-style-type 属性允许您设置 用于子弹点的子弹类型。 在我们的示例中，我们已将有序列表设置为使用大写罗马数字，其中:

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

这给了我们下面的样子:

0px auto; width:376px;">

您可以通过 list-style-type 找到更多选项 参考页。

项目符号位置

list-style-position 属性设置项目符号是否显示在列表项中 ，或在每个项目开始之前它们之外。 默认值为 outside ，这使得项目符号位于列表项之外，如上所示。

如果在里面设置的值，子弹将位于行内:

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

0px auto; width:370px;">

使用自定义项目符号图像

list-style-image 属性允许您使用自定义图片 子弹。 语法很简单:

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

然而，这种性质在控制子弹的位置，尺寸等方面有点受限。 您最好使用 背景 属性系列，您将了解更多有关 在样式框模块中。 现在，这里是一个品酒师！

在我们完成的示例中，我们已经对无序列表进行了样式设置(在上面已经看到的顶部):

ul {
  padding-left: 2rem;
}

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

这里我们做了以下:

• Set the padding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.
• Set the list-style-type to none, so that no bullet appears by default. We're going to use background properties to handle the bullets instead.
• Inserted a bullet onto each unordered list item. The relevant properties are as follows:
  • background-image: This references the path to the image file you want to use as the bullet.
  • background-position: This defines where in the background of the selected element the image will appear — in this case we are saying 0 0, which means the bullet will appear in the very top left of each list item.
  • background-size: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of 1.6rem (16px), which fits very nicely with the 20px padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.
  • background-repeat: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of no-repeat.

这给我们以下结果:

0px auto; width:124px;">

列表样式的速记

上述三个属性都可以使用单个简写属性 list-style 进行设置 。 例如，以下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.以下示例:

<ol start="4">
  <li>Toast pitta, 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 pitta with salad, humous, and fried halloumi.</li>
</ol>

给你这个输出:

逆转

颠倒 属性将开始向下计数列表，而不是向上计数。 下面的例子:

<ol start="4" reversed>
  <li>Toast pitta, 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 pitta with salad, humous, and fried halloumi.</li>
</ol>

给你这个输出:

值

值 属性允许您将列表项设置为特定的数值 。 下面的例子:

<ol>
  <li value="2">Toast pitta, 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 pitta with salad, humous, and fried halloumi.</li>
</ol>

给你这个输出:

主动学习:对嵌套列表进行样式化

在这个主动的学习课程，我们希望你采取你上面学到的，并在一个嵌套列表的样式。 我们为您提供了HTML，我们希望您:

1. Give the unordered list square bullets.
2. Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.
3. Give the ordered list lower alphabetical bullets.
4. Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.

如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul>
  <li>First, light the candle.</li>
  <li>Next, open the box.</li>
  <li>Finally, place the three magic items in the box, in this exact order, to complete the spell:
    <ol>
      <li>The book of spells</li>
      <li>The shiny rod</li>
      <li>The goblin statue</li>
    </ol>
  </li>
</ul></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>

  <h2>Output</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="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li {\n  line-height: 1.5;\n}\n\nol li {\n  list-style-type: lower-alpha\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

也可以看看

CSS计数器提供了用于自定义列表计数和样式的高级工具，但是它们相当复杂。 我们建议研究这些，如果你想伸展自己。 看到:

• @counter-style
• counter-increment
• counter-reset

概要

一旦你知道一些相关的基本原则和特定的属性，列表是相对容易得到风格的悬念。 在下一篇文章中，我们将介绍链接样式技术。