CSS list-style-image
Właściwość list-style-image w CSS służy do ustawienia obrazka jako znacznika listy, czyli punktora wyświetlanego przy elementach listy.
Najczęściej dotyczy list nienumerowanych tworzonych w HTML za pomocą elementu <ul>, ale może być stosowana także do elementów listy <li>.
Składnia
ul {
list-style-image: url('rys.gif');
}
Taki zapis oznacza, że elementy listy będą oznaczone obrazkiem rys.gif zamiast standardowej kropki, kwadratu lub okręgu.
Ważne znaczenie egzaminacyjne
Zapis:
ul {
list-style-image: url('rys.gif');
}
nie ustawia tła listy. Obrazek nie jest też tłem każdego elementu <li>. Jest używany jako punktor listy.
Różnica między podobnymi właściwościami
list-style-image– ustawia obrazek jako punkt listy,list-style-type– ustawia typ punktora, np.disc,circle,square,background-image– ustawia obrazek jako tło elementu.
Przykład
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
ul {
list-style-image: url('ikonka.gif');
}
Efekt: przy każdym elemencie listy pojawi się grafika ikonka.gif jako znacznik listy.