< WebKészítés /> interaktív webszerkesztő tananyagok

Dobozmodell

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 még látszik 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.

KódTesztelő a gyakorláshoz

Szegélyek, külső és belső margók

Először mindig a szegély stílusát kell megadni, ha szeretnénk, hogy látszódjon.

A szegély stílusát a következő tulajdonsággal állíthatjuk be: border-style: és ennek oldal specifikus változataival: border-top-style:, border-right-style:, border-bottom-style:, border-left-style:. Ezek a következő értékeket kaphatják: none (nincs), hidden (rejtett), dotted (pontozott), dashed (szaggatott), solid (árnyékmentes), double (árnyékolt), groove (homorú), ridge (domború), inset (benyomott) és outset (térbeli).

A szegély vastagságát pedig a következő szabályozza: border-width:. Ennek szintén léteznek oldalakra lebontott változatai, mint: border-top-width:, border-right-width:, border-bottom-width:, border-left-width:. Értékként a következőket kaphatják: thin (vékony), medium (közepes), thick (vastag), SZÁM (kézzel megadott érték).

A színt is szabályozhatjuk természetesen a lassan már megszokott módon: border-color: és társaival. (border-top-color:, border-right-color:, border-bottom-color:, border-left-color:). Itt az értékek lehetnek a HTML-nél már tanult hexadecimális (#rrggbb) formában, névvel (pl: black), illetve a keverési aránnyal (rgb(r,g,b)) kifejezve.

A négy oldal értékeit külön-külön is beállíthatjuk, de sokkal inkább javasolt a kompaktabb (border-style:, border-width:, border-color:) forma. Ha ezeknek a tulajdonságnak csak egy értéket adunk meg, akkor az összes oldalra érvényes lesz. Ha kettőt, akkor a felső és az alsó szegély kapja az első értéket, míg a jobb és a bal oldal a második értéket. Ha hármat, akkor a felső szegély kapja az első értéket, a jobb és bal oldal a második értéket, míg az alsó szegély a harmadikat. Ha mind a négy értéket megadjuk, akkor a felső szegélytől indulva az óramutató járásával megegyezően (top, right, bottom, left) kapják a szegélyek az értékeket. Pl: border-width: 1px 5px 2px 5px;

Aki pedig mégjobban szereti összevonni a dolgokat, neki a legegyszerűbb forma, a border: fog tetszeni. Jó szokás szerint neki is vannak kísérői: border-top:, border-right:, border-bottom:, és border-left: személyében. A megadási formátum pedig a következő: vastagság stílus szín;

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.

Belső margó képezhető a padding:, padding-top:, padding-right:, padding-bottom:, padding-left tulajdonságokkal. Értékként hossz mértékegységet kell írnunk. (Hossz mértékegységeket a Méretezés, pozicionálás részben tárgyaljuk bővebben.) Az összevont padding:-nél szintén szóközzel elválasztva méretezhetjük az oldalakat.

Külső margó megadására a margin:, margin-top:, margin-right:, margin-bottom:, margin-left szolgálnak. Az érték itt is hosszmérték. Nem gondolnánk, de a margó értéke lehet negatív is! Ekkor a várt eltolással ellentétes irányba tolhatjuk objektumunkat. Érdekesség még, hogy a body elemnek is alapértelmezésként van valamekkora margója. Próbáljunk csak egy div elemet elhelyezni, benne szöveggel. Ha el szeretnénk tűntetni a távolságot, akkor a body { margin: 0; padding: 0; }-t előre be kell állítanunk.

Létezik még egy ritkán használt tulajdonság, a körvonal. Ennek gyűjtője és altulajdonságai a következők: outline: outline-color outline-style outline-width. Annyiban különbözik a normál szegélytől, hogy ennek szélessége nem foglal helyet! Űrlapoknál használjuk, ha pl. pirossal jeleznénk, hogy az hibásan van kitöltve.

Ugrás az oldal tetejére!

Ugrás a következő oldalra!

0 hozzászólás