list-style-type
Description
list-style-type sets the type of marker system of a list.
| Item | Value |
|---|---|
| Initial value | disc |
| Inherited | Yes. |
| Version | CSS1 |
| JavaScript syntax | object.style.listStyleType="square" |
| Applies to | Elements whose display value is list-item. |
Syntax and Property Values
list-style-type: disc | //from w ww. j av a2 s.co m
circle |
square |
decimal |
decimal-leading-zero |
lower-roman |
upper-roman |
lower-greek |
lower-latin |
upper-latin |
armenian |
georgian |
lower-alpha |
upper-alpha |
none |
inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| circle | a circle |
| decimal | a number. This is default for |
| decimal-leading-zero | a number with leading zeros (01, 02, 03, etc.) |
| disc | a filled circle. This is default for |
| georgian | Georgian numbering |
| lower-alpha | lower-alpha (a, b, c, d, e, etc.) |
| lower-greek | lower-greek |
| lower-latin | lower-latin (a, b, c, d, e, etc.) |
| lower-roman | lower-roman (i, ii, iii, iv, v, etc.) |
| none | No marker |
| square | a square |
| upper-alpha | upper-alpha (A, B, C, D, E, etc.) |
| upper-latin | upper-latin (A, B, C, D, E, etc.) |
| upper-roman | upper-roman (I, II, III, IV, V, etc.) |
| inherit | Inherit the listStyleType property from parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
ol {<!--from w w w . j a v a 2 s. co m-->
font-family: sans-serif;
list-style-type: upper-greek;
}
</style>
</head>
<body>
<ol>
<li>This is the first list item.</li>
<li>This is the second list item.</li>
<li>This is the third list item.</li>
<li>This is the fourth list item.</li>
<li>This is the fifth list item.</li>
</ol>
</body>
</html>
The code above generates the following result.
