Sorszámozott listát az OL, míg nem sorszámozott listát az UL elem segítségével lehet létrehozni. Az elemek blokk-szintű elemek, azaz a lista egy önálló dobozba fog kerülni. Mindkét elemen belül az egyes listaelemeket az LI elemmel kell megadni, amely szintén blokk-szintű, tehát a lista dobozán belül minden listaeleme egy-egy önálló dobozzal rendelkezik, amelyek egymás alá kerülnek.
A dobozok egymásba ágyazása több okból is fontos. Egyrészt a formázásnál kihasználható, másrészt a később tárgyalandó úsztatott objektumok elhelyezésénél is hasznos tudni ezekről, hogy az eredmény úgy nézzen ki, ahogy látni szeretnénk. Ez utóbbi esetre majd az úsztatott objektumok tárgyalásakor még visszatérünk.
Íme néhány példa:
Mint látható, a listák akár egymásba is ágyazhatóak.
A kétféle lista tulajdonképpen csak abban tér el egymástól, hogy az egyik esetben a listaelemek előtt egyesével növekvő sorszám jelenik meg, a másikban pedig minden listaelem előtt egyforma jel látható. Mind a sorszám alakja, mind az egyforma jel alakja a stíluslapon keresztül beállítható, de ez utóbbi az egymásba ágyazott listáknál automatikusan vált a beágyazás mélysége szerint.
Amennyiben az OL illetve az UL elem dobozát bekeretezzük, akkor az egész
listát egyetlen keretbe tudjuk foglalni. Erre a bekezdéseknél már megismert
tulajdonságok, a
border-color, a
border-style és a
border-width alkalmasak.
Természetesen a doboz margója a
margin tulajdonsággal, és a
belső margója a padding
tulajdonsággal szintén beállítható.
Természetesen a listaelemhez (LI) tartozó dobozok szintén keretezhetők,
illetve a margójuk is állítható. Azonban ezúttal vigyázzunk, mert a baloldali
margó a jel illetve a sorszám miatt alaphelyzetben már eleve nem nulla értékű!
Azt ugyanis, hogy minden lista elemei beljebb kezdődjenek, a baloldali margó
állítása oldja meg. A jel illetve a sorszám pedig ebben a margóban egy
marker
dobozban jelenik meg.
Ezzel a jellel vagy markerrel foglalkozzunk egy kicsit többet!
Vannak bizonyos tulajdonságok, amelyekkel ennek a markernek az elhelyezkedését
lehet befolyásolni. Ezek közé tartozik a
marker-offset
tulajdonság, amely a fő doboztól való távolságot befolyásolja. Kicsit több is
megtudható a tulajdonságról, illetve általában a markerekről a css2.pdf
164. oldalán. Az ott leírtak hasznosak lehetnek olyan sorszámozási mód
kialakítására, amelyet alapból nem tudunk beállítani, azonban csak az újabb
készítésű böngészőkön fog a dolog működni.
Azonban vannak minden böngészőn működő lehetőségek a marker beállítására. Vegyük ezeket sorra!
Először is tudni kell, hogy ha a marker a listaelem dobozán kívül található, tehát a margón helyezkedik el, akkor a margó tulajdonságát, miszerint átlátszó, a marker doboza is örökli.
A megjelenő jelet a
list-style-type
tulajdonsággal tudjuk beállítani. A tulajdonság leírásánál megtalálhatók a
lehetséges értékei, amelyek sorszámozott listánál azt állítják be, hogy milyen
számok jelenjenek meg, míg felsorolás esetén a jel alakját határozza meg.
Felsorolás esetén, ha a három lehetséges alak nem tetszik, lehetőségünk van
egy általunk választott képet használni jelnek. Természetesen ez akkor
használható, ha a kép elegendően kicsi. Erre a
list-style-image
tulajdonság, amelynek megadva a kép címét, a böngésző azt fogja használni (a
Netscape erre nem hajlandó!):
Ennek hatására a lista így néz ki a megfelelő kép esetén:
A harmadik tulajdonság, amely a listajelek megjelenését szabályozza, a
list-style-position
tulajdonság, amely segítségével azt adhatjuk meg, hogy a marker doboza
legyen a listaelem dobozán. A két választási lehetőséget a fenti lista szemlélteti – amennyiben a használt böngésző ismeri ezt a tulajdonságot.
Nyilvánvalóan a kettő között az egyik különbség a már említett, miszerint a külső marker doboza a margón található, és ahhoz hasonlóan átlátszó. A másik különbség a többsoros listáknál látható igazán:
Mint látható, a bal margó ugyanott található, csak a listajel helye tér el ehhez képest.
A fenti három tulajdonság egyszerre is megadható a
list-style tulajdonság
segítségével.
Fontos még tudni, hogy a listajel stílusa beállítható az LI elemnél is, vagy a listát alkotó OL illetve UL elemeknél is. Az utóbbi esetben az LI automatikusan örökli az értékeket. Éppen ezért jobb ezeknél beállítani a stílust, mint az LI esetén, mert akkor csak sorszámozott/nem számozott listákra fog vonatkozni. Ellenkező esetben ha például minden LI-re érvényesen állítunk be képet, akkor a böngésző a számozott listánál sem a számot, hanem a képet fogja mutatni.
Természetesen arra is van lehetőség, hogy a listajelet teljesen letiltsuk:
list-style: none...