《CSS權威指南》學習記錄——列表

HTML部分

無序列表

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

有序列表

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

自定義列表

自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以

標籤開始。每個自定義列表項以

開始。每個自定義列表項的定義以

開始。

<dl>
   <dt>計算機</dt>
   <dd>用來計算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

嵌套列表

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶
      <ul>
      <li>中國茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

CSS部分

列表類型

關鍵字：list-style-type。默認值爲disc，應用於display值爲list-item的元素，有繼承性。


CSS無法區別有序列表項和無序列表項，因此可以在有序列表中使用同心圓而非數字，不過最終的結果可能還是要由用戶代理決定。

不想顯示標誌，可以使用none，不過並不會中斷有序列表中的計數。

<ol>
  <li class="try">咖啡</li>
  <li>牛奶</li>
  <li class="try">茶</li>
  <li>水</li>
</ol>

.try{list-style-type:none;}

列表項圖像

關鍵字：list-style-image。可接受：url、none（默認值）。應用於display值爲list-item的元素。有繼承性。

ul li{list-style-image:url(onio.jpg);}

如果圖像未能正常加載，或被破壞，或不是用戶代理能處理的格式，這時提供一個作爲“後路”的標誌類型往往是一個好主意：

ul li{list-style-image:url(nhio.png);  list-style-type:square;}

列表標誌位置

關鍵字：list-style-position。可接受：inside、outside（默認值）。有繼承性。

<ul class="inside">
<li>Earl Grey Tea - 一種黑顏色的茶</li>
<li>Jasmine Tea - 一種神奇的“全功能”茶</li>
<li>Honeybush Tea - 一種令人愉快的果味茶</li>
</ul>

<ul class="outside">
<li>Earl Grey Tea - 一種黑顏色的茶</li>
<li>Jasmine Tea - 一種神奇的“全功能”茶</li>
<li>Honeybush Tea - 一種令人愉快的果味茶</li>

.inside{
    list-style-position:inside;
}
.outside{
    list-style-position:outside;
}
</ul>

簡寫列表樣式

關鍵字：list-style。順序無所謂，沒有顯式聲明的值爲默認值，有繼承性。

li{list-style:url(ohio.jpg) square outside;}