Detailed explanation of CSS list style properties: list-style-type and list-style-image-CSS Tutorial-php.cn

Detailed explanation of CSS list style properties: list-style-type and list-style-image

PHPz

Release： 2023-10-26 12:15:50

Original

2818 people have browsed it

CSS 列表样式属性详解：list-style-type 和 list-style-image

Detailed explanation of CSS list style attributes: list-style-type and list-style-image

In web design, list is a frequently used element. Lists clearly present a series of related content. In order to make the list presentation more beautiful and consistent with the web page theme, CSS provides some properties to control the style of the list. Among them, commonly used attributes include list-style-type and list-style-image.

list-style-type attribute

The list-style-type attribute is used to define the type of markup in front of the list item. It can have the following values:

disc: solid dot (default value)
circle: hollow dot
square: solid square
none: No tag
decimal: number (increasing from 1)
decimal-leading-zero: zero-padded number (numbers less than 10 will start with 0)
lower-roman: lowercase Roman numerals (i, ii, iii)
upper-roman: uppercase Roman numerals (I, II, III)
lower-alpha: lowercase letters ( a, b, c)
upper-alpha: uppercase letters (A, B, C)
lower-greek: lowercase Greek letters
upper-greek: uppercase Greek Letters

For example, we want to change the mark in front of the list item of an unordered list to a solid square:

ul {
  list-style-type: square;
}

Copy after login

list-style-image attribute

The list-style-image attribute can be used to define the tag in front of the list item as a custom image. You can use the URL() function to reference an image file as a markup. The sample code is as follows:

ul {
  list-style-image: url("marker.png");
}

Copy after login

The above code will change the mark in front of the list item of the unordered list to the "marker.png" picture.

It should be noted that the list-style-image attribute will override the setting of the list-style-type attribute, that is, when both list-style-type and list-style-image are set for a list item, only list-style-image takes effect.

Example

Here is a complete example showing how to use the list-style-type and list-style-image properties to customize the list style:

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-image: url("marker.png");
    }
    
    ol {
      list-style-type: lower-roman;
    }
  </style>
</head>
<body>
  <h2>无序列表</h2>
  <ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
  </ul>
  
  <h2>有序列表</h2>
  <ol>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
  </ol>
</body>
</html>

Copy after login

In the above code, the mark in front of the list item of the unordered list is set to the "marker.png" image through the list-style-image attribute; the mark in front of the list item of the ordered list is set to the list-style-type attribute. Set to lowercase Roman numerals.

To sum up, by using list-style-type and list-style-image attributes, we can easily customize the style of list items to make the list more personalized and beautiful on the web page. The above is a detailed analysis of CSS list style properties. I hope it will be helpful to you!

The above is the detailed content of Detailed explanation of CSS list style properties: list-style-type and list-style-image. For more information, please follow other related articles on the PHP Chinese website!