Styling lists

List列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。

一个简单的例子

首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的特性，而某些特性却又各不相同。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>

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

•  <ul>  和  <ol>  元素有个 margin: 10px(1em) 0;和padding-letf: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）
• The <ul> and <ol> elements have a top and bottom margin of 16px (1em)  and a padding-left of 40px (2.5em.)
• <li>  默认是没有设置间距的
• The list items (<li> elements) have no set defaults for spacing.
• <dl>  默认margin: 10px(1em)  0；
• 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.)
• <p>  默认 margin: 16x(1em) 0;
• The <p> elements we've included for reference have a top and bottom margin of 16px (1em), the same as the different list types.

处理列表间距

当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图像（有时称为垂直节奏））和相互间的水平间距（您可以看到完成的样式示例 在Github上，也可以找到源代码。）

When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on Github, and find the source code too.)

用于文本样式和间距的CSS如下所示：

The CSS used for the text styling and spacing is as follows:

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

• 第一条规则设置一个网站字体，基准字体大小为10px。 页面上的所有内容都将继承这些。
• The first rule sets a sitewide font, and a baseline font size of 10px. These are inherited by everything on the page.
• 规则2和3为标题、不同的列表类型和段落以及设置了相对字体大小（这些列表的子元素将会继承这些），这就意味着每个段落和列表都将拥有相同的字体大小和上下间距,有助于保持垂直间距一致。
• 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.
• 规则4在段落和列表项目上设置相同的 line-height ，因此段落和每个单独的列表项目将在行之间具有相同的间距。 这也将有助于保持垂直间距一致。
• 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.
• 规则5-7适用于描述列表 - 我们在描述列表的条款和描述上设置与段落和列表项相同的行高度，以及 margin-bottom 为1.5 rem（与段落（p）和列表项目（li））相同。 再次，一致性是好的！ 我们还使描述术语具有粗体字体，因此它们在视觉上脱颖而出。
• 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> 或  <ol> 元素上设置：

Now we've looked at general spacing for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on <ul> or <ol> elements:

• list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
• 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 ：设置项目符号是否出现在列表项内，或者在每个项目开始之前出现在其外。
• list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.
• list-style-image ：允许您为项目符号使用自定义图像，而不是简单的方形或圆形。
• list-style-image: Allows you to use a custom image for the bullet, rather than a simple square or circle.

符号样式

像上面所提及的， list-style-type  属性允许你设置项目符号点的类型，在我们的例子中，我们设置了使用大写罗马数字有序列表：

As mentioned above, the list-style-type property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use upper-case roman numerals, with:

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

如下：

This gives us the following look:

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

You can find a lot more options by checking out the list-style-type reference page.

项目符号位置

list-style-position 属性设置项目符号是否显示在列表项目中，或者在每个项目开始之前出现在其外部。 默认值在外面，这导致子弹位于列表项之外，如上所示。

The list-style-position property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is outside, which causes the bullets to sit outside the list items, as seen above.

If you set the value to inside, the bullets will sit inside the lines:

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

使用自定义的项目符号图片

list-style-image 属性 允许对于项目符号使用自定义图片，其语法相当简单：

The list-style-image property allows you to use a custom image for your bullet. The syntax is pretty simple:

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

然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用background 属性系列，您将在Styling boxes模块中了解更多信息。 现在，这是一个尝试！

However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the background family of properties, which you'll learn a lot more about in the Styling boxes module. For now, here's a taster!

在我们完成的例子中，我们已经创建了无序列表，如上所示（除了上面已经看到的）

In our finished example, we have styled the unordered list like so (on top of what you've already seen above):

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

Here we've done the following:

• 将 <ul> 的 padding-left 从默认的40px设置为20px，然后在列表项上设置相同的数值。 这就是说，整个列表项仍然排列在有序列表项和描述列表中，但是列表项有一些用于背景图像的填充。 如果我们没有设置padding，背景图像将与列表项文本重叠，这将看起来很乱。
• 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.
• 将 list-style-type 设置为none，以便默认情况下不会显示项目符号。 我们将使用 background 属性来代替项目符号。
• 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: 你想充当项目符号的图片文件的参考路径
  • background-image: This references the path to the image file you want to use as the bullet.
  • background-position: 这定义了所选元素背景中的图像将出现在哪里 - 在这种情况下，我们说0 0，这意味着项目符号将出现在每个列表项的最左上侧。
  • 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: 设置背景图片的大小。 我们理想地想要项目符号与列表项（或非常小一点或更大）的大小相同。 我们使用的尺寸为1.6rem（16像素），它非常适合我们允许的项目符号坐在里面的20px padding ， 16px加上4px的空格间距，可以使项目符号和列表项文本效果更好。，
  • 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：默认情况瞎，背景图片重复直到填充满整个背景空间，我们只想在每个例子中，背景图片只复制一次，所以我们设置no-repeat.
  • 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.

This gives us the following result:

list-style 速记

上述提到的三种属性可以用一个单独的速记属性 list-style来设置。例如：

The three properties mentioned above can all be set using a single shorthand property, list-style. For example, the following CSS:

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

可以被如下方式代替：

Could be replaced by this:

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

属性值可以任意顺序排列，你可以一个，两个或者三个值都设置（该属性的默认值为disc,none,outside），如果指定了类型和图像，如果由于某种原因导致图像无法加载，则该类型将用作回退。

The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are disc, none, and outside). If both a type and an image are specified, the type is used as a fallback if the image can't be loaded for some reason.

Controlling list counting

有时，您可能想在有序列表上进行不同的计数。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您

Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps or more than 1. HTML and CSS have have some tools to help you here.

start

<ol>的start属性允许你开始列表的技术从一个除了1.的开始, 如下：

The start attribute allows you to start the list counting from a number other than 1. The following example:

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

输出的结果：

Gives you this output:

reversed

revers”，“ol 属性将启动列表倒计数而不是向上。 以下示例：

The reversed attribute will start the list counting down instead of up. The following example:

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

Gives you this output:

value

value 属性允许你设置你的列表项指定数值，如下示例:

The value attribute allows you to set your list items to specific numerical values. The following example:

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

Gives you this output:

Active learning: Styling a nested list

In this active learning session, we want you to take what you've learnt above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:

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.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

<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计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂。 我们建议您查看这些，如果你想拓展自己。 看到：

CSS counters provide advanced tools for customizing list counting and styling, but they are are quite complex. We recommend looking into these if you want to stretch yourself. See:

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

Summary

Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.