10 – Listák, felsorolások tulajdonságai

Display: ezzel a tulajdonsággal az adott elem előtti és utáni sortörések megjelenését szabályozhatjuk. Lehetséges értékei: block (sortörést helyez el az elem előtt és után), inline (nem helyez el sortörést az elem előtt ill. után), list-item (sortörést helyez el az elem előtt és után, illetve a felsorolásjeleket is kiteszi), none (egyiket sem, de a beágyazott elemeket is kikapcsolja!!!).

Whitespace: a szóközök számának szabályozására használható.

Lehetséges értékei:
normal (több szóközt egynek vesz),
pre (annyi szóközt ír ki, amennyi a forrsban van),
nowrap (nem engedélyez sortörést a
tag használata nélkül).

List Style Type: a listaelemek (felsorolások) stílusát lehet vele beállítani

Lehetséges értékei:
disc (pötty),
circle (karika),
square (négyszög),
decimal (sorszámok),
lower-roman (kisbetűs római számok),
upper-roman (nagybetűs római számok),
lower-alpha (kisbetűk),
upper-alpha (nagybetűk),
none (egyik sem).

Pl.

1
2
3
4
5
LI.negyszog {list-style-type: square} 
UL.sima {list-style-type: none} 
OL {list-style-type: upper-alpha} /* A B C D E stb. */ 
OL OL {list-style-type: decimal} /* 1 2 3 4 5 stb. */ 
OL OL OL {list-style-type: lower-roman} /* i ii iii iv stb.*/

List Style Image: a felsoroláselemek kis képek is lehetnek, amelyek elérési útját itt kell megadni. Pl.

1
2
UL.check { list-style-image: url(../kepek/kiskep.gif) } 
UL LI.x  { list-style-image: url(kep.jpg) }

List Style Position: megadhatjuk, hogy a felsoroláselemek az alattuk levő sor behúzásához képest hogyan helyezkedjenek el.

Lehetséges értékei:
inside,
outside.

List Style: ezzel a tulajdonsággal egyszerre lehet beállítani az alábbiakat:

list-style-type,
list-style-position,
list-style-image url-je.

Pl.

1
2
3
4
5
LI.negyszog { list-style: square inside } 
UL.sima { list-style: none } 
UL.check { list-style: url(../kepek/kiskep.gif) circle } 
OL { list-style: upper-alpha } 
OL OL { list-style: lower-roman inside }

A szerző honlapja: http://fodorsi.ini.hu

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét