8. listy

KURS HTML
8. LISTY
HTML pozwala na tworzenie wielu rodzajów list, aczkolwiek niby tylko dwóch. Najpierw
przyjrzymy się prostszemu gatunkowi list – list wypunktowanych tworzonych za pomocą
znacznika <UL>.
Podstawowe infomracje o listach
Jakiekolwiek pozycje w liście zapisuje się pomiędzy tym znacznikiem poprzedzając je
opcjonalnym (aczkolwiek zamykać go nie trzeba) znacznikiem <LI> np.
<UL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</UL>
Zmiana wypunktowania listy
Deklaracją pozwalającą zmienić wypunktowanie listy to list-style-type, ale zanim
będziemy omawiać tą deklarację omówmy coś znacznie krótszego, mianowicie list-styleimage. Tak samo jak z teksturą moŜemy określić obrazek wypunktowania listy np.:
<STYLE TYPE="text/css">
ul
{
list-style-image: url(http://www.webdiary.pl/modules/technologie/plik.gif)
}
</STYLE>
<UL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</UL>
www.INFORMATYKA.cba.pl
KURS HTML
Kwadraciki i kółka w wypunktowaniu
JeŜeli chcemy zmienić standardową punkt w tym typie listy musimy uŜyć juŜ
wspomnianej deklaracji list-style-type. JeŜeli chcemy, aby punkty były kwadratowe wartość
deklaracji to square, a dla okręgów (przezroczysty środek) circle np.
<STYLE TYPE="text/css">
ul
{
list-style-type: square
}
</STYLE>
<UL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</UL>
Numerowanie w liście
Teraz przyjrzymy się większej ciekawostce – listą numerowanym. Tworzy się je prawie
tak samo, jak poprzednie listy z tą róŜnicą, iŜ znacznik to nie <UL>, tylko <OL>. TakŜe
deklaracja list-style-type jest znacznie ciekawsza. Najpierw po prostu przykład listy
numerowanej.
<OL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</OL>
Lista domyślnie jest numerowana, ale moŜe być alfabetyczna, łacińska itp. W tym typie
listy uŜywamy tylko deklaracji list-style-type. Pierwsza wartość dla tej listy, którą poznamy to
www.INFORMATYKA.cba.pl
KURS HTML
decimal-leading-zero. Jest ona przydatna do list, które zawierają więcej niŜ dziesięć pozycji,
poniewaŜ automatycznie doda zero do pozycji, które cyferkę mają mniejszą/równą zero np.:
<STYLE TYPE="text/css">
ol
{
list-style-type: decimal-leading-zero
}
</STYLE>
<OL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
<LI>Pozycja nr 6
<LI>Pozycja nr 7
<LI>Pozycja nr 8
<LI>Pozycja nr 9
<LI>Pozycja nr 10
<LI>Pozycja nr 11
</OL>
RóŜne alfabety w liście
Chcąc utworzyć listę alfabetyczną moŜemy skorzystać z dwóch jej typów. Wartość ciągle
tej samej deklaracji dla listy z małymi literami to lower-alpha, a dla listy z wielkimi literami
to upper-alpha. Pamiętajmy, Ŝe we wszystkich listach alfabetycznych (nie zaleŜnie od
języku), jeŜeli pozycja listy przejdzie przez cały alfabet, lista będzie składać się z dwóch i
więcej liter.
www.INFORMATYKA.cba.pl
KURS HTML
<STYLE TYPE="text/css">
ol
{
list-style-type: upper-alpha
}
</STYLE>
<OL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</OL>
Symbole greckie w liście
Lista numerowana moŜe być nawet rodem ze staroŜytnych Aten. JeŜeli chcemy, aby
zamiast cyfr i liter pojawiły się takie znaczki jak alfa, beta, gamma, omega itd. musimy uŜyć
wartości lower-greek (nie ma wartości upper-greek) np.:
<STYLE TYPE="text/css">
ol
{
list-style-type: lower-greek
}
</STYLE>
<OL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</OL>
Jest jeszcze mnóstwo list w innych językach, między innymi armenian - armeńskie,
georgian - gruzińskie, hebrew - hebrajsksie, hiragana - japońskie, katakana - japońskie,
www.INFORMATYKA.cba.pl
KURS HTML
hiragana-iroha - japońskie, katakana-iroha - takŜe japońskie, cjk-ideographic - ideograficzne,
a takŜe lower-latin i upper-latin, które powinny być małymi i wielkimi literami łacińskimi, ale
u mnie wyświetlają się tak samo, jak w przypadku list alfabetycznych „normalnych”.
Japoński przykład:
<STYLE TYPE="text/css">
ol
{
list-style-type: katakana-iroha
}
</STYLE>
<OL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</OL>
Numerowanie rzymskie
Jest jeszcze moŜliwość stworzenia list numerowanych cyframi rzymskimi. Tych list, jak
wielu innych teŜ są dwie moŜliwości – dla małych liter rzymskich (i, iii, iii, iv...) i wielkich (I,
II, III, IV). Są to wartości lower-roman - małe litery rzymskie i upper-roman - wielkie litery
rzymski np.:
www.INFORMATYKA.cba.pl
KURS HTML
<STYLE TYPE="text/css">
ol
{
list-style-type: upper-roman
}
</STYLE>
<OL>
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</OL>
Parametr START, numerowanie od konkretnej liczby
Jest jeszcze atrybut HTML pozwalający określić, od jakiej cyfry/litery ma zostać
rozpoczęte numerowanie. Jest to atrybut START, którego wartość to cyfra, która oznacza
pierwszą pozycję. JeŜeli umieścimy tam cyfrę 6 numerowanie zostanie rozpoczęte od cyfry
szóstej w górę, a jeŜeli za pomocą CSS zmieniliśmy typ wypunktowania na np. upper-alpha
numerowanie zostanie rozpoczęte od litery „F” w górę np.:
<STYLE TYPE="text/css">
ol
{
list-style-type: upper-alpha
}
</STYLE>
<OL START="6">
<LI>Pozycja nr 1
<LI>Pozycja nr 2
<LI>Pozycja nr 3
<LI>Pozycja nr 4
<LI>Pozycja nr 5
</OL>
www.INFORMATYKA.cba.pl