Méretezés

Az alábbi tulajdonságok az elemek méretét állítják be.

Tulajdonság	Leírás	Lehetséges értékek
`width`	Egy elem szélességét adja meg.	`auto` % `px, em`
`height`	Egy elem magasságát adja meg.	`auto` % `px, em`
`max-width`	Egy elem maximális szélességét adja meg.	`none` % `px, em`
`min-width`	Egy elem minimális szélességét adja meg.	% `px, em`
`max-height`	Egy elem maximális magasságát adja meg.	`none` % `px, em`
`min-height`	Egy elem minimális magasságát adja meg.	% `px, em`
`Div` elemek szélességének és magasságának beállítása. A minimális méretek bemutatása.

Pozícionálás

CSS-ben az elemek helyzetét a position tulajdonsággal tudjuk megadni. Alapértelmezett értéke a static, amikor az elemek a normál helyzetükben jelennek meg.

Tulajdonság	Leírás	Lehetséges értékek
`position`	Egy elem helyzetét adja meg.	`static relative absolute fixed`
Elemek megjelenése alapértelmezett helyzetben. A böngésző alapesetben elindul a HTML forráskódban felülről lefelé, és a talált sorrendben jeleníti meg az elemeket. Ez a példa megmutatja, hogyan jelenít meg a böngésző 4 `div` elemet alapértelmezett pozícionálással. Különböző színű háttereket adtam az elemeknek, hogy a határaik láthatóak legyenek. Ezt a megjelenést a `position` tulajdonság `static` értékével is el lehet érni, mert neki ez az alapértelmezett értéke. Elem pozícionálása a normális helyzetéhet képest. Először be kell állítani a `position` tulajdonság értékét `relative`-ra. Ezután a `top` (fent), `right` (jobb), `bottom` (lent), `left` (bal) tulajdonságokkal lehet megadni, hogy az elem mennyivel legyen eltolva a normális helyzetéhez képest. Elem abszolút helyzetmegadása. Abszolút helyzetmegadáskor a `position` értéke `absolute` legyen, és ezután is a fenti négy tulajdonsággal tudunk pozícionálni. Az abszolút pozícionálású elemek a (dokumentumfában) legközelebb eső olyan szülő elemhez képest lesznek pozícionálva, amelyikre szintén meg van adva a `position` tulajdonság MÁS értékkel, mint a `static`. A felső példában nincs ilyen elem, ezért a `body` elemhez képest lesznek elhelyezve a `div` elemek, a `body` elem bal felső sarka a (0;0) pont. Elem abszolút helyzetmegadása a szülő elemhez képest. Az oldal közepén van egy `div` elemünk, amiben szintén van egy másik `div` elem. Ha ezt a belső `div` elemet akarjuk a középső `div`-hez képest abszolút módon pozícionálni, akkor a külső `div`-nek egyszerűen adjuk meg a `position: relative` meghatározást! Elem abszolút helyzetmegadása a szülő elemhez képest 2. Ugyanaz mint előbb, csak kihagytuk a `position: relative` meghatározást, így a `body` elemhez képest lett elhelyezve a belső `div`. Elem fix helyzetmegadása. Ha az `absolute` tulajdonság értékét `fix`-re állítjuk, akkor az elem mindig a helyén marad, nem lesz a többi elemmel együtt elgörgetve a gördítősáv használatakor. Ekkor is lehet pozícionálni a `top`, `right`, `bottom`, `left` tulajdonságokkal. Az IE 6 és régebbi verziói nem ismerik fel ezt a tulajdonságot. Viszont emlékezzünk arra, hogy háttérképet is tudunk fixen megadni, tehát ha csak képet akarunk így rögzíteni, inkább a `background` tulajdonságot használjuk. A `position: fixed` akkor lehet hasznos, ha pl. egy menüt kívánunk úgy megjeleníteni, hogy az mindig látható legyen.
`vertical-align`	Egy elem függőleges igazítását állítja be. Csak sorbeli elemekre, vagy táblázatcellákra érvényes!	`baseline sub super top text-top middle bottom text-bottom length %`
Kép függőleges igazítása. A `vertical-align` tulajdonsággal tudunk például képet a szöveghez igazítani. Táblázatcellák szövegének igazítása. A `top`, `middle`, `bottom` értékek használhatók táblázatok szövegének vízszintes igazításához.

Blokk-szintű elemek és sorbeli elemek, elemek megjelenítése

Léteznek úgynevezett blokk-szintű elemek, és sorbeli elemek. A blokk-szintű elemek egy teljes sort kitöltenek, és nem lehet mellettük alapesetben másik elem, az elem elé és mögé egy sortörés kerül. A sorbeli elemek mellett viszont lehet, de csak egy másik sorbeli elem. A sorbeli elemek mindaddig egy sorban jelennek meg egymás mellett, amíg az adott sorban van hely. Ha már nincs hely az adott sorban, akkor új sorban kezdi el kirakni a böngésző az ilyen elemeket.

A display tulajdonsággal többek között a blokk-szintű és a sorbeli megjelenést is szabályozni tudjuk. Ezenkívül még számos más megjelenést tudnánk vele elérni, csak ezeket az Internet Explorer semelyik verziója nem támogatja, ezért sajnos nem is ajánlott a használatuk.

Tulajdonság	Leírás	Lehetséges értékek
`display`	Egy elem megjelenítési módját adja meg.	`inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption none`
Listaelemek egy sorban történő megjelenítése. Ez a példa a `display` tulajdonság `inline` értékét mutatja be. Ha a `li` címkére alkalmazzuk, akkor a listaelemek sorbeli elemként fognak megjelenni, és a kis fekete karika és eltűnik előlük. Űrlapmezők blokk-szintű megjelenítése. Ezzel a módszerrel nagyon egyszerűen ki lehet alakítani az űrlap elrendezését. Táblázat kialakítása `div` elemekkel és stíluslappal. Ez a példa a `display` tulajdonság `table`, `table-row` és `table-cell` értékeinek működését szemlélteti. Nem ajánlott használni, mert az Internet Explorer 7- nem ismeri fel.
`visibility`	Megadja, hogy egy elem látszódjon-e vagy sem.	`visible hidden collapse`
A `visibility: hidden` és a `display: none` közötti különbség. A `visibility: hidden` meghatározás esetén megmarad az elem által elfoglalt hely, csak nem lesz látható az elem. A `display: none` meghatározás esetén viszont az elem kirajzolási helye is eltűnik, egyáltalán nem fog teret elfoglalni.
`cursor`	Beállítja az elem feletti egérmutató alakját.	`auto url crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait progress help`
Kurzor beállítása. Kurzort egyrészt megadhatunk az előre definiált nevek segítségével. Ennél azonban izgalmasabb, hogy saját kurzort is készíthetünk, ekkor a kurzor URL-jét kell megadnunk. Ebben az esetben több URL-t is felsorolhatunk, de a lista végén mindig álljon ott egy előre definiált kurzornév (a példánkban ez az `auto`). A böngésző végigmegy ezen a listán, és az általa megjeleníteni képes kurzort fogja mutatni. Az ani kiterjesztést csak az Explorer, míg a cur kiterjesztést a Firefox is kezeli. A Firefox nem kezeli az animált kurzorokat, csak az Explorer.

Gördítősáv hozzáadása egy elemhez

Tulajdonság Leírás Lehetséges értékek

overflow Gördítősáv megjelenését állíthatjuk be vele egy olyan elemre, amiben nem fér ki a tartalom. visible hidden scroll auto

Tulajdonság	Leírás	Lehetséges értékek
`overflow`	Gördítősáv megjelenését állíthatjuk be vele egy olyan elemre, amiben nem fér ki a tartalom.	`visible hidden scroll auto`
Az `overflow: visible` meghatározás. Ez az alapértelmezett viselkedés. Ha a tartalom nem fér ki a tárolóelemben, akkor ki fog lógni. Az `overflow: hidden` meghatározás. A tartalom nem fog kilógni a tárolóelemből, de nem is fog gördítősáv megjelenni, ezért a kilógó szöveget nem tudjuk elolvasni! Az `overflow: scroll` meghatározás. A tartalom nem fog kilógni, és gördítősávok jelennek meg a tartalom eléréséhez. Az `overflow: auto` meghatározás. Az előzőhöz képest az a különbség, hogy most csak akkor fog gördítősáv megjelenni, ha szükséges. A `scroll` tulajdonság használatakor viszont minden esetben megjelenik a gördítősáv. Próbáljuk ki úgy, hogy növeljük és csökkentsük a betűméretet!

Az overflow: visible meghatározás.
Ez az alapértelmezett viselkedés. Ha a tartalom nem fér ki a tárolóelemben, akkor ki fog lógni.

Az overflow: hidden meghatározás.
A tartalom nem fog kilógni a tárolóelemből, de nem is fog gördítősáv megjelenni, ezért a kilógó szöveget nem tudjuk elolvasni!

Az overflow: scroll meghatározás.
A tartalom nem fog kilógni, és gördítősávok jelennek meg a tartalom eléréséhez.

