HTML and CSS Reference
In-Depth Information
Figure 3.15: rounded corners
CSS provides three properties that help authors create lists with style:
list-
style-type
,
list-style-position
, and
list-style-image
. A fourth shorthand
property,
list-style
, allows the author to specify all list properties in a single
statement. List properties can be applied to
list
and
list item
elements. A
list item element that doesn't have its own list style properties set inherits
those property values from its parent
list
element. Here are some examples of
list-style
:
ul.nav
{ list-style-type: none; }
li.selected
{ list-style: url(images/check.gif) inside; }
he set of permissible values for the
list-style-type
property has under-
gone some changes over time. he CSS2 speciication has about 20 values,
whereas CSS2.1 has only a dozen. he drat speciication for CSS3 expands
the permissible values a couple orders of magnitude with support for many
national language symbol sets.
he
list-style-image
property allows a web designer to use a custom image
for a list bullet. he
list-style-position
property has three permissible values:
inside
,
outside
(the default), and
inherit
. he
outside
value places the marker
some distance outside the list item's border. How far outside is browser-
dependent. he inside value places the item marker inside the list item's
content box as if it were an inline element. You can easily see the diference by
putting a border around the list items, as shown in Figure 3.16.
