Tworzenie list za pomocą CSS

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: listy uporządkowane listy nieuporządkowane kurs css

W zwykłym html-u można stworzyć całkiem ciekawe listy, ale nigdy nie będą one tak różnorodne jak te, stworzone przy pomocy css.

Może najpierw pokaże jakąś listę, bo nie każdy wie co to jest:

To jest pierwsza pozycja listy
To jest druga pozycja listy

Można także sprawić by były numerowane i by przy kolejnych pozycjach były inne "znaczki". No, ale skoro świat idzie do przodu, wymyślono CSS to czemu z niego nie skorzystać, szczególnie, że dzięki niemu można uzyskać dużo lepsze efekty, a dodatkowo wszelkie zmiany w wyglądzie 100 stron dokonywane są przez zmianę w jednym pliku. Więc zacznijmy.

Skopiuj plik 'index.htm' i nadaj kopi nazwę 'listy.htm'. Od tego momentu wszelkie zmiany na stronie index.htm (w 99%) będziesz musiał także przeprowadzić na innych stronach - poradzisz sobie! (choćby dlatego, że musisz:-)) )

Budowanie strony 'listy.htm':

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<table width="780" cellpadding="0" cellspacing="0">
<tr>
<td > </td>
</tr>
</table>

<table width="780" cellpadding="0" cellspacing="0">
<tr>
<td class="menu"> </td>
<td class="txt">

<ul // 1
style="list-style-image: // 2
url('lista.gif');"> // 3
<li>Pierwsza pozycja</li> // 4
<li>Druga pozycja</li> // 4
</ul>

</td>
</tr>
</table>

<table width="780" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

Opis:

* - spokojnie, specjalnie zrobiłem takie małe napisy w górnej i dolnej części strony, ponieważ są mało istotne. Najważniejsza treść jest bordowo-brązowa.
1 - 'ul' oznacza lista punktowana (taka jak w przykładzie na górze strony). Inną możliwością jest 'ol' wtedy lista będzie numerowana.
2 - określam wygląd dla tej konretnej listy. I tak kolejno mówię przeglądarce co chciałbym zmienić list-style-image: url('lista.gif'); co możnaby przetłumaczyć na dla listy[list]-wygląd[style]-obrazek[image].
3 - zostanie wczytany plik 'lista.gif', zamiast tych zwykłych czarnych punktów. Nazwa pliku może być dowolna, odradzam jednak stosowania polskich liter i spacji. Mogłeś już spostrzeć, że zawsze kiedy jest możliwość wczytania pliku graficznego schemat jest ten sam obiekt-image: url('ścieżka/plik.gif'); Podobna sytuacja była już wcześniej z tłem [background-image: url(plik.gif);].
4 - znacznik <li> oznacza początek pierwszej pozycji.

Jak zawsze CSS daje jeszcze kilka możliwości. Opiszę tu jedną z najczęściej używanych. Otóż jest to dodawanie jako punktów jakiś symboli, które są ładowane na poziomie przeglądarki [kwadraty na górze strony]. Mogą to być:

style="list-style-type: disc;"
style="list-style-type: circle;"
style="list-style-type: square;"
style="list-style-type: decimal;"
style="list-style-type: lower-roman;"
style="list-style-type: upper-roman;"
style="list-style-type: lower-alpha;"
style="list-style-type: upper-alpha;"
style="list-style-type: none;"

W przypadku list można jak najbardziej robić także klasy. Tu ich nie używałem ponieważ w ten sposób było mi łatwiej i krócej przeprowadzić tę lekcję.

A teraz zadanie bojowe dla Ciebie: zrób klasę, w której będą opisane właściwości listy. Popróbuj także nadać jej inne właściwości - tło, obramowanie itp (prawie wszystko czego do tej pory nauczyłeś się w tym kursie będzie działać!). Stworzoną wcześniej stronę zachowaj. Próby możesz przeprowadzać w niej. Niech na tej stronie w komórce określonej klasą 'txt' znajdzie się kilka przykładów. Ich treść i liczba zależy jedynie od Ciebie!

Patryk 'yarpo' Jar

szukaj: listy uporządkowane listy nieuporządkowane kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!