Styling lists

一個(gè)簡(jiǎn)單的例子

首先，讓我們看一個(gè)簡(jiǎn)單的例子。文章中我們將看到無(wú)序，有序和描述列表——它們都具有相似的特性，而某些特性卻又各不相同。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>

現(xiàn)在，如果你去到例子的展示頁(yè)面，并使用瀏覽器開(kāi)發(fā)者工具查看那些列表元素，你會(huì)注意到若干個(gè)默認(rèn)的樣式預(yù)設(shè)值:

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

處理列表間距

在樣式列表中，您需要調(diào)整它們的樣式，使它們保持與其周圍元素相同的垂直間距(例如段落和圖像;有時(shí)稱為垂直節(jié)奏)，以及相同的水平間距(您可以看到 ="external">完成樣式示例在Github上， ">也找到源代碼。)

用于文本樣式和間距的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.?

列表特定樣式

現(xiàn)在我們看看列表的一般間距，讓我們探索一些列表特定的屬性。 您應(yīng)該了解的三個(gè)屬性，您可以在 < 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.

項(xiàng)目符號(hào)樣式

如上所述， list-style-type 屬性允許您設(shè)置 用于子彈點(diǎn)的子彈類型。 在我們的示例中，我們已將有序列表設(shè)置為使用大寫(xiě)羅馬數(shù)字，其中:

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

這給了我們下面的樣子:

0px auto; width:376px;">

您可以通過(guò) list-style-type 找到更多選項(xiàng) 參考頁(yè)。

項(xiàng)目符號(hào)位置

list-style-position 屬性設(shè)置項(xiàng)目符號(hào)是否顯示在列表項(xiàng)中 ，或在每個(gè)項(xiàng)目開(kāi)始之前它們之外。 默認(rèn)值為 outside ，這使得項(xiàng)目符號(hào)位于列表項(xiàng)之外，如上所示。

如果在里面設(shè)置的值，子彈將位于行內(nèi):

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

0px auto; width:370px;">

使用自定義項(xiàng)目符號(hào)圖像

list-style-image 屬性允許您使用自定義圖片 子彈。 語(yǔ)法很簡(jiǎn)單:

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

然而，這種性質(zhì)在控制子彈的位置，尺寸等方面有點(diǎn)受限。 您最好使用 背景 屬性系列，您將了解更多有關(guān) 在樣式框模塊中。 現(xiàn)在，這里是一個(gè)品酒師！

在我們完成的示例中，我們已經(jīng)對(duì)無(wú)序列表進(jìn)行了樣式設(shè)置(在上面已經(jīng)看到的頂部):

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.

這給我們以下結(jié)果:

0px auto; width:124px;">

列表樣式的速記

上述三個(gè)屬性都可以使用單個(gè)簡(jiǎn)寫(xiě)屬性 list-style 進(jìn)行設(shè)置 。 例如，以下CSS:

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

可以替換為:

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

這些值可以按任何順序列出，您可以使用一個(gè)，兩個(gè)或全部三個(gè)(用于未包括的屬性的默認(rèn)值為 disc ， none 和 outside )。 如果同時(shí)指定了 type 和 image ，如果由于某種原因無(wú)法加載圖片，則會(huì)將類型用作后備廣告。

控制列表計(jì)數(shù)

有時(shí)候，您可能需要對(duì)有序列表進(jìn)行不同計(jì)數(shù)，例如 從1以外的數(shù)字開(kāi)始，或者向后計(jì)數(shù)，或者以步長(zhǎng)或者大于1計(jì)數(shù)。HTML和CSS有一些工具可以幫助你。

開(kāi)始

開(kāi)始 屬性允許您從其他數(shù)字開(kāi)始計(jì)算列表 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>

給你這個(gè)輸出:

逆轉(zhuǎn)

顛倒 屬性將開(kāi)始向下計(jì)數(shù)列表，而不是向上計(jì)數(shù)。 下面的例子:

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

給你這個(gè)輸出:

值

值 屬性允許您將列表項(xiàng)設(shè)置為特定的數(shù)值 。 下面的例子:

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

給你這個(gè)輸出:

主動(dòng)學(xué)習(xí):對(duì)嵌套列表進(jìn)行樣式化

在這個(gè)主動(dòng)的學(xué)習(xí)課程，我們希望你采取你上面學(xué)到的，并在一個(gè)嵌套列表的樣式。 我們?yōu)槟峁┝薍TML，我們希望您:

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.

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。 如果您遇到問(wèn)題，請(qǐng)按顯示解決方案按鈕查看一個(gè)潛在的答案。

<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計(jì)數(shù)器提供了用于自定義列表計(jì)數(shù)和樣式的高級(jí)工具，但是它們相當(dāng)復(fù)雜。 我們建議研究這些，如果你想伸展自己。 看到:

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

概要

一旦你知道一些相關(guān)的基本原則和特定的屬性，列表是相對(duì)容易得到風(fēng)格的懸念。 在下一篇文章中，我們將介紹鏈接樣式技術(shù)。