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.

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.

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.

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