Przejdź do treści

Wykazy - CSS

Wyróżnik obrazkowy wykazu {list-style-image}

Jak wstawić grafikę (obrazek) jak punkt wykazu (wyróżnik, marker)?

Chrome Firefox Edge Opera Safari

selektor { list-style-image: url(ścieżka dostępu) }
Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów].

Natomiast jako "ścieżka dostępu" należy wpisać względną ścieżkę do obrazka, który ma się pojawić jako wyróżnik wykazu (marker). Wpisanie none usunie obrazek.

Ścieżkę dostępu należy konstruować względem arkusza CSS, a nie względem dokumentu HTML!

Polecenie pozwala zastosować dowolny obrazek jako wyróżnik wykazu (czyli marker). Dzięki temu nie musimy korzystać już tylko z podstawowych typów wykazu, ale możemy stworzyć swoje własne. Sprawi to, że nasza strona będzie wyglądała bardziej oryginalnie i estetycznie.

Wspólnie z tą własnością można również podać dodatkowo typ stylu. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, wykaz przyjmie podany typ.

Przykład {list-style-image}

list-style-image: url(minus.gif)
  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

Komentarze

Zobacz więcej komentarzy

Facebook