Logó{CSS3 Tutoriál}

Doboz Tulajdonságok

A dobozokról általában:

A weblapokat alkotó elemeket könnyebben elképzelhetjük, ha egymásba pakolható dobozként képzeljük el õket. Az ilyen dobozoknak jól elkülönülõ, CSS által stílussal felruházható részei a következõk:

  • Legbelül a tartalom helyezkedik el. Ez az a tartalom, amiért az elemünket létrehoztuk.
  • A tartalmat egy belsõ térköz (padding) öleli körbe.
  • A belsõ térköz (padding) határán helyezkedik el a doboz szegélye (border).
  • A szegélyt az outline veszi körbe, amire a szegély szegélyeként tekinthetünk.
  • A dobozok külsõ határát, annak margója (margin) alkotja.

A dobozok szélességének kiszámítása:

A doboz szélessége, a tartalom szélességének, valamint a jobb és bal oldali belsõ térköz méretének, a jobb és bal oldali szegély méretének összegébõl számítódik ki.

A doboz által elfoglalt vízszintes helyhez hozzátartozik annak jobb és bal oldali margójának mérete is.

Doboz szemléltetése.

A megjelenés beállítása:

A display tulajdonság segítségével meghatározhatjuk, hogy az elem miképpen generálódjon.

Értékek:

  • Az inline érték hatására az elem és a testvérei vízszintesen balról jobbra lesznek elrendezve, amíg el nem fogy a vízszintes hely a szülõ elemben. Ekkor új sorban balról jobbra ugyanígy folytatódnak az elemek.
  • A block érték hatására az elem elõtt és után sortörés illesztõdik be.
  • A inline-block érték hatására az elemet inline-nak veszi, de annak környezetét block-nak.
  • A run-in érték segítségével, ha az elemet blokk elem követi, akkor annak inline eleme lesz. Ha nem blokk típusú a következõ elem, akkor blokként jelenik meg.
  • A table/table-cell/table-footer-group/table-header-group/table-row/table-row-group/inline-table értékek a nevükbõl következõ táblázatelemnek megfelelõ kinézetet biztosítanak elemünknek.
  • A list-item érték listaelem megjelenést kölcsönöz az elemnek.
  • Az inherit hatására a szülõ elemtõl öröklõdik a tulajdonság értéke.
  • A none érték elrejti az elemet, nem jelenik meg a böngészõablakban.

Tulajdonságok:

A display tulajdonság értékei nem öröklõdnek.

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

Példa:



Az elemek méretezése:

A böngészõk alapból egy elem szélességének a teljes rendelkezésre álló vízszintes helyet, magasságának pedig a tartalom teljes megjelenítéséhez szükséges magasságot adják. Ezt CSS segítségével felülbírálhatjuk. Az esetek nagy részében azonban csak a szélesség beállítására van szükség.

A width tulajdonság segítségével az elemek szélességét határozhatjuk meg.

A height tulajdonság segítségével az elemek magasságát határozhatjuk meg.

Értékek:

  • Megadhatunk tetszõleges hosszúságértéket.
  • Megadhatunk százalékos értéket, ami a szülõ elem magasságához/szélességéhez lesz viszonyítva.
  • auto:
    • Szélesség esetén az érték hatására a teljes rendelkezésére álló vízszintes teret kitölti majd az elem.
    • Magasság esetén az érték hatására a böngészõ kiszámítja, hogy mekkora magasság szükséges az elem tartalmának teljes megjelenítéséhez, és ennyire állítja azt.
  • Az inherit érték hatására a valódi érték a szülõ elemtõl öröklõdik.

Tulajdonságok:

A width és a height tulajdonságok értékei nem öröklõdnek.

A tulajdonságok, a CSS1 szabványnak részei, ezért a tulajdonságokat, és a felsorolt értékeket a jelentõs böngészõk támogatják.

A tulajdonságokat csak blokk elemekre alkalmazhatjuk.

Példa:



Elemek minimális, maximális szélessége és magassága:

A min-width/max-width tulajdonság segítségével egy elem minimális/maximális szélességét állíthatjuk be. A min-height/max-height tulajdonság segítségével egy elem minimális/maximális magasságát állíthatjuk be.

Értékek:

  • Megadhatunk tetszõleges hosszúságértéket.
  • Megadhatunk százalékos értéket, ami a szülõ elemhez viszonyítódik.
  • A none érték hatására magasság esetén elvethetjük az esetlegesen örökölt minimális és maximális magasságértékeket. Szélességre ez az érték nem mûködik.

Tulajdonságok:

A min-width/max-width és a min-height/max-height tulajdonságok értékei nem öröklõdnek.

A tulajdonságok, a CSS2 szabványnak részei. A tulajdonságokat, és a felsorolt értékeket a jelentõs böngészõk támogatják.