Az overflow: auto meghatározás.
Az előzőhöz képest az a különbség, hogy most csak akkor fog gördítősáv megjelenni, ha szükséges. A scroll tulajdonság használatakor viszont minden esetben megjelenik a gördítősáv. Próbáljuk ki úgy, hogy növeljük és csökkentsük a betűméretet!

A `float` és a `clear` tulajdonság

Ezt a két tulajdonságot gyakran kell használni, azonban elsőre nem mindig egyértelmű a működésük.

Tulajdonság Leírás Lehetséges értékek

float Egy elemet úsztat jobbra vagy balra. none left right

clear Megakadályozza, hogy egy elem bal, jobb, vagy mindkét oldalon legyen egy olyan elem, amire be van állítva a float tulajdonság. none left right both

Tulajdonság	Leírás	Lehetséges értékek
`float`	Egy elemet úsztat jobbra vagy balra.	`none left right`
`clear`	Megakadályozza, hogy egy elem bal, jobb, vagy mindkét oldalon legyen egy olyan elem, amire be van állítva a `float` tulajdonság.	`none left right both`
Kép szöveggel való körbefuttatása. Ebben az egyszerű példában a képek jobbra vagy balra fognak kiúszni attól függően, hogy milyen értéket adtunk a `float` tulajdonságnak. Arra figyeljünk, hogy csak olyan elemre vonatkoztathatjuk a `float` tulajdonságot, aminek be van állítva a szélessége. Ez esetben például a képeknek meg van adva a szélességük. Kép és felirat úsztatása jobbra és balra. Ez hasonló az előző példához, csak itt a `div` elemre alkalmaztuk a `float` tulajdonságot. Egyszerre több kép és felirat úsztatása jobbra. Ez a példa a `clear` tulajdonság használatát mutatja be. Próbáljuk ki, hogy milyen lenne a kinézet a `clear` használata nélkül. Mivel egyidejűleg a `float: right` és a `clear: right` tulajdonság is be van állítva minden képre, ezért fognak egy oszlopban megjelenni. A `clear` nélkül egy sorban jelennének meg. A `clear: right` letiltja, hogy a képtől jobbra megjelenljen egy másik úsztatott kép. Három oszlopos, fejléccel és lábléccel ellátott elrendezés kialakítása `div` elemekkel és a `float`, `clear` tulajdonságokkal. A `float` és a `clear` tulajdonságok kiválóan alkalmasak weboldalak tartalmának elrendezéséhez. Ezzel a témával a következő fejezetben foglalkozunk részletesebben. Hat kép úsztatása balra, három kép után sortöréssel. A trükk abban van, hogy a `div` elemre alkalmaztuk a `clear: both` meghatározást. Ha csak sortörést alkalmazunk, akkor a második három kép nem jelenne meg új sorban!

Kép szöveggel való körbefuttatása.
Ebben az egyszerű példában a képek jobbra vagy balra fognak kiúszni attól függően, hogy milyen értéket adtunk a float tulajdonságnak. Arra figyeljünk, hogy csak olyan elemre vonatkoztathatjuk a float tulajdonságot, aminek be van állítva a szélessége. Ez esetben például a képeknek meg van adva a szélességük.

Kép és felirat úsztatása jobbra és balra.
Ez hasonló az előző példához, csak itt a div elemre alkalmaztuk a float tulajdonságot.

Egyszerre több kép és felirat úsztatása jobbra.
Ez a példa a clear tulajdonság használatát mutatja be. Próbáljuk ki, hogy milyen lenne a kinézet a clear használata nélkül. Mivel egyidejűleg a float: right és a clear: right tulajdonság is be van állítva minden képre, ezért fognak egy oszlopban megjelenni. A clear nélkül egy sorban jelennének meg. A clear: right letiltja, hogy a képtől jobbra megjelenljen egy másik úsztatott kép.

Három oszlopos, fejléccel és lábléccel ellátott elrendezés kialakítása div elemekkel és a float, clear tulajdonságokkal.
A float és a clear tulajdonságok kiválóan alkalmasak weboldalak tartalmának elrendezéséhez. Ezzel a témával a következő fejezetben foglalkozunk részletesebben.

Hat kép úsztatása balra, három kép után sortöréssel.
A trükk abban van, hogy a div elemre alkalmaztuk a clear: both meghatározást. Ha csak sortörést alkalmazunk, akkor a második három kép nem jelenne meg új sorban!

Ajánlott linkek

A CSS 2.1 specifikáció idevágó részei: http://www.w3.org/TR/CSS21/visuren.html és http://www.w3.org/TR/CSS21/visudet.html és http://www.w3.org/TR/CSS21/visufx.html