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：此值設置列表項元素的標記(例如光盤，字符或自定義計數器樣式)。默認值為光盤。
list-style-position：此值設置標記相對於列表項的位置。默認值為“outside”。
list-style-image：該值設置要用作列表項標記的圖像。默認值為“none”。

範例1：

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
        CSS list-style Property 
    </title> 
    <style> 
        ul { 
        list-style:square inside  
url("https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png"); 
        } 
          
  
    </style> 
    </head> 
    <body> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            CSS list-style Property 
        </h2> 
          
        <p>Sorting Algorithms</p> 
          
        <ul> 
        <li>Bubble Sort</li> 
        <li>Selection Sort</li> 
        <li>Merge Sort</li> 
        </ul> 
    </body> 
</html>

輸出：
liststyle

範例2：

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
        CSS list-style Property 
    </title> 
    <style> 
        ul  { 
          list-style:square outside; 
              
        } 
    </style> 
    </head> 
    <body> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            CSS list-style Property 
        </h2> 
          
        <p>Sorting Algorithms</p> 
          
        <ul> 
          <li>Bubble Sort</li> 
          <li>Selection Sort</li> 
          <li>Merge Sort</li> 
        </ul> 
    </body> 
</html>

輸出：
liststyle
注意：如果未指定list-style-image，則不進行任何處理。

支持的瀏覽器：下麵列出了list-style屬性支持的瀏覽器：

穀歌瀏覽器1.0
Internet Explorer 4.0
Firefox 1.0
Opera 7.0
蘋果Safari 1.0

相關用法

注：本文由純淨天空篩選整理自Vishal Chaudhary 2大神的英文原創作品 CSS | list-style Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。