CSS 列表样式

17 Mar 2025 | 4 分钟阅读

CSS 中的列表决定了内容或条目如何以某种方式列出，即它们可以整齐地或随机地排列，这有助于创建整洁的网页。由于它们具有适应性和易于处理的特性，因此可以用来组织大量信息。列表的默认样式是无边框的。列表可分为两类

无序列表：默认情况下，无序列表中的列表项用项目符号表示，即小的黑点。
有序列表：有序列表中的列表项用数字和字母表示。

以下 CSS 列表属性可用于控制 CSS 列表

List-style-type：此属性用于确定列表项标记的外观，例如圆盘、字符或自定义计数器样式。
List-style-image：可以使用此参数指定将用作列表项标记的图片。
List-style-position：它描述了标记框相对于主块框的位置。
List-style：列表样式使用此属性进行配置。

我们现在将通过示例进一步了解这些特性。

List-style-type 属性

默认的标记列表类型可以更改为各种其他类型，包括方形、圆形、罗马数字、拉丁字母等。无序列表中的条目用圆点（•）表示，而有序列表中的条目默认使用阿拉伯数字（1、2、3 等）编号。

如果我们将标记或项目符号的值设置为 none，它们将被删除。

语法

list-style-type:值;

我们可以使用以下值

circle
decimal，例如：1,2,3, 等
decimal-leading-zeroes，例如：01,02,03,04, 等
lower-roman
upper-roman
lower-alpha，例如：a,b,c, 等
upper-alpha，例如：A, B, C, 等
square

注意：列表还包含默认的 padding 和 margin。需要向 <ol> 和 <ul> 标签添加 padding:0 和 margin:0 来消除此问题。

示例

此示例展示了一个 CSS 列表，其中包含多种 list-style 类型，值为 square、upper-alpha 等。

<!DOCTYPE html>  
<html> 
   <head> 
   <title>Example for CSS Lists</title>
      <style> 
.num{
list-style-type:decimal;   
}
.alpha{
list-style-type:upper-alpha; 
}
  
.circle{
list-style-type:circle; 
}
.square{
list-style-type:square; 
}
.disc{
list-style-type:disc; 
}
      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the course 
      </h1> 
      <h2> 
         Ordered Lists 
      </h2> 
      <ol class="num"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <ol class="alpha"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
        
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="circle"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <ul class="disc"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
     
   </body> 
</html>

输出

List-style-position 属性

它指示标记是出现在包含项目符号的框内还是框外。它有两个值。

Inside：这表示列表项将包含项目符号。如果文本在此换行到第二行，它将在此标记下方换行。
Outside：它表示列表项的项目符号将在其外部。这是默认值。

<!DOCTYPE html>    
<html>   
   <head>   
   <title>CSS Lists</title>  
      <style>   
      .num{  
        list-style-type:decimal;        
         list-style-position:inside;   
      }  
      .roman{  
       list-style-type:upper-roman;   
       list-style-position:outside;   
      }  
      .circle{  
        list-style-type:circle;   
        list-style-position:inside;  
      }  
      .disc{  
        list-style-type:disc;  
        list-style-position:inside;  
      }  
      .square{  
        list-style-type:square;   
        list-style-position:inside;  
      }  
      </style>   
   </head>   
   <body>   
      <h1>   
         Welcome to the Course   
      </h1>   
            <h2>   
         Ordered Lists   
      </h2>   
      <ol class="num">   
         <li>INSIDE</li>   
         <li>two</li>   
         <li>three</li>   
      </ol>   
      <ol class="roman">   
         <li>OUTSIDE</li>   
         <li>two</li>   
         <li>three</li>   
      </ol>   
      <h2>   
         Unordered lists   
      </h2>   
      <ul class="circle">   
         <li>INSIDE</li>   
         <li>two</li>   
         <li>three</li>   
      </ul>   
      <ul class="disc">   
         <li>INSIDE</li>   
         <li>two</li>   
         <li>three</li>   
      </ul>   
      <ul class="square">   
         <li>DEFAULT</li>   
         <li>two</li>   
         <li>three</li>   
      </ul>   
   </body>   
</html> 

输出

列表样式

列表可以使用 CSS 进行样式设置。列表可以具有自定义背景、内边距、边框和颜色。

本示例中描述的 CSS 列表元素应用了不同的样式属性。

<!DOCTYPE html>
<html>

<head>
<style>
ul.main {
list-style: circle;
background: lightblue;
padding: 30px;
                        width: 70px
}
</style>
</head>

<body>
<h2>
Welcome
</h2>
<p> Unordered lists </p>
<ul class="main">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>

</html>

输出

带颜色的列表样式

我们可以用颜色来装饰列表，使其更具视觉吸引力和吸引力。添加到 <ul> 或 <ol> 标签的任何内容都会影响整个列表。但是，添加到特定 <li> 标签的任何内容只会影响该列表的条目。

<!DOCTYPE html>  
<html> 
   <head> 
   <title>Example for CSS Lists</title>
      <style> 
.order{
list-style: lower-alpha;
background: lightblue;
padding:20px;
                width: 90px;
}
.order li{
background: pink;
padding: 20px;
font-size:10px;
margin:10px;
}
.unorder{
list-style: circle inside; 
background: lightblue;
padding:20px;
                width: 90px;
}
.unorder li{
background: pink;
color:black;
padding:10px;
font-size:10px;
margin:10px;
}

      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the course
      </h1> 
<h2> 
         Ordered Lists 
      </h2> 
      <ol class="order"> 
         <li>ONE</li> 
         <li>TWO</li> 
      </ol> 
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="unorder"> 
         <li>ONE</li> 
         <li>TWO</li>  
      </ul> 

   </body> 
</html>

输出

下一主题CSS nth-child 选择器

CSS 列表样式

List-style-type 属性

语法

注意：列表还包含默认的 padding 和 margin。需要向 <ol> 和 <ul> 标签添加 padding:0 和 margin:0 来消除此问题。

List-style-position 属性

列表样式

带颜色的列表样式

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 列表样式

List-style-type 属性

语法

注意：列表还包含默认的 padding 和 margin。需要向 <ol> 和 <ul> 标签添加 padding:0 和 margin:0 来消除此问题。

List-style-position 属性

列表样式

带颜色的列表样式

相关帖子

CSS Link

CSS sticky

CSS Important

CSS 按钮

CSS Animation keyframes

CSS 备忘单

CSS Display

CSS Triangles

CSS object-fit

CSS EM

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器