Właściwości list

Tematy: Typ listy | Dowolny obraz jako wypunktowanie listy | Zawijanie tekstu | Zbiorczy zapis właściwości list

W języku XHTML/HTML mamy styczność z listami numerowanymi — <ol></ol>, wypunktowanymi — <ul></ul> oraz listami definicji — <dl></dl>. Rozwiązanie to jest niezwykle funkcjonalne i pożyteczne w codziennej pracy projektanta stron WWW.

Za pomocą kaskadowych arkuszy stylów można kontrolować następujące właściwości list:

typ listy,
sposób wypunktowania,
pozycję listy względem wypunktowania.

Typ listy

list-style-type
Dostępne wartości:	disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit
Wartość domyślna:	disc
Przykład:	ul {list-style-type:circle;}
Dziedziczenie:	Tak
Obsługa:	Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Za pomocą kaskadowych arkuszy stylów można kontrolować rodzaj prezentowanej listy. Dokładnie mówiąc, w CSS istnieje możliwość określenia, czy lista wypunktowana ma być numerowana za pomocą cyfr rzymskich czy też arabskich lub za pomocą małych czy też dużych liter. Podobnie jest z listami wypunktowanymi, gdzie punktorem może być kilka różnych elementów graficznych lub dowolny obrazek.

<li>Pierwsza pozycja listy wypunktowanej.</li>

<li>Druga pozycja listy wypunktowanej.</li>

<li>Trzecia pozycja listy wypunktowanej.</li>

</ul>

Poniższy przykład prezentuje działania opisywanego stylu dla opcji, które działają poprawnie w każdej przeglądarce.

<<przykład>>

<li>Pierwsza pozycja listy - disc.</li>

<li>Druga pozycja listy - disc.</li>

<li>Trzecia pozycja listy - disc.</li>

</ul>

<li>Pierwsza pozycja listy - circle.</li>

<li>Druga pozycja listy - circle.</li>

<li>Trzecia pozycja listy - circle.</li>

</ul>

<li>Pierwsza pozycja listy - square.</li>

<li>Druga pozycja listy - square.</li>

<li>Trzecia pozycja listy - square.</li>

</ul>

<li>Pierwsza pozycja listy - decimal.</li>

<li>Druga pozycja listy - decimal.</li>

<li>Trzecia pozycja listy - decimal.</li>

</ul>

<li>Pierwsza pozycja listy - lower-roman.</li>

<li>Druga pozycja listy - lower-roman.</li>

<li>Trzecia pozycja listy - lower-roman.</li>

</ul>

<li>Pierwsza pozycja listy - upper-roman.</li>

<li>Druga pozycja listy - upper-roman.</li>

<li>Trzecia pozycja listy - upper-roman.</li>

</ul>

<li>Pierwsza pozycja listy - lower-alpha.</li>

<li>Druga pozycja listy - lower-alpha.</li>

<li>Trzecia pozycja listy - lower-alpha.</li>

</ul>

<li>Pierwsza pozycja listy - upper-alpha.</li>

<li>Druga pozycja listy - upper-alpha.</li>

<li>Trzecia pozycja listy - upper-alpha.</li>

</ul>

<li>Pierwsza pozycja listy - none.</li>

<li>Druga pozycja listy - none.</li>

<li>Trzecia pozycja listy - none.</li>

</ul>

</div>

<</przykład>>

Kolejny przykład prezentuje pozostałe sposoby formatowania list. Efekt działania tego formatowania zobaczą jedynie użytkownicy nowych przeglądarek. Natomiast użytkownicy starszych wersji MS Internet Explorera muszą się zadowolić tym, co przedstawia rysunek 6.1.

<<przykład>>

<li>Pierwsza pozycja listy - decimal-leading-zero.</li>

<li>Druga pozycja listy - decimal-leading-zero.</li>

<li>Trzecia pozycja listy - decimal-leading-zero.</li>

</ul>

<li>Pierwsza pozycja listy - lower-greek.</li>

<li>Druga pozycja listy - lower-greek.</li>

<li>Trzecia pozycja listy - lower-greek.</li>

</ul>

<li>Pierwsza pozycja listy - lower-latin.</li>

<li>Druga pozycja listy - lower-latin.</li>

<li>Trzecia pozycja listy - lower-latin.</li>

</ul>

<li>Pierwsza pozycja listy - upper-latin.</li>

<li>Druga pozycja listy - upper-latin.</li>

<li>Trzecia pozycja listy - upper-latin.</li>

</ul>

<li>Pierwsza pozycja listy - armenian.</li>

<li>Druga pozycja listy - armenian.</li>

<li>Trzecia pozycja listy - armenian.</li>

