List styles in CSS

in web design, we often put some similar functions of the label in the same group, we often use the list of labels (no sequence list ul, there is a serial table ol), The design of the list style in the list label can make our page to a certain degree of beautification.

The style of the list in CSS is primarily the setting of the list item's top table symbol, with the following syntax:

List-style-type:disc | Circle | Square | decimal |
Lower-roman | Upper-roman | Lower-alpha | Upper-alpha |
none | Armenian | cjk-ideographic | Georgian | Lower-greek |
Hebrew | Hiragana | Hiragana-iroha | Katakana | Katakana-iroha |
Lower-latin | Upper-latin

by taking different List-style-type property values, we can get different bullets.

Cases:

UL {List-style-type:disc;}/* Solid circle */ul {list-style-type:circle;}/* Hollow circle */ul {list-style-type:square;}/* Solid block */ul {list-s Tyle-type:none;} /* Do not display bullets */ol {list-style-type:decimal;}/* Arabic numerals */ol {list-style-type:lower-roman;}/* Lowercase roman numerals */ol {list-style-type: Upper-alpha;} /* Uppercase English Alphabet */

if you are not satisfied with the many list symbols specified in CSS, we can customize the list of symbols

List-style-image:none | URL (URL)

Using this method, we can set any image as a list symbol for the list of items. Here, the value we set is the path of the picture file relative to the Web page file or the absolute path (the file from the Web site).

The most important note in the list style is that the list style can only be set in the List tab (ul,ol), not in the list's self-tagging (li).

List styles in CSS