Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
You can customize the appearance of HTML ul
(unnumbered or “bullet” list) and ol (ordinal or numbered list) elements with the
CSS properties below.
Some of the choices below apply to unnumbered lists and some to numbered lists:
circle: Display an empty circle before
each list element.
disc: Display a filled circle before
each list element.
square: Display
a square before each list element.
decimal: Display an item number in
decimal numerals before each list element: 1, 2, 3,
….
lower-alpha: Items in a list are
numbered as a, b, c, ….
upper-alpha:
Items in a list are numbered as A, B, C, ….
lower-roman: Items in a list are
numbered as lowercase Roman numerals: i, ii, iii, iv,
….
upper-roman: Items in a list are
numbered as uppercase Roman numerals: I, II, III, IV,
….
In addition to the options shown above, there are options specific to Hebrew, Georgian, Armenian, Chinese, Japanese, and Korean languages. Refer to the standard for full details.
You can use the list-style-image property
to display an image of your choice in place of the bullet
in a bullet list, or suppress the bullet altogether.
This property takes precedence over the list-style-type property described above.
none: If you set list-style-image: none for a list item,
no bullet will be displayed in front of that list
item.
url(:
Display the image located at URI
u)u in place of the bullet.
Normally, the second and following lines of a list item will start lined up vertically with the text on the first line, that is, after the bullet or section number. The bullet will appear in its own vertical space outside the list text.
This behavior is selected by setting list-style-position: outside.
However, if you set list-style-position: inside, the second and
following lines will start lined up with the left edge of
the bullet (or section number); that is, the bullet or
section number will be run into the text.
You can set more than one of the above list properties in
a single rule by setting the list-style
property to a list of values allowed for the list-style-position, list-style-image, and list-style-type properties.
For example, this rule
ul.pterry { list-style: disc inside; }
would display any list tagged as ul
class='pterry' using disc-shaped bullets run in
to the text.
In a list, the item that appears before the first line of
the list is called the marker.
You can use the marker-offset property to
specify the horizontal distance between the marker and
the first line.
The value of this property is a dimension (see Section 6.1, “Dimensions”). For example, the declaration
marker-offset: 2em; would insure that
two ems of space separate the marker from the first line
of the list item.