A tulajdonságokat csak blokk elemekre alkalmazhatjuk.

Példa:



Tartalom túlcsordulás:

Amikor elemek átfedik egymást, vagy a szülõ elem mérete nem elég nagy ahhoz, hogy teljes mértékben megjelenítse gyermeke tartalmát, akkor a tartalmak egy része nem jelenítõdik meg. Az overflow tulajdonság segítségével ezeket a túlfolyó tartalmakat kezelhetjük. Ezen felül az overflow-x és az overflow-y tulajdonságokkal külön-külön kezelhetjük a vízszintes és a függõleges tartalom túlcsordulásokat.

Értékek:

  • A visible érték esetén a tartalom teljesen megjelenítésre kerül, az átfedõ részek pedig a dobozon kívülre igazítódnak.
  • A hidden érték esetén a tartalom elvágásra kerül, és a nem látszó részekhez semmilyen módon nem lehet hozzáférni.
  • A scroll érték esetén görgetõsáv jelenik meg, így elérhetjük a kitakart részeket.
  • Az auto érték esetén ha szükséges, a böngészõ görgetõsávot helyez ki.

Tulajdonságok:

Az overflow/overflow-x/overflow-y tulajdonságok értékei nem öröklõdnek.

Az overflow tulajdonság, a CSS1 szabványnak részei. A tulajdonságot, és a felsorolt értékeket a jelentõs böngészõk támogatják.

Az overflow-x/overflow-y tulajdonságok, a CSS3 szabványnak részei. A tulajdonságokat, és a felsorolt értékeket jelenleg az Internet Explorer kivételével a jelentõs böngészõk támogatják.

A tulajdonságokat csak blokk elemekre alkalmazhatjuk.

Példa:



Elemek pozícionálása:

A float tulajdonság segítségével pozícionálhatjuk elemeinket.

Értékek:

  • A left érték a többi elemtõl balra rendezi az elemet, amelyek jobbról körbefutják.
  • A right érték a többi elemtõl jobbra rendezi az elemet, amelyek balról körbefutják.
  • A none érték hatására az elemek az eredeti helyükre pozícionálódnak.

Tulajdonságok:

A float tulajdonság értékei nem öröklõdnek.

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

Példa:



Pozícionálás letiltása:

A clear tulajdonsággal felülbírálhatjuk az elemek pozícionálását. Segítségével meghatározhatjuk, hogy az elem melyik oldalán nem lehet pozícionált elem.

Értékek:

  • A left érték megakadályoz bármilyen tartalmat az elem bal oldalán. Az esetlegesen oda pozícionált elem az elemünk alá kerül.
  • A right érték megakadályoz bármilyen tartalmat az elem jobb oldalán. Az esetlegesen oda pozícionált elem az elemünk alá kerül.
  • A both érték megakadályoz bármilyen tartalmat az elem mindkét oldalán. Az esetlegesen oda pozícionált elem az elemünk alá kerül.
  • A none érték megszünteti az esetlegesen megörökölt clear értéket.

Tulajdonságok:

A clear tulajdonság értékei nem öröklõdnek.

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

Példa:



Margó beállítása:

A margin tulajdonság segítségével az elemek margójának méretét állíthatjuk be.

Fontos megjegyeznünk, hogy két egymás alatt elhelyezkedõ elem közötti margók nem adódnak össze (mint ahogyan vízszintesen szomszédos elemeknél), hanem a két margó közül a nagyobbik lesz beállítva, míg a kisebbik 0 értéket vesz fel.

Értékek:

  • Megadhatunk tetszõleges hosszúságértéket. Negatív érték megadása is lehetséges, de az eredmény megjelenítése nem egységes a böngészõk között.
  • Megadhatunk százalékos értéket, ami a szülõ elem szélességéhez viszonyul.
  • Az auto értékek hatására a böngészõ állítja be a margó értékét.

Paraméterek:

A tulajdonságnak legalább egy legfeljebb négy szóközzel elválasztott paramétere lehet:

  • Ha egy paramétert adunk meg akkor ez az érték állítódik be mind a négy oldalra margónak.
  • Ha két értéket adunk meg, akkor az elsõ érték a felsõ és alsó; a második pedig a jobb és baloldali margó méretét határozza meg.
  • Három érték esetén az elsõ a felsõ margót, a középsõ a bal és jobb oldalit, a harmadik pedig az alsó margót határozza meg.
  • Ha négy értéket adunk meg, akkor az elsõ a felsõt, a második a jobb oldalit, a harmadik az alsót és a negyedik a bal oldali margót határozza meg.

Margó megadása csupán az egyik oldalra:

A margót egyszerre egy oldalra is beállíthatjuk a margin-top, margin-bottom, margin-left, margin-right tulajdonságokkal, melyek lehetséges értékei a margin értékeivel megegyeznek.

Tulajdonságok:

A margin/margin-left/margin-top/margin-rigt/margin-bottom tulajdonságok értékei nem öröklõdnek.

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

Példa:



Az outline (körvonal):

Egy elem körvonala az elem szegélye körül helyezkedik el. A szegéllyel ugyanolyan értékeket használ. Azonban a doboz szélességébe és magasságába nem számolódik bele.

Az outline tulajdonság segítségével megadhatjuk az outline stílusát, szélességét és színét.

Paraméterei, és azok értékei:

A tulajdonság három szóközzel elválasztott paraméterrel rendelkezik.

  • Elõször adjunk meg neki azt a színértéket, amilyen színû outline-t szeretnénk.
  • Majd adjuk meg a kívánt szélességét. Minden érték megadható, ami szegély szélességként lehetséges.
  • Végül adjuk meg a stílusát. Itt minden érték megadható, ami szegély stílusként lehetséges.

Speciális outline tulajdonságok:

Ezeket a tulajdonságokat megadhatjuk külön-külön is az outline-color, outline-width és outline-style segítségével.

Az outline-offset tulajdonsággal távolságot állíthatunk be a margó és az outline között.

A outline-offset-nek megadhatunk tetszõleges hosszúságértéket, valamint az inherit kulcsszóval a szülõtõl örökölhetjük az értékét.

Tulajdonságok:

Az outline tulajdonság értékei nem öröklõdnek.

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

Példa:



Szegély beállítása:

A border tulajdonság segítségével a dobozok körüli szegély tulajdonságait állíthatjuk be.

Ha a doboz különbözõ oldalaira különbözõ szegélyt szeretnénk, azt megtehetjük a border-top, border-bottom, border-left, border-right tulajdonságok segítségével. Ezek paraméterei megegyeznek a border tulajdonságéval.

Paraméterek, és azok értékei:

A tulajdonságnak három szóközzel elválasztott paramétere van.

  • Elõször adjuk meg a szegély szélességét.
    • Megadhatunk tetszõleges hosszúságértékeket.
    • A thin érték vékony szegélyt eredményez.
    • A medium érték közepes szegélyt eredményez.
    • A thick érték vastag szegélyt eredményez.
    • Az inherit esetén a szegély szélesség a szülõ elemtõl öröklõdik.
  • Majd adjuk meg a vonalstílust.
    • A dotted pontozott vonalas szegélyt eredményez.
    • A dashed szaggatott vonalas szegélyt eredményez.
    • A solid szimpla vonalas szegélyt eredményez.
    • A double dupla vonalas szegélyt eredményez.
    • A groove faragott keret hatású szegélyt eredményez.
    • A wave hullámos vonal szegélyt eredményez.
    • A ridge a képernyõ síkjához képpest kiemelt hatásúvá teszi a dobozt.
    • Az inset süllyesztett hatású dobozt eredményez.
    • Az outset kiemelt hatású dobozt eredményez, de ridge-tõl különbözõ módon.
    • A none érték hatására nem jelenik meg a szegély.
    • Az inherit hatásra a szegélystílus a szülõ elemtõl öröklõdik.
  • Végül adjunk meg egy tetszõleges színértéket a szegély számára.
    Az inherit kulcsszó segítségével a szegély színe a szülõtõl öröklõdik.

A tulajdonság értékeinek külön-külön is értéket adhatunk a border-width, a border-color és a border-style tulajdonságokkal.

Ezen felül lehetõségünk van a négy oldalnak külön-külön szegélyt beállítani, a border-top, a border-right, a border-bottom és a border-left tulajdonságokkal.

A négy oldalra külön-külön megadott szegélyek értékeit is beállíthatjuk egyenként a border-top-style, a border-top-color, a border-top-width, a border-right-style, a border-right-color, a border-right-width, a border-bottom-style, a border-bottom-color, a border-bottom-width, a border-left-style, a border-left-color és a border-left-width tulajdonságokkal.

Tulajdonságok:

A border tulajdonságok értékei nem öröklõdnek.

A tulajdonságok, már a CSS1 és a CSS2 szabványnak is részei voltak. A tulajdonságokat, és a felsorolt értékeket támogatják a jelentõs böngészõk.

Példa:



Lekerekített szegélyszélek:

A border-radius segítségével lekerekített sarkú szegélyeket kaphatunk.

Értékek:

  • Megadhatunk tetszõleges hosszúságértékeket, amik a sugarát határozza meg a lekerekített saroknak.
  • Megadhatunk százalékos értékeket is.
    • 0% és 50% közötti értékekkel a lekerekített sarkok sugarának a mérete állítható be.
    • 50% feletti érték esetén a doboz oldalai félkörbe mennek át.

