list-styleNieruchomość jest skróconą własnością, która ustawia wartości dla trzech różnych właściwościach związanych listach w jednej deklaracji:
ul ( list-style: || || ; )Oto przykład składni:
ul ( list-style: square outside none; )Która byłaby taka sama jak następująca wersja odręczna:
ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )W skrócie, jeśli jakiekolwiek wartości zostaną pominięte, powrócą do stanu początkowego.
Wartości dla list-style-type
list-style-typeWłaściwość określa typ listy poprzez ustalenie zawartości każdego markera lub pocisku, na liście. Dopuszczalne wartości słów kluczowych dla list-style-type:
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
MDN ma bardziej kompletną listę. Wartości inne niż słowa kluczowe zostały wprowadzone w CSS3 i zaczynają być wspierane, na przykład:
ul ( list-style-type: "→"; )Poniższe demo zawiera grupę nieuporządkowanych list, aby zademonstrować każdą wartość słowa kluczowego:
list-style-typeWłaściwość ma zastosowanie do wszystkich list, a do każdego elementu, który jest ustawiony display: list-item.
Kolor znacznika listy będzie bez względu na obliczony kolor elementu (ustawiony przez colorwłaściwość).
Wartości dla list-style-position
W list-style-positiondefiniuje w obiekcie, gdzie położenie znacznika listy, a przyjmuje jeden z dwóch wartości: insidelub na zewnątrz. Są one pokazane poniżej z paddingusuniętym z list i dodanym lewym czerwonym obramowaniem:
Wartości dla list-style-image
list-style-imageWłaściwość określa, czy jest ustawiony znacznik lista z obrazem, i przyjmuje wartość „none” lub adres URL wskazujący na obraz:
ul ( list-style-image: url(images/bullet.png.webp); )Więcej wersji demonstracyjnych
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Pracuje | Pracuje | Pracuje | Pracuje | Pracuje | Pracuje | Pracuje |
IE6 / 7 nie obsługuje wszystkich wartości słów kluczowych dla list-style-typei ma również błąd polegający na tym, że elementy listy pływającej nie wyświetlają swojego znacznika listy. Można to rozwiązać za pomocą obrazu tła (zamiast list-style-image) na elementach listy.