CSS: Detailed explanation of how to use list-style-type

This article mainly introduces how to use the CSS list-style-type attribute. Friends who need it can refer to

Setting the predefined type of the line item mark of the object.
Syntax

{ list-style-type: sType }

Possible values
sType
A string used to specify one of the following values:

A, B, C, D and so on. ##upper-roman#The default value of this property is disc. This property will be inherited.

disc	Default value. Solid circle.
circle	Hollow circle.
decimal	1, 2, 3, 4 and so on.
##lower-alpha	a, b, c, d and so on.
lower-roman	i, ii, iii, iv and so on.
none	No tags are displayed.
square	Solid square.
##upper-alpha
##I, II, III, IV and so on.

Notes

If the value of the list-style-image attribute is set to none, or the image pointed to by the URL cannot be displayed, the list-style-type attribute determines the appearance of the list-item tag. The
list-style-type attribute can be applied to any element after applying the margin and
display:list-item attributes. If you set the left margin of a line item to 0 using one of the margin properties, the list item markup will not be displayed. This margin should be set to at least 30 points.
Example The following example uses the list-style-type attribute to set the markup. This example uses a UL element as a selector in an inline (global) style sheet to change the markup type to circle:

<style> 
ul {list-style-type:circle} 
</style>

list-style-type -- Define list style

Values: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower -alpha | upper-alpha | none | inherit disc: point circle: circle

square: square

decimal: number
decimal-leading-zero: decimal number, less than two digits Complete leading 0s, for example: 01, 02, 03, ..., 98, 99
lower-roman: Lowercase Roman text, for example: i, ii, iii, iv, v, ...
upper -roman: uppercase Roman letters, such as: I, II, III, IV, V, ...
lower-greek: lowercase Greek letters, such as: α(alpha), β(beta), γ(gamma), ...
lower-latin: lowercase Latin, for example: a, b, c, ... z
upper-latin: uppercase Latin, for example: A, B, C, ... Z
armenian: Armenian numerals
georgian: Georgian numerals, for example: an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: lowercase Latin, For example: a, b, c, ... z
upper-alpha: Uppercase Latin, for example: A, B, C, ... Z
none: None (cancel all list styles)
inherit: inheritance

Initial value: disc
Inheritance: Yes
Applicable to: all elements belonging to list

list, Chinese "list" means. style, Chinese "style" The meaning of .type, the meaning of "type" in Chinese.

Example

ul    
{    
    list-style-type:disc;   
}   
ul#circle
{    
    list-style-type:circle;   
}   
ul#square
{    
    list-style-type:square;   
}   
ul#decimal   
{    
    list-style-type:decimal;   
}   
ul#decimal-leading-zero   
{    
    list-style-type:decimal-leading-zero;   
}   
ul#lower-roman   
{    
    list-style-type:lower-roman;   
}   
ul#upper-roman   
{    
    list-style-type:upper-roman;   
}   
ul#lower-greek   
{    
    list-style-type:lower-greek;   
}   
ul#lower-latin   
{    
    list-style-type:lower-latin;   
}   
ul#upper-latin   
{    
    list-style-type:upper-latin;   
}   
ul#armenian   
{    
    list-style-type:armenian;   
}   
ul#georgian   
{    
    list-style-type:georgian;   
}   
ul#lower-alpha   
{    
    list-style-type:lower-alpha;   
}   
ul#upper-alpha   
{    
    list-style-type:upper-alpha;   
}   
ul#none
{    
    list-style-type:none;   
}   
ol    
{    
    list-style-type:lower-roman;   
}

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