Wykazy
Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.
Typ stylu wykazu
Punkty wykazu mogą być wyróżniane na kilka sposobów:
<ul style="list-style-type: disc">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: circle
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: square
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: decimal
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: lower-roman
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: upper-roman
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: lower-alpha
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: upper-alpha
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: none
- pierwszy punkt
- drugi punkt
- trzeci punkt
Netscape 6 obsługuje niektóre wartości z przewidzianych list-style-type, jak decimal-leading-zero (wiodące zero, np. 01, 02, 03...), lower-greek, lower-latin, upper-latin, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, armenian, georgian, hebrew.
list-style-type: decimal-leading-zero
- pierwszy punkt
- drugi punkt
- trzeci punkt
list-style-type: lower-greek
- pierwszy punkt
- drugi punkt
- trzeci punkt
Obrazek jako wyróżnik wykazu
Możliwe jest zastosowanie grafiki jako wyróżnika pozycji wykazu. Na przykład (IE 5 i Netscape 6):
<ul style="list-style-image: url(greendot.gif)">
- pierwszy punkt
- drugi punkt
- trzeci punkt
Zawijanie punktów wykazu
Style pozwalają określić, czy punkty wykazu dłuższe niż jeden wiersz na ekranie będą zawijane z wcięciem do pozycji pierwszego wiersza (outside), czy też bez wcięcia, a więc do pozycji wyróżnika (markera) punktu (inside). Innymi słowy, czy markery będą "wewnątrz", czy też "na zewnątrz" punktów. Polecenie realizuje IE 5 i Netscape 6 - przykłady ze zwykłymi wyróżnikami i grafiką jako markerem.
<ul style="list-style-position: wartość">
list-style-position: inside
- pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
- drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
- trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
- pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
- drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
- trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
list-style-position: outside
- pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
- drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
- trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
- pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
- drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
- trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
Mieszane atrybuty wykazu
Podobnie jak w przypadku wielu innych elementów, możemy się posługiwać mieszanymi definicjami wykazu. Zamiast kolejno wyliczać poszczególne własności, możemy podać polecenie list-style, za którym znajdą się od razu wartości. Na przykład:
Zamiast
list-style-image: url(greendot.gif); list-style-type: circle; list-style-position: outside
Możemy użyć
list-style: url(greendot.gif) circle outside
Odstęp markera
Specyfikacja CSS2 przewiduje jawne deklarowanie odstępu markera od treści punktów wykazu. Można to realizować za pomocą polecenia marker-offset: wartość. Na przykład:
<li style="marker-offset: 5cm">punkt wykazu</li>
Żadna z przeglądarek nie obsługuje tego polecenia.