CSS - list-style 屬性

CSS list-style 屬性是一個簡寫屬性，用於設定所有列表樣式屬性 list-style-type、list-style-position 和 list-style-image 於單個宣告中。宣告中未提供的屬性將使用其預設值。

語法

list-style: list-style-type  list-style-position  list-style-image | initial | inherit;

屬性值

值	描述
list-style-type	指定列表項標記的型別。預設為 "disc"。
list-style-position	指定列表項標記的位置。預設為 "outside"。
list-style-image	指定用作列表項標記的影像。預設為 "none"。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS 列表樣式屬性示例

以下示例說明了具有不同值的list-style 屬性。

定義列表樣式屬性的所有值

要在一個語句中定義list-style-type、list-style-position 和list-style-image，我們使用list-style 屬性。該屬性設定所有三個屬性的值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      ul {
         border: 3px solid gray;
         width: 50%;
      }

      li {
         padding: 10px;
         font-weight: bold;
         font-size: 25px;
      }

      .front-end {
         color: blue;
         list-style: square outside 
                     url("/css/images/cursor-zoom-in.png");

      }

      .back-end {
         color: green;
         list-style: lower-alpha inside none;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style property
   </h2>
   <h4>
      list-style: square outside url(image_url)
   </h4>
   <div>
      <p>
         Front-end technologies:
      </p>
      <ul class="front-end">
         <li>
            HTML
         </li>
         <li>
            CSS
         </li>
         <li>
            JAVASCRIPT
         </li>
      </ul>
   </div>
   <h4>
      list-style: lower-alpha inside none
   </h4>
   <div>
      <p>
         Back-end technologies:
      </p>
      <ul class="back-end">
         <li>
            NODEJS
         </li>
         <li>
            MYSQL
         </li>
         <li>
            MONGODB
         </li>
      </ul>
   </div>

</body>

</html>

列表樣式屬性的組成屬性

list-style 屬性是以下屬性的簡寫：list-style-type、list-style-position 和list-style-image。這些屬性可以組合使用以產生與list-style 屬性相同的效果。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      ul {
         border: 3px solid gray;
         width: 50%;
      }

      li {
         padding: 10px;
         font-weight: bold;
         font-size: 25px;
      }

      .fruits {
         color: red;
         list-style-type: square;
         list-style-position: inside;
         list-style-image: url("/css/images/cursor-alias.png");

      }
   </style>
</head>

<body>
   <h2>
      CSS list-style property
   </h2>
   <h4>
      list-style-type: square
   </h4>
   <h4>
      list-style-position: inside
   </h4>
   <h4>
      list-style-image: url(image_url)
   </h4>
   <div>
      <ul class="fruits">
         <li>
            Apple
         </li>
         <li>
            Banana
         </li>
         <li>
            Cranberries
         </li>
         <li>
            Dragon Fruit
         </li>
      </ul>
   </div>
</body>

</html>

支援的瀏覽器

屬性
list-style	1.0	4.0	1.0	1.0	7.0

css_properties_reference.htm

列印頁面