A sarkok lekerekítettsége külön-külön is beállítható a border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius tulajdonságokal.

Paraméterek száma:

A border-radius tulajdonságnak legfeljebb négy szóközzel elválasztott paramétert adhatunk meg, melyek jelentése a következõ:

  • Egy paraméter esetén ez az érték állítódik be mind a négy sarokra.
  • Két paraméter esetén az elsõ paraméter a bal-felsõ és jobb-alsó sarokba; a második pedig a bal-alsó és jobb-felsõ sarokba állítódik be.
  • Három érték esetén, az elsõ érték a bal-felsõ; a második bal-alsó és jobb-felsõ; a harmadik pedig jobb-alsó sarokba állítódik be.
  • Négy paraméter esetén, az elsõ a bal-felsõ, a második a jobb-felsõ, a harmadik a jobb-alsó és a negyedik a bal-alsó sarokba állítódik be.

Tulajdonságok:

A border-radius tulajdonságok értékei nem öröklõdnek.

A tulajdonságok, a CSS3 szabvány részei. A tulajdonságokat, és az értékait jelenleg csupán a Safari, a Chrome és az Opera böngészõk támogatják.

Ezen felül a Safari egyelõre nem támogatja a százalékos rádiusz megadást.

Példa:



Szegélykép beállítása:

A border-image tulajdonság segítségével saját képpel bírálhatjuk felül a szegélystílust.

Ezt a képet a böngészõ kilenc részre "vágja", amibõl a középsõ részt elhagyja, sarkokat a szegély sarkainál használja fel, a széleket pedig nyújtva vagy ismételve a szélekhez használja fel.

Paraméterek, és értékeik:

A tulajdonság paraméterei szóközzel vannak elválasztva.

  • Elõször adjuk meg a háttérképnek szánt képre mutató url-t.
  • Ezután következik egy legalább egy legfeljebb négy lehetséges hosszúságérték paramétert tartalmazó szóközzel elválasztott paraméterlista. Ezek az értékek megadják, hogy melyik oldalról a kép szélétõl számítva hány pixelnyire kell "megvágni" azt.
    • Egy paraméter esetén, ez minden oldalról ugyanaz a távolság lesz.
    • Két paraméter esetén az elsõ a felsõ és alsó, a második a jobb és a bal oldali távolságot határozza meg.
    • Három érték esetén az elsõ a felsõ, a második a jobb és bal, a harmadik az alsó távolságot határozza meg.
    • Négy érték esetén az elsõ a felsõ, a második a jobb, a harmadik az alsó és a negyedik a bal távolságot határozza meg.
  • Végül megadjuk, hogy a feldarabolt kép széleit hogyan használjuk fel a szegélyszéleinek:
    • A strech érték hatására a böngészõ a szükséges méretûre nyújtja a képszeletet.
    • A repeat érték hatására a böngészõ nyújtás helyett addig ismétli a képszeleteket, amíg szükséges.
    • A round érték hatása ugyanaz, mint a repeat azonban átméretezi annyira a képszeleteket, hogy mintázatuk pontosan illeszkedjen a sarokpontokkal.

Tulajdonságok:

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

A tulajdonság a CSS3 szabvány része. Jelenleg még egyik böngészõ sem támogatja.

Példa:



Belsõ térköz:

A belsõ kitöltés az elem tartalma és szegélye közötti rész, amelyet a padding tulajdonsággal állíthatunk be.

A négy oldali padding értéknek külön-külön is értet adhatunk a padding-top, padding-right, padding-bottom, padding-left tulajdonságok segítségével.

Értékek:

  • Megadhatunk tetszõleges hosszúságértéket.
  • Megadhatunk százalékos értéket, ami a szülõ elem szélességéhez viszonyul.
  • Az inherit hatására az érték a szülõ elemtõl öröklõdik.

Paraméterek:

A tulajdonságnak legalább egy, legfeljebb négy szóközzel elválasztott paramétere lehet:

  • Egy érték esetén, mind a négy oldalnak ugyanaz a padding érték állítódik be.
  • Két érték esetén, az elsõ a felsõ és alsó, a második a jobb és bal oldali padding értéket állítja be.
  • Három érték esetén, az elsõ a felsõ, a második a jobb és bal, a harmadik az alsó padding értéket állítja be.
  • Négy érték esetén az elsõ a fenti, a második a jobb, a harmadik az alsó és a negyedik a bal oldali padding értéket állítja be.

Tulajdonságok:

A padding tulajdonság értékei nem öröklõdnek.

A tulajdonság, már a CSS1 szabványnak is része volt, ezért a tulajdonságot, és a felsorolt é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