</ul>

<li>Pierwsza pozycja listy - georgian.</li>

<li>Druga pozycja listy - georgian.</li>

<li>Trzecia pozycja listy - georgian.</li>

</ul>

</div>

<</przykład>>

Rysunek 6.1. Przykład działania niektórych możliwości formatowania list niedziałających w starszych wersjach przeglądarki MS Internet Explorer

W praktyce definicja list-style-type wraz z odpowiednim formatowaniem może być użyta do list numerowanych i wypunktowanych. Innymi słowy, można na przykład przygotować listę wypunktowaną, a za pomocą CSS przypisać jej numerację.

<li>Pierwsza pozycja listy - decimal.</li>

<li>Druga pozycja listy - decimal.</li>

<li>Trzecia pozycja listy - decimal.</li>

</ul>

Można również zmienić sposób formatowania listy numerowanej, tak aby była wyświetlana w sposób wykorzystywany przez listy wypunktowane.

<li>Pierwsza pozycja listy - disc.</li>

<li>Druga pozycja listy - disc.</li>

<li>Trzecia pozycja listy - disc.</li>

</ol>

Utarło się jednak, że atrybuty wykorzystywane przez polecenie list-styl-type dzielimy na dwie grupy i wykorzystujemy z odpowiednim rodzajem listy. Takie podejście pozwala na znaczne uproszczenie pracy z listami i ich łatwiejsze formatowanie.

W przypadku list wypunktowanych używamy następujących wartości: disc, circle, square oraz none. Natomiast dla list numerowanych możemy użyć jednej z następujących wartości: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian oraz none.

Jeżeli jakiś sposób formatowania nie jest obsługiwany przez przeglądarkę, to zazwyczaj jest on zastępowany domyślnym sposobem wypunktowania lub numeracji. Dla list wypunktowanych będzie to disc, a dla list numerowanych decimal.

Dowolny obraz jako wypunktowanie listy

list-style-image
Dostępne wartości:	url \| none \| inherit
Wartość domyślna:	none
Przykład:	ul {list-style-image:url(punkto.gif);}
Dziedziczenie:	Tak
Obsługa:	Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Przy okazji omawiania opcji list-style-type przekonaliśmy się, że listy mogą być wyróżnione za pomocą różnych znaczków (koła, kropki, kwadraty) lub liter i cyfr. Elementy te są domyślnie obsługiwane przez wszystkie przeglądarki, a co za tym idzie, przynajmniej w teorii każda typowa lista ma identyczne znaczki. Niestety w praktyce okazuje się, że bardzo często elementy punktujące lub numerujące listy są odmiennie prezentowane przez różne przeglądarki lub zwyczajnie nieobsługiwane. W przypadku profesjonalnie wyglądającej strony taki stan rzeczy jest niedopuszczalny. Rozwiązaniem tego problemu może być możliwość ustawienia dowolnego obrazka jako punktora listy za pomocą stylu list-style-image.

<li>Pierwsza pozycja listy z własnym punktorem.</li>

<li>Druga pozycja listy z własnym punktorem.</li>

<li>Trzecia pozycja listy z własnym punktorem.</li>

</ul>

<<przykład>>

<li>Pierwsza pozycja listy z własnym punktorem.</li>

<li>Druga pozycja listy z własnym punktorem.</li>

<li>Trzecia pozycja listy z własnym punktorem.</li>

</ul>

</div>

<</przykład>>

Zawijanie tekstu

list-style- position
Dostępne wartości:	inside \| outside \| inherit
Wartość domyślna:	outside
Przykład:	ul {list-style- position:inside;}
Dziedziczenie:	Tak
Obsługa:	Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Korzystając z polecenia list-style-position, możemy określić zachowanie drugiego wiesza dla każdej z pozycji listy. Dokładnie rzecz biorąc, w przypadku gdy dany punkt listy nie zmieści się w jednej linii, zostanie automatycznie przeniesiony do drugiej. Nowa linia może zaczynać się w tym samym miejscu co pierwsza — outsite — lub może być wyrównana do tej samej pozycji, co punktor listy — inside.

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>

</ul>

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>

</ul>

<<przykład>>

<h3>Lista - list-style- position:outside</h3>

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>

</ul>

<h3>Lista - list-style- position:inside</h3>

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>

</ul>

</div>

<</przykład>>

Zbiorczy zapis właściwości list

list-style
Dostępne wartości:	<'list-style-type'> \| <'list-style-position'> \| <'list-style-image'>
Wartość domyślna:	—
Przykład:	ul {list-style: ;}
Dziedziczenie:	—
Obsługa:	Patrz: właściwości poszczególnych stylów