Recipe 4.1 Changing the Format of a List
Problem
You want to change the default list style,
for example to change the bullet or numbering as in
Figure 4-2.
![figs/csscb_0402.gif](images/0596005768/figs/csscb_0402.gif)
Solution
Use the list-style-type
property to change the bullet or type
of counter:
li {
list-style-type: lower-roman;
}
Discussion
The CSS 2.1 specification offers several styles for numbering a list,
as shown in Table 4-1. Browsers typically vary the
bullet style from one level of nesting to the next. To stop lists
from presenting this traditional system of setting the
list
marker, change the value of list-style-type for
each child list.
Table 4-1. Styles available for list markers
Style/value
|
Description
|
Browser support
|
---|
square
|
Usually a filled-in square, although the exact representation
isn't defined.
|
All major browsers
|
disc
|
Usually a filled-in circle, although the exact representation
isn't defined.
|
All major browsers
|
circle
|
Usually an unfilled circle, although the exact representation
isn't defined.
|
All major browsers
|
decimal
|
Starts with 1 and continues with 2, 3, 4, etc.
|
All major browsers
|
decimal-leading-zero
|
Starts with 01 and continues with 02, 03, 04, etc. The number of
leading zeros may equal the number of digits used in a list. For
example, 0001 might be used for a 5876-item list.
|
All major browsers, although leading zeros is optional
|
lower-roman
|
Starts with lowercase roman numbers.
|
All major browsers
|
upper-roman
|
Starts with uppercase roman numbers.
|
All major browsers
|
lower-alpha
|
Starts with lowercase ASCII letters.
|
All major browsers
|
upper-alpha
|
Starts with uppercase ASCII letters.
|
All major browsers
|
lower-latin
|
Starts with lowercase ASCII letters.
|
All major browsers
|
upper-latin
|
Starts with uppercase ASCII letters.
|
All major browsers
|
lower-greek
|
Starts with classical Greek letters, starting with alpha and then
beta, gamma, etc.
|
Safari, Mozilla, Netscape 6+
|
hebrew
|
Starts counting with traditional Hebrew.
|
Safari, Mozilla, Netscape 6+
|
hiragana
|
Starts counting with the Japanese hiragana system.
|
Mozilla, Netscape 6+
|
katakana
|
Starts counting with the Japanese traditional katana system.
|
Mozilla, Netscape 6+
|
hiragana-iroha
|
Starts counting with the Japanese hiragana-iroha system.
|
Mozilla, Netscape 6+
|
katakana-iroha
|
Starts counting with the Japanese katakana-iroha system.
|
Mozilla, Netscape 6+
|
none
|
No marker is displayed.
|
All major browsers
|
See Also
Recipe 4.5 for using custom images for list
markers; Chapter 12, "Lists and Generated
Content" in Cascading Style Sheets: The
Definitive Guide (O'Reilly).
|