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.
<ul style="list-style-type:circle;">
<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>>
<div class="przyklad">
<ul style="list-style-type:disc;">
<li>Pierwsza pozycja listy - disc.</li>
<li>Druga pozycja listy - disc.</li>
<li>Trzecia pozycja listy - disc.</li>
</ul>
<ul style="list-style-type:circle;">
<li>Pierwsza pozycja listy - circle.</li>
<li>Druga pozycja listy - circle.</li>
<li>Trzecia pozycja listy - circle.</li>
</ul>
<ul style="list-style-type:square;">
<li>Pierwsza pozycja listy - square.</li>
<li>Druga pozycja listy - square.</li>
<li>Trzecia pozycja listy - square.</li>
</ul>
<ul style="list-style-type:decimal;">
<li>Pierwsza pozycja listy - decimal.</li>
<li>Druga pozycja listy - decimal.</li>
<li>Trzecia pozycja listy - decimal.</li>
</ul>
<ul style="list-style-type:lower-roman;">
<li>Pierwsza pozycja listy - lower-roman.</li>
<li>Druga pozycja listy - lower-roman.</li>
<li>Trzecia pozycja listy - lower-roman.</li>
</ul>
<ul style="list-style-type:upper-roman;">
<li>Pierwsza pozycja listy - upper-roman.</li>
<li>Druga pozycja listy - upper-roman.</li>
<li>Trzecia pozycja listy - upper-roman.</li>
</ul>
<ul style="list-style-type:lower-alpha;">
<li>Pierwsza pozycja listy - lower-alpha.</li>
<li>Druga pozycja listy - lower-alpha.</li>
<li>Trzecia pozycja listy - lower-alpha.</li>
</ul>
<ul style="list-style-type:upper-alpha;">
<li>Pierwsza pozycja listy - upper-alpha.</li>
<li>Druga pozycja listy - upper-alpha.</li>
<li>Trzecia pozycja listy - upper-alpha.</li>
</ul>
<ul style="list-style-type:none;">
<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>>
<div class="przyklad">
<ul style="list-style-type:decimal-leading-zero;">
<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>
<ul style="list-style-type:lower-greek;">
<li>Pierwsza pozycja listy - lower-greek.</li>
<li>Druga pozycja listy - lower-greek.</li>
<li>Trzecia pozycja listy - lower-greek.</li>
</ul>
<ul style="list-style-type:lower-latin;">
<li>Pierwsza pozycja listy - lower-latin.</li>
<li>Druga pozycja listy - lower-latin.</li>
<li>Trzecia pozycja listy - lower-latin.</li>
</ul>
<ul style="list-style-type:upper-latin;">
<li>Pierwsza pozycja listy - upper-latin.</li>
<li>Druga pozycja listy - upper-latin.</li>
<li>Trzecia pozycja listy - upper-latin.</li>
</ul>
<ul style="list-style-type:armenian;">
<li>Pierwsza pozycja listy - armenian.</li>
<li>Druga pozycja listy - armenian.</li>
<li>Trzecia pozycja listy - armenian.</li>
</ul>
<ul style="list-style-type:georgian;">
<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ę.
<ul style="list-style-type:decimal;">
<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.
<ol style="list-style-type:disc;">
<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.
<ul style="list-style-image:url(punktor.gif);">
<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>>
<div class="przyklad">
<ul style="list-style-image:url(punktor.gif);">
<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.
<ul style="list-style-position:outsite;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
</ul>
<ul style="list-style-position:inside;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
</ul>
<<przykład>>
<div class="przyklad">
<h3>Lista - list-style- position:outside</h3>
<ul style="list-style-position:outsite;width:300px;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
</ul>
<h3>Lista - list-style- position:inside</h3>
<ul style="list-style-position:inside;width:300px;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<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 |
Opisane właściwości list — podobnie jak to miało miejsce w przypadku czcionek — można zapisać za pomocą jednej zbiorczej deklaracji.
<ul style="list-style:url(punktor.gif) inside;width:300px;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
</ul>
<<przykład>>
<div class="przyklad">
<ul style="list-style:url(punktor.gif) inside;width:300px;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. </li>
</ul>
</div>
<</przykład>>