Cascading Style Sheets: Designing for the Web (3rd Edition)

Instead of a number or a predefined symbol, you can also use a (small) image as the label. That is done with the list-style-image property.

Name:

list-style-image

Value:

<url> | none

Initial:

none

Applies to:

elements with display property value "list-item"

Inherited:

yes

Percentages:

N/A

For example:

UL { list-style-image: url("http://www.example.com/star.png") }

Which might look like this:

  • the first item

  • the second item

  • the third item

If there is a list-style-image other than none, it will be used as the label, instead of the list-style-type. However, if for some reason, the browser is unable to download or display the image, it will use the list-style-type again.

Категории