在 CSS 中格式化无序和有序列表

可以使用包含列表样式类型、列表样式图像和列表样式位置的 CSS 属性来设置无序和有序列表的样式和位置。

语法

CSS 列表样式属性的语法如下 −

Selector {
   list-style: /*value*/
}

使用上罗马标记设置有序列表样式

以下示例说明了 CSS 列表样式属性，并设置了有序列表的样式。我们为有序列表设置了上罗马值 −

list-style: upper-roman;

示例

我们来看一下示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      ol {
         list-style: upper-roman;
         line-height: 150%;
      }
   </style>
</head>
<body>
   <h2>Top Programming Languages</h2>
   <ol>
      <li>Python</li>
      <li>Java</li>
      <li>C#</li>
   </ol>
</body>
</html>

使用下罗马标记设置有序列表样式

以下示例说明了 CSS 列表样式属性，并设置了有序列表的样式。我们为有序列表设置了小罗马值 −

list-style: lower-roman;

示例

我们来看一下示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      ol {
         list-style: lower-roman;
         line-height: 150%;
      }
   </style>
</head>
<body>
   <h2>Top Programming Languages</h2>
   <ol>
      <li>Python</li>
      <li>Java</li>
      <li>C#</li>
   </ol>
</body>
</html>

在列表项目内设置无序列表样式

以下示例说明了 CSS 列表样式属性，并设置了无序列表的样式。我们为无序列表设置了圆圈，并将位置也设置为内部 −

list-style: circle inside;

示例

我们来看一下示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      ul > ul{
         list-style: circle inside;
      }
      li:last-child {
         list-style-type: square;
      }
   </style>
</head>
<body>
   <h2>Programming Languages</h2>
   <ul>
      <li>C++ programming language created by Bjarne Stroustrup as an extension of the C   programming language.</li>
      <li>Java programming language developed by James Gosling.</li>
      <ul>
         <li>Core Java</li>
         <li>Advanced Java</li>
      </ul>
      <li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
   </ul>
</body>
</html>

在列表项目外设置无序列表样式

以下示例说明了 CSS 列表样式属性，并设置了无序列表的样式。我们为无序列表设置了正方形，并将位置也设置为外部 −

list-style: square outside ;

示例

我们来看一下示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      ul > ul{
         list-style: square outside;
      }
      li:last-child {
         list-style-type: square;
      }
   </style>
</head>
<body>
   <h2>Programming Languages</h2>
   <ul>
      <li>C++ programming language created by Bjarne Stroustrup as an extension of the C   programming language.</li>
      <li>Java programming language developed by James Gosling.</li>
      <ul>
         <li>Core Java</li>
         <li>Advanced Java</li>
      </ul>
      <li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
   </ul>
</body>
</html>

更新于：02-Nov-2023

175 次浏览

开启你的 职业生涯

完成课程获得认证

开始
广告