Kursy

Listy

Listy

Witam w kolejnej części kursu poświęconego CSS. Zapewne spotkałeś się już z listą elementów w html. Listy takie numerują lub oznaczają elementy specjalnymi symbolami (np. okrąg, kwadrat). W tworzeniu list nie można polegać tylko na html ponieważ nasza lista będzie nieciekawa. Z pomocą przychodzą oczywiście style :)

Co da nam wykorzystanie CSS w listach? Przede wszystkim lepszą kontrolę nad typami znaczników używanych do oznaczania elementów listy. Dzięki stylom posiadasz możliwość stworzenia własnych symbolów lub skorzystania z pokaźnej biblioteki symbolów już gotowych.

Jeżeli przeczytałeś kurs HTML to zapewne skojarzysz, że znacznikiem odpowiedzialnym za tworzenie pozycji w liście jest <LI>*. To właśnie mu będziemy przypisywać właściwości CSS.

Oto elementy i właściwości które możemy wykorzystać:

LIST-STYLE-TYPE Disc
Circle
Square
Decimal
Lower-roman
Upper-roman
Lower-alpha
Upper-alpha
None
LIST-STYLE-IMAGE url
None
LIST-STYLE-POSITION Outside
Inside
LIST-STYLE To co w LIST-STYLE-TYPE
To co w LIST-STYLE-IMAGE
To co w LIST-STYLE-POSITION

*Według specyfikacji CSS właściwości te można użyć w obojętnie jakim znaczniku, jednak w IE i NN można je stosować wyłącznie w <LI>

Na początek stworzymy listę gdzie dla każdego elementu określimy ten sam styl. 


<HTML>

<HEAD>

	<STYLE TYPE="text/css">

	LI {

	list-style-type:square;

	list-style-position:inside;

	}

	</STYLE>

</HEAD>

<BODY>

	Oto przykładowa lista:

	<UL>

 		<LI> element 1

 		<LI> element 2

 		<LI> element 2

	</UL>

</BODY>

</HTML>


Oto przykładowa lista:

  • element 1
  • element 2
  • element 3

W ten sposób określiliśmy, że wypunktowanie będzie kwadratem a tekst będzie wcięty w ten sposób, że przeniesiony do następnej linii tekst będzie umieszczony pod znacznikiem listy (inside). Z kolei Outside powoduje to, że przeniesiony tekst będzie wyrównywany do pierwszej litery pierwszej linii tekstu. Dobra, ale co zrobić jeżeli w jednej liście trzeba określić kilka rodzajów wypunktowań ? Wystarczy, że stworzymy klasy. Wygląda to mniej więcej tak:


<HTML>
<HEAD>
<STYLE TYPE="text/css">

LI.jeden {list-style-type:circle;}

LI.dwa {list-style-type:disc;}
</STYLE>
</HEAD>
<BODY>
Menu:
<UL>
<LI CLASS="jeden">elem 1
<LI CLASS="dwa">elem 2
<LI CLASS="jeden">elem 3
<LI CLASS="dwa">elem 4
</UL>
</BODY>
</HTML>

  • elem 1
  • elem 2
  • elem 3
  • elem 4

Prawda, że łatwe ;)

Na koniec pokażę co trzeba zrobić żeby za wypunktowanie służyły własne obrazki (np. strzałki). Wystarcz, że w stylach napiszemy

LI {list-style-image:url(obrazek.gif);}

To wszystko jeżeli chodzi o style w listach. Zachęcam do eksperymentowania z właściwościami i zapraszam do kolejnej części kursu.