path: root/files/zh-cn/learn/css/为文本添加样式/styling_lists/index.html

---
title: 样式列表
slug: Learn/CSS/为文本添加样式/Styling_lists
translation_of: Learn/CSS/Styling_text/Styling_lists
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>

<p class="summary"><a href="/zh-CN/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">List列表</a> 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前置知识:</th>
   <td>Basic computer literacy, HTML basics (study <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS basics (study <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">基本文本和字体样式</a>.</td>
  </tr>
  <tr>
   <th scope="row">目标:</th>
   <td>熟悉与列表相关的样式和最佳实践</td>
  </tr>
 </tbody>
</table>

<h2 id="一个简单的例子">一个简单的例子</h2>

<p>首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">Github</a>上有未加载样式的例子（也可以查看<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">源码</a>。）</p>

<p>例子中列表的HTML代码如下：</p>

<pre class="brush: html">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Humous&lt;/li&gt;
  &lt;li&gt;Pitta&lt;/li&gt;
  &lt;li&gt;Green salad&lt;/li&gt;
  &lt;li&gt;Halloumi&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;Ingredient description list&lt;/h2&gt;

&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;

&lt;dl&gt;
  &lt;dt&gt;Humous&lt;/dt&gt;
  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
  &lt;dt&gt;Pitta&lt;/dt&gt;
  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
  &lt;dt&gt;Halloumi&lt;/dt&gt;
  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
  &lt;dt&gt;Green salad&lt;/dt&gt;
  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
&lt;/dl&gt;</pre>

<p>现在，如果你去到例子的展示页面，并使用<a href="/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">浏览器开发者工具</a>查看那些列表元素，你会注意到若干个默认的样式预设值：</p>

<ul>
 <li> {{htmlelement("ul")}}  和  {{htmlelement("ol")}}  元素设置{{cssxref("margin")}}的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。</li>
 <li>{{htmlelement("li")}}  默认是没有设置间距的。</li>
 <li>{{htmlelement("dl")}}  元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。</li>
 <li>{{htmlelement("dd")}} 元素设置为： {{cssxref("margin-left")}}  <code>40px</code> (<code>2.5em</code>)。</li>
 <li>在参考中提到的 {{htmlelement("p")}}  元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同。</li>
</ul>

<h2 id="处理列表间距">处理列表间距</h2>

<p>当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">完成的样式示例</a> ，也可以找到<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">源代码</a>。）</p>

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

<pre class="brush: 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;
}
</pre>

<ul>
 <li>第一条规则集设置一个网站字体，基准字体大小为10px。 页面上的所有内容都将继承该规则集。</li>
 <li>规则集2和3为标题、不同的列表类型和段落以及设置了相对字体大小（这些列表的子元素将会继承该规则集），这就意味着每个段落和列表都将拥有相同的字体大小和上下间距,有助于保持垂直间距一致。</li>
 <li>规则集4在段落和列表项目上设置相同的 {{cssxref("line-height")}} ，因此段落和每个单独的列表项目将在行之间具有相同的间距。 这也将有助于保持垂直间距一致。</li>
 <li>规则集5-7适用于描述列表 - 我们在描述列表的术语和其描述上设置与段落和列表项相同的行高，以及 {{cssxref("margin-bottom")}} 为1.5 rem（与段落（p）和列表项目（li））相同。 再次强调一遍，这里很好地实现了一致性！ 我们还使描述术语具有粗体字体，因此它们在视觉上脱颖而出。<span id="cke_bm_126E" style="display: none;"> </span></li>
</ul>

<h2 id="列表特定样式">列表特定样式</h2>

<p>现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或  {{htmlelement("ol")}} 元素上设置：</p>

<ul>
 <li>{{cssxref("list-style-type")}} ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。</li>
 <li>{{cssxref("list-style-position")}} ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。</li>
 <li>{{cssxref("list-style-image")}} ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。</li>
</ul>

<h3 id="符号样式">符号样式</h3>

<p>像上面所提及的， {{cssxref("list-style-type")}}  属性允许你设置项目符号点的类型，在我们的例子中，我们在有序列表上设置了大写罗马数字：</p>

<pre class="brush: css">ol {
  list-style-type: upper-roman;
}</pre>

<p>效果显示如下：</p>

<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>

<p>您可以通过  {{cssxref("list-style-type")}}  参考页面查找到更多选项。</p>

<h3 id="项目符号位置">项目符号位置</h3>

<p>{{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。</p>

<p>如果值设置为 inside，项目条目则位于行内。</p>

<pre class="brush: css">ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}</pre>

<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>

<h3 id="使用自定义的项目符号图片">使用自定义的项目符号图片</h3>

<p>{{cssxref("list-style-image")}} 属性允许对于项目符号使用自定义图片。其语法相当简单：</p>

<pre class="brush: css">ul {
  list-style-image: url(star.svg);
}</pre>

<p>然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 <a href="/zh-CN/docs/Learn/CSS/Styling_boxes">Styling boxes</a> 模块中了解更多信息。在这里我们仅做一点尝试！</p>

<p>结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：</p>

<pre class="brush: 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;
}</pre>

<p>我们的所做如下：</p>

<ul>
 <li>将 {{htmlelement("ul")}} 的 {{cssxref("padding-left")}} 从默认的 <code>40px</code>设置为 <code>20px</code>，然后在列表项上设置相同的数值。 这就是说，整个列表项仍然排列在列表中，但是列表项产生了一些用于背景图像的填充。 如果我们没有设置填充，背景图像将与列表项文本重叠，这看起来会很乱。</li>
 <li>将 {{cssxref("list-style-type")}} 设置为none，以便默认情况下不会显示项目符号。 我们将使用 {{cssxref("background")}} 属性来代替项目符号。</li>
 <li>为每个无序列表项插入项目符号，其相应的属性如下：
  <ul>
   <li>{{cssxref("background-image")}}: 充当项目符号的图片文件的参考路径</li>
   <li>{{cssxref("background-position")}}: 这定义了所选元素背景中的图像将出现在哪里 - 在我们的示例中设置 <code>0 0</code>，这意味着项目符号将出现在每个列表项的最左上侧。</li>
   <li>{{cssxref("background-size")}}: 设置背景图片的大小。 理想条件下，我们想要项目符号与列表项的大小相同（比列表项稍大或稍小亦可）。 我们使用的尺寸为1.6rem（16px），它非常吻合我们为项目符号设置的 20px  的填充， 16px 加上 4px 的空格间距，可以使项目符号和列表项文本效果更好。</li>
   <li>{{cssxref("background-repeat")}}：默认条件下，背景图片不断复制直到填满整个背景空间，在我们的例子中，背景图片只需复制一次，所以我们设置值为 <code>no-repeat</code>。</li>
  </ul>
 </li>
</ul>

<p>效果显示如下：</p>

<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>

<h3 id="list-style_速记">list-style 速记</h3>

<p>上述提到的三种属性可以用一个单独的速记属性 {{cssxref("list-style")}} 来设置。例如：</p>

<pre class="brush: css">ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}</pre>

