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

Kapcsolódó bejegyzések:
  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • Font Family: betűcsalád (típus) megadása. Több betűtípus is megadható egymás után, melyeket vesszővel kell elválasztani. Pl.P { font-family: “Times New Rom …

  • A böngészők alapértelmezett tulajdonságait már a CSS fájlok legelején érdemes egységessé tenni, így a későbbiekben elég sok bosszúságot meg lehet spórolni.…

  • CSS alapú legördülő horizontális menü készítését sajátíthatod el a leírás segítségével.Stílus:body { padding: 0px; margin: 0px; behavior: ur …

  • Top Margin: a felső margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla ér …

A cikket beküldte: Harder (http://blog.harder.hu)

Szólj hozzá
a 10 – Listák, felsorolások tulajdonságai c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>