Logó{CSS3 Tutoriál}

Listák és Táblák

A listajel beállítása:

A list-style-type tulajdonság segítségével beállíthatjuk a listánkhoz tartozó listajelet.

Értékek:

  • A disc érték esetén egy telített kör lesz a listajel.
  • A circle érték esetén egy belül üres kör lesz a listajel.
  • A square érték esetén egy belül telített négyzet lesz a listajel.
  • A decimal érték esetén a listajel számozottá válik.
  • A decimal-leading-zero érték esetén a listajel számozottá válik, de vezetõ nullával (01, 02, 03...).
  • Az upper-roman érték esetén a listajel számozottá változik, de római nagybetûs számokkal.
  • A lower-roman érték esetén a listajel számozottá változik, de római kisbetûs számokkal.
  • Az upper-alpha érték esetén a listajel számozottá változik, de csupa nagybetûvel, amelyek abc sorrendben követik egymást.
  • A lower-alpha érték esetén a listajel számozottá változik, de csupa kisbetûvel, amelyek abc sorrendben követik egymást.
  • A lower-greek érték esetén a listajel számozottá változik, de csupa kis görög betûkkel, amelyek abc sorrendben követik egymást.
  • A gregorian érték esetén a listajel számozottá változik, de a klasszikus gregorián számozással.
  • Az armenian érték esetén a listajel számozottá változik, de örmény számozással.
  • A none érték esetén a listajel nem kerül megjelenítésre.
  • Az inherit érték esetén a listajel a szülõ elemtõl öröklõdik.

Tulajdonságok:

A list-style-type tulajdonság értékei öröklõdnek.

A tulajdonság csak lista elemekre alkalmazható.

A tulajdonság, már a CSS1 szabványnak is része volt, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Az Internet Explorer az inherit értéket nem támogatja.

Példa:



Saját listajel megadása:

A list-style-image tulajdonsággal saját listajelet állíthatunk be.

Értékek:

  • Megadhatunk egy url-t, ami a saját listajelünk képére mutat. Ez a kép rendszerint egy jpg, gif vagy png kiterjesztésû fájl.
  • A none érték hatására nem lesz listajel megjelenítve.
  • Az inherit érték hatására a listajelet a szülõ elemtõl örököljük.

Tulajdonságok:

A list-style-image tulajdonság értékei öröklõdnek.

A tulajdonság csak lista elemekre alkalmazható.

A tulajdonság, már a CSS1 szabványnak is része volt, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Az Internet Explorer az inherit értéket nem támogatja.

Példa:



A listajel pozícionálása:

A list-style-position tulajdonság segítségével beállíthatjuk listajelünk és az azt követõ szöveg egymáshoz viszonyított pozícióját.

Értékek:

  • Az inside érték hatására a listajelet a böngészõ függõlegesen egy vonalba helyezi a listaelem többi sorának bal széleivel.
  • Az outside értékek hatására a listaelem minden sorát annyira húzza be, mint amennyire a listaelem elsõ sora van behúzva a listajel miatt.
  • Az inherit érték hatására az értéket a szülõ elemtõl öröklõdik.

Tulajdonságok:

A list-style-position tulajdonság értékei öröklõdnek.

A tulajdonság csak lista elemekre alkalmazható.

A tulajdonság, már a CSS1 szabványnak is része volt, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentõs böngészõk.

Az Internet Explorer az inherit értéket nem támogatja.

Példa:



A list-style gyorstulajdonság:

A list-style tulajdonsággal összevonhatjuk az eddigi lista tulajdonságokat egyetlen tulajdonsággá.

Értékek:

Az értékeket szóközzel választjuk el.

  • Elõször a listakép elérési útjának url-jét adjuk meg.
  • Majd a definiáljuk a listajel típust.
  • Végül a listajel pozíciót.

Tulajdonságok:

A list-style gyorstulajdonság értékei öröklõdnek.

A tulajdonság csak lista elemekre alkalmazható.

A tulajdonság, már a CSS1 szabványnak is része volt, ezért a tulajdonságot támogatják a jelentõs böngészõk.

Példa:



Táblázat megjelenítése:

A table-layout tulajdonság segítségével megadhatjuk a táblázatunk megjelenítésének módját.

Értékek:

  • A fixed érték esetén a táblázat és az oszlopok szélességét a táblázat elsõ sora alapján generálódik. A fixed érték gyorsabban méretezi a táblázatot, mint az auto.
  • Az auto érték esetén a cellák szélességét az oszlopokban elõforduló legszélesebb tartalomhoz igazítja. Lassabb, mint a fixed, de a cellák szélessége jobban igazodik a tartalomhoz.
  • Az inherit érték esetén a tulajdonság a szülõ elemtõl örökli az érékét.

Tulajdonságok:

A table-layout tulajdonság értékei nem öröklõdnek.

A tulajdonság csak táblázat elemekre alkalmazható.

A tulajdonság, már a CSS2 szabványnak is része volt, és mind a tulajdonságot, mind az értékeket támogatják a jelentõs böngészõk.

Példa:



A cellák közötti távolság beállítása:

A border-spacing property segítségével a cellák közötti térközt tudjuk beállítani.

Értékek:

  • Értéknek megadhatunk tetszõleges hosszúságértékeket.
  • Az inherit érték segítségével a szülõ elemtõl örökölhetjük a cellatávolságot.

Tulajdonságok:

A border-spacing tulajdonság értékei öröklõdnek.

A tulajdonság csak táblázat elemekre alkalmazható.

A tulajdonság, már a CSS2 szabványnak is része volt, és mind a tulajdonságot, mind az értékeket támogatják a jelentõs böngészõk.

Példa:



A cella szegély beállítása:

A border-collapse tulajdonság segítségével a celláink körüli keretet állíthatjuk be.

Értékek:

  • A collapse érték segítségével a cellák között egymással megosztott, közös keretet hozunk létre. Ekkor a cell-spacing tulajdonság is értelmét veszti.
  • A separate érték segítségével minden cella saját, egyéni kerettel fog rendelkezni.
  • Az inherit érték segítségével a tulajdonság értékét a szülõ elemtõl örököljük meg.

Tulajdonságok:

A border-collapse tulajdonság értékei öröklõdnek.

A tulajdonság csak táblázat elemekre alkalmazható.

A tulajdonság, már a CSS2 szabványnak is része volt, és mind a tulajdonságot, mind az értékeket támogatják a jelentõs böngészõk.

Példa:



Az üres cellák kezelése:

Az empty-cells tulajdonsággal az üres cellák kezelését oldhatjuk meg.

Értékek:

  • A show érték hatására az üres cellák megjelennek a táblázatban kerettel és háttérrel.
  • A hide érték hatására az üres cellákat elrejtjük a helyükön egy üres helyet kihagyva.
  • Az inherit érték hatására a tulajdonság az értékét a szülõ elemtõl örököli.

Tulajdonságok:

Az empty-cells tulajdonság értékei öröklõdnek.

A tulajdonság csak táblázat elemekre alkalmazható.

A tulajdonság, már a CSS2 szabványnak is része volt, és mind a tulajdonságot, mind az értékeket támogatják a jelentõs böngészõk.

Példa:



A táblacím pozícionálása:

A caption-side értékkel a caption elembe írt táblázatcímet pozícionálhatjuk a táblázathoz képpest.

Értékek:

  • A top érték hatására a táblázat címe a táblázat felett jelenik meg.
  • A bottom érték hatására a táblázat címe a táblázat alatt jelenik meg.
  • Az inherit hatására érték a szülõ elemtõl öröklõdik.

Tulajdonságok:

A caption-side tulajdonság értékei öröklõdnek.

A tulajdonság csak táblázat elemekre alkalmazható.

A tulajdonság, már a CSS2 szabványnak is része volt, és mind a tulajdonságot, mind az értékeket támogatják a jelentõs böngészõk.

Példa:



Feladat:

Egészítsd ki a példakódot stílus szabályokkal úgy, hogy a képpel megegyezõ végeredményt kapj!

Doboz tulajdonságos feladat.


Tárnok Tamás Attila - CSS3 Tutoriál - 2010