CSS list-style-type

 CSS list-style-type can be used to set the bullets of ul li or ol li, whether it is ul li unsorted items or ol li sorted items list, you can use CSS list-style-type to modify the label of each item Symbols, such as unmarked, hollow circles, filled circles, uppercase English letters, lowercase English letters, numbers, squares and even Roman numerals, are all common marking methods. In other words, there are many different CSS list-style-types. The style can be used.

CSS list-style-type example reference

<style type="text/css">
<!--
ul.A {
    list-style-type:decimal;
}
ol.B {
    list-style-type:lower-roman;
}
-->
</style>
< ul class="A">
　<li>Project One</li>
　<li>Project Two</li>
</ul>
<ol class="B">
　<li>Project One</li>
　<li>Project Two</li>
</ol>

The above example presents the result as

• Item one
• Item two

1. Item one
2. Item two

Through the modification of the list-style-type parameter, the bullets of the first ul tag are replaced with numbers and sorted from the original default "●". The following ol item tags are originally sorted numeric bullets by default. Modified to the lowercase Roman pinyin number notation, and retain the sorting effect, the parameter table organizes many commonly used bullet parameters.

CSS list-style-type common parameter list

parameter	definition
none	No symbol
disc	Solid round
circle	Hollow circle
square	Solid square
lower-alpha	Lowercase english letters
upper-alpha	Uppercase english letters
decimal	Arabic numerals
decimal-leading-zero	Arabic numerals in decimal system with zeros in front
armenian	Armenian
lower-greek	Greek
lower-roman	Lowercase roman numerals
upper-roman	Uppercase roman numerals

Bring in examples of common parameters

<ul style="list-style-type:square;">
　<li>none</li>
　<li>none</li>
</ul>
<ul style="list-style-type:decimal;">
　<li>decimal</li>
　<li>decimal</li>
</ul>
<ul style="list-style-type:decimal-leading-zero;">
　<li>decimal-leading-zero</li >
　<li>decimal-leading-zero</li>
</ul>
<ul style="list-style-type:lower-alpha;">
　<li>lower-alpha</li>
　<li>lower-alpha </li>
</ul>
<ul style="list-style-type:upper-alpha;">
　<li>upper-alpha</li>
　<li>upper-alpha</li>
</ul>
<ul style="list-style-type:lower-roman;">
　<li>lower-roman</li>
　<li>lower-roman</li>
</ ul>

The output of the above example

• none
• none

• decimal
• decimal

• decimal-leading-zero
• decimal-leading-zero

• lower-alpha
• lower-alpha

• upper-alpha
• upper-alpha

• lower-roman
• lower-roman

The example writes style directly in the <ul> tag, which is a simplified way of writing. It is also very useful to deal with multiple groups of ul tags in a single web page. However, if there are many different ul project groups in the web page that require the same style, then The writing of the first example is more convenient for overall management.