Wykazy









Wykazy

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.


Typ stylu wykazu (list style type)
Obrazek jako wyróżnik wykazu (marker) (list style image)
Zawijanie punktów wykazu (pozycja markera) (list style position)
Mieszane atrybuty wykazu (list style)
Odstęp markera (marker offset)


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.