Home > Article > Web Front-end > Detailed explanation of CSS list style properties: list-style-type and list-style-image
Detailed explanation of CSS list style properties: list-style-type and list-style-image
- PHPzOriginal
- 2023-10-26 12:15:502784browse
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;
}- 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");
}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> 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!