<p>可以被如下方式代替：</p>

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

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

<h2 id="管理列表计数">管理列表计数</h2>

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

<h3 id="start">start</h3>

<p>{{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：</p>

<pre class="brush: html">&lt;ol start="4"&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>输出的结果如下：</p>

<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>

<h3 id="reversed">reversed</h3>

<p>{{htmlattrxref("reversed","ol")}} 属性将启动列表倒计数。示例如下：</p>

<pre class="brush: html">&lt;ol start="4" reversed&gt;
  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>输出的结果如下：</p>

<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>

<h3 id="value">value</h3>

<p>{{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:</p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li value="2"&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
  &lt;li value="8"&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
&lt;/ol&gt;</pre>

<p>输出的结果如下：</p>

<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>

<div class="note">
<p><strong>注意</strong>: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。</p>
</div>

<h2 id="主动学习_为嵌套式列表添加样式">主动学习: 为嵌套式列表添加样式</h2>

<p>在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：</p>

<ol>
 <li>为该无序列表提供方形项目符号。</li>
 <li>为该无序列表项和有序列表项提供基于其字体大小 1.5 的行高。</li>
 <li>为有序列表提供小写字母的项目符号。</li>
 <li>对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。</li>
</ol>

<p>如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

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

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

  &lt;h2&gt;Output&lt;/h2&gt;
  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
  &lt;div class="controls"&gt;
    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js">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, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>

<h2 id="另请参阅">另请参阅</h2>

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

<ul>
 <li>{{cssxref("@counter-style")}}</li>
 <li>{{cssxref("counter-increment")}}</li>
 <li>{{cssxref("counter-reset")}}</li>
</ul>

<h2 id="总结">总结</h2>

<p>一旦你掌握一些相关的基础原则和特定属性，列表的样式还是相对容易理解的。在下篇文章中我们将转到另一话题——为链接提供样式的各种技巧。</p>

<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>