極客書

CSS - Lists

列表對於傳達一組編號或項目符號非常有用。本章教您如何使用CSS控制列表類型、位置、樣式等。

我們有以下五個CSS屬性，可以用來控制列表−

  • 列表樣式類型允許您控制標記的形狀或外觀。

  • 列表樣式位置指定換行到第二行的長點是應該與第一行對齊還是從標記的開始下面開始。

  • 列表樣式圖像指定標記的圖像，而不是項目符號或數字。

  • 列表樣式用作前面屬性的簡寫。

  • 標記偏移量指定標記與列表中文本之間的距離。

現在，我們將通過示例了解如何使用這些屬性。

The list-style-type Property

列表樣式類型屬性允許您在無序列表的情況下控制項目符號點（也稱爲標記）的形狀或樣式以及有序列表中編號字符的樣式。

以下是可用於無序列表的值−

Sr.No. Value & Description
1

無

不適用
2

光碟（默認）

填充圓
3

圓圈

空圓圈
4

正方形

填充正方形

以下是可用於有序列表的值;

Value Description Example
decimal Number 1,2,3,4,5
decimal-leading-zero 0 before the number 01, 02, 03, 04, 05
lower-alpha Lowercase alphanumeric characters a, b, c, d, e
upper-alpha Uppercase alphanumeric characters A, B, C, D, E
lower-roman Lowercase Roman numerals i, ii, iii, iv, v
upper-roman Uppercase Roman numerals I, II, III, IV, V
lower-greek The marker is lower-greek alpha, beta, gamma
lower-latin The marker is lower-latin a, b, c, d, e
upper-latin The marker is upper-latin A, B, C, D, E
hebrew The marker is traditional Hebrew numbering  
armenian The marker is traditional Armenian numbering  
georgian The marker is traditional Georgian numbering  
cjk-ideographic The marker is plain ideographic numbers  
hiragana The marker is hiragana a, i, u, e, o, ka, ki
katakana The marker is katakana A, I, U, E, O, KA, KI
hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni, ho, he, to
katakana-iroha The marker is katakana-iroha I, RO, HA, NI, HO, HE, TO

下面是一個例子;

Live Demo 
<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它將產生以下結果&負;

The list-style-position Property

列表樣式位置屬性指示標記應顯示在包含項目符號點的框的內部還是外部。它可以有兩個值之一&負;

Sr.No. Value & Description
1

無

不適用
2

內部

如果文本轉到第二行，文本將在標記下換行。如果列表的值爲outside，則它也將縮進到文本開始的位置。
3

外面

如果文本轉到第二行，則文本將與第一行的開頭對齊（在項目符號的右側）。

下面是一個例子;

Live Demo 
<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它將產生以下結果&負;

The list-style-image Property

列表樣式圖像允許您指定一個圖像，以便可以使用自己的項目符號樣式。語法類似於background image屬性，字母url以屬性值開頭，後跟括號中的url。如果找不到給定的圖像，則使用默認項目符號。

下面是一個例子;

Live Demo 
<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它將產生以下結果&負;

The list-style Property

列表樣式允許您將所有列表屬性指定爲一個表達式。這些屬性可以按任何順序顯示。

下面是一個例子;

Live Demo 
<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它將產生以下結果&負;

The marker-offset Property

標記偏移量屬性允許您指定標記和與該標記相關的文本之間的距離。它的值應該是一個長度，如下例所示&負;

很遺憾，IE 6或Netscape 7不支持此屬性。

下面是一個例子;

Live Demo 
<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它將產生以下結果&負;