A weboldal minden eleme egy téglalap alakú területen jelenik meg. Ha írunk egy bekezdést, beszúrunk egy táblázatot vagy egy képet, akkor ezek mind egy téglalap alakú területet, egy „dobozt” fognak elfoglalni a weboldalon.
Ehhez a dobozhoz a W3C szabványának megfelelőn hozzárendelhetünk belső margót (padding), szegélyt (border), illetve margót (margin). Ezek a téglalap alakú területet elfoglaló tartalmat keretként veszik körül, a tartalomtól kifelé haladva, a felsorolt sorrendben.
Az alábbi ábra illusztrálja a dobozmodellt. A belső margón megjelenik a háttér, ha van. Utána a szegély következik valamilyen stílusban, majd végül a margó, ami átlátszó, ezért a szülő elem háttere fog rajta megjelenni. Az ábrában az is látszik, hogy az egyes területeket melyik CSS tulajdonsággal tudjuk elérni.
KERETEK
Az összes lehetséges keretstílus.
Először mindig a keret stílusát kell megadni, csak így fog látszani a keret! Ha megadunk egy keretstílust, akkor már látszani fog a keret, és mind a négy oldalon ugyanaz lesz a stílus. A border-width tulajdonsággal megvastagítottam a kereteket, hogy jobban látszódjanak.
Különböző keretstílusok a négy oldalon.
Lehetőségünk van akár mind a négy oldalra (border-top-style, border-right-style, border-bottom-style, border-left-style) különböző kereteket megadni. A négy oldal értékét külön-külön is beállíthatjuk a felsorolt tulajdonságokkal, de egyszerre is a border-style tulajdonsággal. Ha a border-style tulajdonságnak csak egy értéket adunk meg, akkor az összes oldalra érvényes lesz; ha kettőt, akkor a felső és az alsó keret kapja az első stílust, míg a jobb és a bal oldal a második stílust; ha hármat, akkor a felső keret kapja az első stílust, a jobb és bal oldal a második stílust, míg az alsó keret a harmadikat; ha mind a négy stílust megadjuk, akkor a felső kerettől indulva az óramutató járásával megegyezően (top, right, bottom, left) kapják a keretek a stílusokat. Ugyanez vonatkozik a border-width (keretvastagság) és a border-color (keretszín) tulajdonságokra is.
Kerettulajdonságok rövidített megadása.
Ha a border tulajdonságot használjuk, akkor mind a négy oldali keret ugyanolyan lesz, és az értékeket ebben a sorrendben kell megadni: border-width, border-style, border-color, egymással szóközzel elválasztva.
Ha a border-top tulajdonságot használjuk, akkor a megadott három jellemző csak a felső keretre lesz érvényes, ha a border-right tulajdonságot, akkor a jobboldalira és így tovább. A border-hez kellő három jellemző közül vagy az első (border-width), vagy az utolsó (border-color) elhagyható, de a középső (border-style) nem! (Hiszen ez kell ahhoz, hogy megjelenjen a keret.)
Lekerekített keret megvalósításának egy lehetséges módja.
A CSS 2.1 egyik hiányossága, hogy nem tudunk vele lekerekített kereteket létrehozni. A CSS 3-ba már bekerült ez a lehetőség, de amíg nem támogatják a böngészők, addig képeket kell használnunk erre a célra. Ez a példa a még nem tárgyalt float tulajdonságot használja, ami egyszerűen balra, vagy jobbra úsztatja ki a sarokképeket. Ennek a lekerekített sarkú doboznak a szélessége százalékban is megadható. Ha másfajta megoldást keresünk erre a problémára, akkor írjuk be a Google keresőbe a rounded corners vagy css rounded corners kifejezéseket!
BELSŐ MARGÓ
Tulajdonság Leírás Lehetséges értékek
Belső margók megadása minden oldalra és külön-külön.
A padding tulajdonság használatakor ugyanúgy kell eljárnunk, mint a border esetében, azaz az első érték a padding-top értékét fogja állítani, és utána a többi érték szóközzel elválasztva az óramutató járásával megegyezően fogja beállítani a többi oldal belső margóját.
KÜLSŐ MARGÓ
Külső margók megadása minden oldalra és külön-külön.
A margin tulajdonság használatakor ugyanúgy kell eljárnunk, mint a border esetében, azaz az első érték a margin-top értékét fogja állítani, és utána a többi érték szóközzel elválasztva az óramutató járásával megegyezően fogja beállítani a többi oldal külső margóját.
Negatív margó megadása.
Ez a példa azt mutatja be, hogy a margó értéke lehet negatív is. Az első három h2 elemnek semmilyen margót, a második háromnak negatív margót, a harmadik háromnak pedig pozitív margót állítottunk be. Az negydik h2-nek bal oldali -40px margót állítottunk be. Ha 40px értéket tettünk volna be, akkor jobbra tolódott volna a cím, mivel ennek az ellenkezőjét állítottuk be, ezért most balra tolódott. Hasonlóan, az ötödik h2-re pedig alsó -40px margót állítottunk be, ezért lefelé tolódott. Ezek után bemutattuk, hogy milyen hatást érünk el ugyanekkora, de pozitív értékű margókkal ugyanarra a három címre.
A body elem margója.
Ez a példa azt szemlélteti, hogy a body elemnek alapértelmezettként bizony van valamekkora margója. Hiszen a weboldalon csak egy div általános tárolóelem van, aminek a biztonság kedvéért 0 margót és belső margót állítottunk be, mégis hézag van mellette.
A body elem margójának eltüntetése.
Ha nem akarunk margót a body-nak, akkor egyszerűen állítsuk be a margin: 0; tulajdonságot rá! Azonban még célszerű a padding-ot is 0-ra állítani, mert van olyan böngésző, amelyiknél csak így tűnik el a margó.
Ehhez a dobozhoz a W3C szabványának megfelelőn hozzárendelhetünk belső margót (padding), szegélyt (border), illetve margót (margin). Ezek a téglalap alakú területet elfoglaló tartalmat keretként veszik körül, a tartalomtól kifelé haladva, a felsorolt sorrendben.
Az alábbi ábra illusztrálja a dobozmodellt. A belső margón megjelenik a háttér, ha van. Utána a szegély következik valamilyen stílusban, majd végül a margó, ami átlátszó, ezért a szülő elem háttere fog rajta megjelenni. Az ábrában az is látszik, hogy az egyes területeket melyik CSS tulajdonsággal tudjuk elérni.
KERETEK
Az összes lehetséges keretstílus.
Először mindig a keret stílusát kell megadni, csak így fog látszani a keret! Ha megadunk egy keretstílust, akkor már látszani fog a keret, és mind a négy oldalon ugyanaz lesz a stílus. A border-width tulajdonsággal megvastagítottam a kereteket, hogy jobban látszódjanak.
Különböző keretstílusok a négy oldalon.
Lehetőségünk van akár mind a négy oldalra (border-top-style, border-right-style, border-bottom-style, border-left-style) különböző kereteket megadni. A négy oldal értékét külön-külön is beállíthatjuk a felsorolt tulajdonságokkal, de egyszerre is a border-style tulajdonsággal. Ha a border-style tulajdonságnak csak egy értéket adunk meg, akkor az összes oldalra érvényes lesz; ha kettőt, akkor a felső és az alsó keret kapja az első stílust, míg a jobb és a bal oldal a második stílust; ha hármat, akkor a felső keret kapja az első stílust, a jobb és bal oldal a második stílust, míg az alsó keret a harmadikat; ha mind a négy stílust megadjuk, akkor a felső kerettől indulva az óramutató járásával megegyezően (top, right, bottom, left) kapják a keretek a stílusokat. Ugyanez vonatkozik a border-width (keretvastagság) és a border-color (keretszín) tulajdonságokra is.
Kerettulajdonságok rövidített megadása.
Ha a border tulajdonságot használjuk, akkor mind a négy oldali keret ugyanolyan lesz, és az értékeket ebben a sorrendben kell megadni: border-width, border-style, border-color, egymással szóközzel elválasztva.
Ha a border-top tulajdonságot használjuk, akkor a megadott három jellemző csak a felső keretre lesz érvényes, ha a border-right tulajdonságot, akkor a jobboldalira és így tovább. A border-hez kellő három jellemző közül vagy az első (border-width), vagy az utolsó (border-color) elhagyható, de a középső (border-style) nem! (Hiszen ez kell ahhoz, hogy megjelenjen a keret.)
Lekerekített keret megvalósításának egy lehetséges módja.
A CSS 2.1 egyik hiányossága, hogy nem tudunk vele lekerekített kereteket létrehozni. A CSS 3-ba már bekerült ez a lehetőség, de amíg nem támogatják a böngészők, addig képeket kell használnunk erre a célra. Ez a példa a még nem tárgyalt float tulajdonságot használja, ami egyszerűen balra, vagy jobbra úsztatja ki a sarokképeket. Ennek a lekerekített sarkú doboznak a szélessége százalékban is megadható. Ha másfajta megoldást keresünk erre a problémára, akkor írjuk be a Google keresőbe a rounded corners vagy css rounded corners kifejezéseket!
BELSŐ MARGÓ
Tulajdonság Leírás Lehetséges értékek
Belső margók megadása minden oldalra és külön-külön.
A padding tulajdonság használatakor ugyanúgy kell eljárnunk, mint a border esetében, azaz az első érték a padding-top értékét fogja állítani, és utána a többi érték szóközzel elválasztva az óramutató járásával megegyezően fogja beállítani a többi oldal belső margóját.
KÜLSŐ MARGÓ
Külső margók megadása minden oldalra és külön-külön.
A margin tulajdonság használatakor ugyanúgy kell eljárnunk, mint a border esetében, azaz az első érték a margin-top értékét fogja állítani, és utána a többi érték szóközzel elválasztva az óramutató járásával megegyezően fogja beállítani a többi oldal külső margóját.
Negatív margó megadása.
Ez a példa azt mutatja be, hogy a margó értéke lehet negatív is. Az első három h2 elemnek semmilyen margót, a második háromnak negatív margót, a harmadik háromnak pedig pozitív margót állítottunk be. Az negydik h2-nek bal oldali -40px margót állítottunk be. Ha 40px értéket tettünk volna be, akkor jobbra tolódott volna a cím, mivel ennek az ellenkezőjét állítottuk be, ezért most balra tolódott. Hasonlóan, az ötödik h2-re pedig alsó -40px margót állítottunk be, ezért lefelé tolódott. Ezek után bemutattuk, hogy milyen hatást érünk el ugyanekkora, de pozitív értékű margókkal ugyanarra a három címre.
A body elem margója.
Ez a példa azt szemlélteti, hogy a body elemnek alapértelmezettként bizony van valamekkora margója. Hiszen a weboldalon csak egy div általános tárolóelem van, aminek a biztonság kedvéért 0 margót és belső margót állítottunk be, mégis hézag van mellette.
A body elem margójának eltüntetése.
Ha nem akarunk margót a body-nak, akkor egyszerűen állítsuk be a margin: 0; tulajdonságot rá! Azonban még célszerű a padding-ot is 0-ra állítani, mert van olyan böngésző, amelyiknél csak így tűnik el a margó.
Nincsenek megjegyzések:
Megjegyzés küldése