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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。