list-style-image

Czym jest list-style-image?

list-style-image to właściwość CSS służąca do ustawiania obrazka jako znaku wypunktowania listy. Stosuje się ją najczęściej do list nienumerowanych, czyli elementów <ul>.

Składnia

ul.znaczek {
  list-style-image: url(GRAFIKI/znaczek_logo.gif);
}

W powyższym przykładzie każda lista <ul> z klasą znaczek otrzyma obrazek znaczek_logo.gif jako punkt wypunktowania.

Ważne zasady

• list-style-image służy do obrazków wypunktowania.
• Do zwykłych typów punktów, np. disc, circle, square, używa się list-style-type.
• Adres obrazka podaje się w funkcji url(...).
• Ścieżka w url(...) jest liczona względem pliku CSS, a nie względem pliku HTML.

Przykład HTML

<ul class="znaczek">
  <li>Pierwszy element</li>
  <li>Drugi element</li>
</ul>

Przykład CSS

ul.znaczek {
  list-style-image: url(GRAFIKI/znaczek_logo.gif);
}

Jeśli obrazek się nie wyświetla, najczęstsze przyczyny to błędna nazwa katalogu, zły separator ścieżki lub wskazanie ścieżki względem niewłaściwego pliku.