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

打印页面