CSS List Properties

CSS list:

Property	Describe
List-style	Shorthand property. Used to set all properties used for the list in a declaration.
List-style-image	Sets the image as a list item flag.
List-style-position	Sets the position of the list item label in the list.
List-style-type	Sets the type of the list item flag.
Marker-offset

1. List Type: List-style-type property

(1) Function: Modify the type of flag used for the list item;

(2) Possible values:

Value	Describe
None	No markings.
Disc	Default. The marker is a solid circle.
Circle	The mark is a hollow circle.
Square	The marker is a solid block.
Decimal	The tag is a number.
Decimal-leading-zero	0 The number marks that begin with. (01, 02, 03, etc.)
Lower-roman	Lowercase roman Numerals (i, II, III, IV, V, etc.)
Upper-roman	Uppercase Roman Numerals (I, II, III, IV, V, etc.)
Lower-alpha	lowercase English Letter The marker is Lower-alpha (A, B, C, etc.)
Upper-alpha	Uppercase English Letters The marker is Upper-alpha (A, B, C, etc.)
Lower-greek	Lowercase Greek letters (alpha, beta, gamma, etc.)
Lower-latin	Lowercase Latin alphabet (A, B, C, etc.)
Upper-latin	Uppercase Latin alphabet (A, B, C, etc.)
Hebrew	The traditional Hebrew numbering method
Armenian	The traditional Armenian numbering method
Georgian	Traditional Georgian numbering method (an, ban, gan, etc.)
Cjk-ideographic	Simple ideographic Numbers
Hiragana	The marks are: A, I, U, e, O, Ka, ki, etc. (Japanese Katakana)
Katakana	The marks are: A, I, U, E, O, KA, Ki, etc. (Japanese Katakana)
Hiragana-iroha	The markings are: I, Ro, ha, ni, ho, he, to, etc. (Japanese Katakana)
Katakana-iroha	The markings are: I, RO, HA, NI, HO, HE, to, etc. (Japanese Katakana)

(3) Browser support: All browsers support the List-style-type property.

Ps: any version of Internet Explorer (including IE8) does not support attribute values such as "Decimal-leading-zero", "Lower-greek", "Lower-latin", "Upper-latin", " Armenian "," Georgian "or" inherit ".

2. List item Image: List-style-image property

(1) Role: Use an image to replace the tag of a list item.

(2) Possible values:

Value	Describe
Url	The path to the image.
None	Default. No graphics are displayed.
Inherit	Specifies that the value of the List-style-image property should be inherited from the parent element.

(3) Browser support: All browsers support the List-style-image property.

Ps: always specify a "List-style-type" attribute in case the image is not available.

3. List flag Location: List-style-position Property

(1) Function: Set where to place the list item tag;

(2) Possible values:

Value	Describe
Inside	The list item markers are placed within the text, and the wrapping text is aligned according to the tag.
Outside	The default value. Keep the marker on the left side of the text. List item markers are placed outside the text, and wrapping text is not aligned with the tag.
Inherit	Specifies that the value of the List-style-position property should be inherited from the parent element.

(3) Browser support: All browsers support the List-style-position property.

4. Shorthand List Style: List-style property

(1) Function: Set all the list attributes in a declaration;

(2) Order: Type,position,image;

Ps:list-style values can be listed in any order, and these values can be ignored. As long as a value is provided, the rest is populated with its default values.

CSS List Properties