CSS referencia => Osztályozó tulajdonságok

5.6 Osztályozó tulajdonságok

Ezek a tulajdonságok sorolják az elemeket kategóriákba, ezenkívül beállítják megjelenítési tulajdonságaikat is.

A felsorolás-tulajdonságok írják le, a listaelemek formázási előírásait. A felsorolás-tulajdonságok minden elemhez alkalmazhatóak és normál módon öröklődnek a leszármazási fastruktúrán. Mindamellett megjelenítési hatást csak a listaelemekre gyakorolnak. A HTML-ben tipikusan ide tartoznak a LI elemek.

• 5.6.1 'display'
• 5.6.2 'white-space'
• 5.6.3 'list-style-type'
• 5.6.4 'list-style-image'
• 5.6.5 'list-style-position'
• 5.6.6 'list-style'

Vissza a hivatkozó oldalra

5.6.1 'display'

Értéke lehet: block | inline | list-item | none
Alapértelmezés: block
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Nincs értelmezve

Ez a tulajdonság határozza meg, hogy egy elem legyen-e, és hogyan legyen ábrázolva a megjelenítőn (a megjelenítő lehet képernyő, nyomtatási termék, stb...).

Egy block értékkel rendelkező elem új dobozt kap. A doboz elhelyezését és a szomszédos dobozokhoz viszonyított helyzetét a Formázásmodell határozza meg. Általában, a H1, vagy P jellegű elemek block-típusúak. A list-item érték hasonlít a blockhoz, kivéve, ha listajelölő is van hozzáadva. A HTML-ben tipikusan ilyen (listajelölővel ellátott) elem a LI.

Egy inline értékkel rendelkező elem soron belüli dobozt kap, ugyanabban a sorban, mint az őt megelőző tartalom. A doboz méretezése formázott tartalmának mérete szerint történik. Ha tartalma szöveg, sorokra osztható, és minden sornak külön doboza lesz. A margó-, szegély-, és kitöltés-tulajdonságok használatosak az inline elemekhez, a sortörésnél nincs látható hatásuk.

A none érték használata kikapcsolja az elem megjelenítését, beleértve leszármazott elemeit és az őt körülvevő dobozt is.

P { display: block }

EM { display: inline }

LI { display: list-item }

IMG { display: none }

A legutolsó definíció kikapcsolja a képek megjelenítését.

A display tulajdonság alapértelmezett értéke a block; de minden böngésző rendelkezik alapértelmezett értékekkel minden HTML elemre vonatkozóan, amely a HTML specifikációban írt javasolt megjelenítésen alapul.

A böngészők figyelmen kívül hagyhatják a display tulajdonságot, a stíluslap szerzője által definiált helyett használhatják saját alapértelmezett értékeiket is. (Lásd a 7. fejezetet.)

Vissza a hivatkozó oldalra

5.6.2 'white-space'

Értéke lehet: normal | pre | nowrap
Alapértelmezés: normal
Alkalmazható: Blokkszintű elemekhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

Az angol 'whitespace' kifejezésre nem találtam egy magyar szót; körülírva: a szavak, mondatok közötti üres közt jelenti, ami nem azonos a szóközökkel. A továbbiakban -egyéb megegyezés híján- közként fogom említeni.

Ez a tulajdonság írja le, hogyan legyenek értelmezve a közök egy elemen belül: normal módon (amikor a közök egy szóközzé vannak tömörítve), pre-ként (úgy viselkedjen, mint a PRE a HTML-ben), vagy nowrap módon (a sortörés BR eleméhez hasonló módon):

PRE { white-space: pre }
P   { white-space: normal }

A white-space tulajdonság alapértelmezése a normal, de a böngészőknek általában minden HTML elemhez van alapértelmezett értékük, a HTML specifikációban leírt elemkirajzolási előírások szerint.

A böngészők figyelmen kívül hagyhatják a display tulajdonságot, a stíluslap szerzője által definiált helyett használhatják saját alapértelmezett értékeiket is. (Lásd a 7. fejezetet.)

Példa

A fenti példa megtekintésekor előfordulhat, hogy a "pre" osztályba tartozó bekezdés ugyanúgy jelenik meg, mint a "normál". Ez a hiba az IE böngészőcsaládot érinti. Ez esetben használjuk a PRE taget.

Vissza a hivatkozó oldalra

5.6.3 'list-style-type'

Értéke lehet:
disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
Alapértelmezés: disc
Alkalmazható: display: list-item tulajdonság-érték párral rendelkező elemekhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

E tulajdonság használatával határozható meg a listajelölő megjelenése, ha a list-style-image tulajdonság értéke none, vagy a kép, amelyre a benne szereplő hivatkozás mutat, nem elérhető.

Példa

Vissza a hivatkozó oldalra

5.6.4 'list-style-image'

Értéke lehet: <url> | none
Alapértelmezés: none
Alkalmazható: display: list-item tulajdonság-érték párral rendelkező elemekhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

Ez a tulajdonság állítja be azt a képet, ami listaelem-jelölőként alkalmazható. Ha a kép elérhető, helyettesíteni fogja a list-style-type tulajdonságban beállított jelölőt.

UL { list-style-image: url(images/styleimage.gif) }

Példa

Vissza a hivatkozó oldalra

5.6.5 'list-style-position'

Értéke lehet: inside | outside
Alapértelmezés: outside
Alkalmazható: display: list-item tulajdonság-érték párral rendelkező elemekhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

A list-style-position értéke határozza meg a lista-jelölő pozícióját a tartalomhoz képest. Formázáspéldáért lásd a 4.1.3 pontot.

Vissza a hivatkozó oldalra

5.6.6 'list-style'

Értéke lehet:
[disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none] || [inside|outside] || [url|none]
Alapértelmezés: Nincs definiálva
Alkalmazható: display: list-item tulajdonság-érték párral rendelkező elemekhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

A list-style tulajdonság egy 'gyorstulajdonság', amelynek segítségével a list-style-type, a list-style-image és a list-style-position tulajdonságok értékei állíthatók be.

UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }

A LI elemre közvetlenül beállított list-style tulajdonság nem várt eredményt hozhat. Tekintsünk egy példát:

Példa

Mivel a fenti példában az első definíciónak (Lásd a Rangsor fejezetet) nagyobb az egyedisége, felül fogja bírálni a második definíció előírásait és csak a lower-alpha felsorolás-stílus fog érvényesülni. Ezért csak a felsorolás jellegű elemeknél ajánlott beállítani a list-style tulajdonságot.

OL.alpha { list-style: lower-alpha }
UL       { list-style: disc }

Példa

Fenti példában az OL és UL elemekre beállított értékek -hála az öröklődési szabályoknak- vonatkozni fognak a LI elemekre is.

előző  tetejére  következő