CSS

Az új formázási lehetőségek sokmindent lehetővé tettek, de a nyelv ezzel elvesztette az egyszerűségét, a dokumentumok a megjelenés miatt egyre bonyolultabbá és összetettebbé váltak a weboldal készítés során.A weboldalak forrásának akár több, mint a fele lehet, hogy már nem is a tartalomról, hanem a megjelenésről szólt, jelentősen megnövelve ezzel a dokumentumok méretét és komplexitását. Ezt tetőzte, hogy a szabvány kiforratlanságából, illetve a böngészőgyártók érdekkülönbségeiből adódóan a webhely tervezők kénytelek voltak a különböző böngészők sajátosságaival is szembesülni, és ezeket megkerülendő, mindenféle trükköket alkalmazni, ha szép, az elképzeléseik szerinti oldalakat szerettek volna készíteni. Nos, ezen segített megjelenésével a CSS szabvány, melyet a böngészők az utóbbi években egyre egységesebben értelmeznek, s sokkal szabadabban, rugalmasabban tudjuk vele befolyásolni HTML webolda megjelenését, mint azt korábban bármikor is tehettük (és a HTML nyelv szabványa is sokkal kiforrottabb lett, megjelent például az XHTML, továbbá sok új irányelv, ami azt írja le, hogy a dokumentumnak nem a megjelenésről, hanem a tartalomról kell szólnia, stb.). Persze a helyzet még mindig nem ideális, s egy jó ideig nem is lesz az, köszönhetően a domináns böngésző technológiai elmaradottságának, de így is egy nagyon jól használható eszközt tudhat magáénak az a fejlesztő, aki megismeri a CSS nyújtotta lehetőségeket.

A technológia már viszonylag elég régóta létezik, a CSS szabvány leírása 1996. december 17-n látott napvilágot a W3C honlapján (nem ide tartozik, de jó tudni, hogy időközben hazánkban is képviseli magát a konzorcium egy irodával, és saját weblapjuk is van). A szabvány azóta több kiadást ért meg, illetve 1998. május 12-n napvilágot látott a CSS 2 szabvány leírása is (a CSS 2.1 és CSS 3 kidolgozása pedig folyamatban van, a tervek elérhetőek a W3C honlapján - pár újabb böngésző meg is valósít bizonyos dolgokat ezek közül). Fontos megemlíteni, hogy a szélesebb körben használt böngészők viszonylag nagy részét támogatják a CSS szabványnak, de azért ellenőrizni sohasem árt, hogy nem értenek-e félre valamit (mert könnyen előfordul). Azt is figyelembe általában a szabványok egy alkészletét valósítják meg, előfordulhat, hogy a CSS 2-ből már ismert sokmindent egy böngésző, viszont van olyan CSS 1 szabványbeli elem, melyet még mindig nem valósít meg.

A honlapkészítés -ben Miért CSS ?

Egy alapvető példán keresztül nézzük meg, miért lesz egyszerűbb az életünk a CSS használatával. Vegyünk egy általános oldalt, ahol több címsor és bekezdés található. Szeretnénk, ha a címsoraink betűi nagyok és sötétvörösek lennének, míg a bekezdéseink betűi kisebbek és sötétzöldek. Ezt HTML formázással a következőképpen tudjuk megvalósítani:

<html>
<head>
<title>CSS példa</title>
</head>
<body>
<h1><font size="4" color="#a00000">Bevezetés</font></h1>
<p><font size="2" color="#00a000">A vers...</font></p>
<h1><font size="4" color="#a00000">Tárgyalás</font></h1>
<p><font size="2" color="#00a000">A költő...</font></p>
<h1><font size="4" color="#a00000">Összefoglalás</font></h1>
<p><font size="2" color="#00a000">Végezetül...</font></p>
</body>
</html>

Mint láthatjuk, minden egyes címsor (h1) és bekezdés (p) esetén meg kellett határoznunk a megjelenést (font), ráadásul ezáltal sokkal kevésbé lett áttekinthető a HTML forrásunk. További probléma, hogy a betűk méretének meghatározására nincs más lehetőségünk (a szabvány szerint), csak az előre definiált (1-től 7-ig meghatározott) méretek közül kiválasztani a nekünk megfelelőt. Amennyiben egy bonyolultabb oldalról van szó, még áttekinthetetlenebbé válhat a forrás, bonyolultabbá téve az utólagos szerkesztést. Nem lehetne ezt a formázást egyszerűbben elérni a weboldalkészítés során? Nézzük, hogyan alakul ugyanez stíluslapok használatával:

<html>
<head>
<title>CSS példa</title>
<style type="text/css"><!--
h1 { font-size: 20px; color: #a00000; }
p { font-size: 12px; color: #00a000; }
--></style>
</head>
<body>
<h1>Bevezetés</h1>
<p>A vers...</p>
<h1>Tárgyalás</h1>
<p>A költő...</p>
<h1>Összefoglalás</h1>
<p>Végezetül</p>
</body>
</html>

A trükk a fejlécben látható style elemeken belül van. Meghatározzuk, hogy a HTML állományban levő összes címsor (h1) elem és bekezdés (p) elem a fentiekben meghatározott kívánságainknak megfelelően jelenjen meg. Csak egyszer kellett ezt megtenni, továbbá a kódunk is sokkal átláthatóbb lett. A pontos méretet is meghatározhattuk, ezúttal pixelben megadva azt, de további mértékegységek is rendelkezésünkre állnak. Amennyiben valamiért utólag módosítanunk kell a megjelenést, egyből csak egy helyen kell ezt megtennünk, s mindenhol meg is változik. Az egyszerűbb szerkeszthetőségen és karbantarthatóságon kívül az így elkészített dokumentum sokkal kisebb méretű is lesz, gyorsabban letöltődik, kisebb adatforgalmat generál. Ha egy külső állományban helyezzük el a stílusdefiníciókat, akkor több dokumentum megjelenését is befolyásolni tudjuk egyszerre, továbbá ha a böngésző gyorsítótárazza a meghatározásokat, az adatforgalom tovább csökken. További előny, hogy az újabb böngészők egyre inkább támogatják a szabványokat, s ha mi is tartjuk hozzá magunkat, akkor egyre kisebb munkával egyre több látogató fogja pontosan ugyanúgy látni a weboldal -unk(az eddigi "minden böngészőn megnézem, hogy jó-e" stílusú munkával szemben). Persze mint a korábbiakban is ki lett hangsúlyozva, csodát egyelőre a CSS-től se várjunk, de mindenképpen számíthatunk rá, hogy ez fogja meghatározni a jövő honlapjainak megjelenését.

honlapkészítés során CSS hozzákapcsolása a HTML-hez

A fentiekben egy példát láttunk, hogyan kapcsolhatjuk a CSS-t a HTML állományunkhoz, hogyan határozhatjuk meg ennek a megjelenését. Lássuk a lehetőségek listáját (melyeket szabadon, akár keverve is használni tudunk):

Beágyazott stíluslap

Ezt láthattuk a fenti példában. A stílusleírást a HTML weboldal fejlécében kell elhelyezni, style elembe ágyazva. A fenti példában HTML megjegyzésbe is tettük (), ezzel azt érjük el, hogy az olyan böngészők, amik nem ismerik a stíluslapokat, ne jelenítsék meg a stílus definíciónkat. Az így meghatározott stílus az egész dokumentumra érvényes lesz.

Külső stíluslap

A stíluslapunkat elhelyezhetjük egy külső állományban is, így lehetővé téve, hogy az több HTML állományra is érvényes legyen, s központilag szerkeszthetővé váljon (ne kelljen minden egyes HTML állományt megváltoztatnunk, ha a honlapunk ezentúl másképp jelenne meg). A külső stíluslapokra az oldal fejlécében tudunk hivatkozni, egy link elem segítségével:

<head>
<link rel="stylesheet" href="kulso.css" type="text/css">
</head>

A stíluslapot tartalmazó állományban (a példában kulso.css a neve) csak a stíluslapjaink definícióját kell elhelyeznünk, pl:

h1 { font-size: 20px; color: #a00000; }
p { font-size: 12px; color: #00a000; }

A beágyazott stíluslapokhoz hasonlóan az így meghatározott stílus az egész dokumentumra érvényes.

Elemhez rendelt stíluslap

Bár kevés alkalommal van rá szükség, de akkor jól jön, hogy az egyes HTML elemekhez helyben is tudunk stílust meghatározni. Ez nagyon hasonlít ahhoz, mintha font elemekkel határoznánk meg az adott elem megjelenését, bár nagyságrendekkel több formázási lehetőségünk van. Egy elem stílusának a meghatározásához egy style attribútumot kell hozzá felvennünk:

<h1 style="font-size: 20px; color: #a00000;">Bevezetés</h1>

Mint láthattuk, itt csak magát a megjelenést kellett leírnunk, nem kellett meghatározni, hogy mire vonatkozik: az így definiált stílus csak az adott elemre, illetve az adott elemen belül lesz érvényes.

Importált stíluslap

További lehetőségünk, hogy egy stílus meghatározáson belül egy másik, külső stílus meghatározásra hivatkozzunk (erre értelem szerint a beágyazott és a külső stíluslap meghatározásoknál van módunk). Ez a következőképpen történhet:

<style type="text/css"><!--
@import url(http://www.honlapunk.hu/stilusok/masik.css);
--></style>

A cím megadásakor hasonlóképpen járhatunk el, mint a linkeknél általában, azaz akár url(masik.css) formában is írhatjuk, amennyiben ugyanabban a könyvtárban található mint a HTML állományunk. A külső stílus hivatkozásnak meg kell előznie minden más definíciót, amennyiben már szerepel előtte más, figyelmen kívül lesz hagyva!

Stílusok formátuma

Egy önálló stílus definíciós állomány, vagy egy beágyazott stílus több meghatározást tartalmazhat. Egy-egy meghatározás két részből áll, egy kiválasztó és egy tulajdonság részből. A kiválasztó rész azt határozza meg, hogy mely HTML elemekre vonatkozzon a definíció, míg a tulajdonság rész a megjelenést befolyásolja. Amikor elemhez rendelünk stílust, akkor csak a tulajdonság részt kell meghatároznunk. A következőképpen épül fel tehát egy stílusdefiníció:

kiválasztó { tulajdonság }
kiválasztó { tulajdonság }
kiválasztó { tulajdonság }

Az egyes definícióknak, de még a kiválasztónak és a tulajdonságnak sem szükséges új sorban lenniük, gyakorlatilag szabadon ránk van bízva, hogy a fenti tartalmat milyen elrendezésben valósítjuk meg. A következő formátumok mind helyesek:

kiválasztó { tulajdonság } kiválasztó { tulajdonság }
kiválasztó
{
tulajdonság
}

Az előző példákban láthattuk, hogy egy-egy kiválasztóhoz több tulajdonságot is megadhatunk, ekkor a tulajdonságokat pontosvesszővel elválasztva kell felsorolnunk. Több kiválasztót is meghatározhatunk, a kiválasztókat vesszővel kell elválasztani:

kiválasztó, kiválasztó { tulajdonság; tulajdonság; }

Kiválasztók

A kiválasztók nagyon rugalmasan használhatóak, mint azt a továbbiakban látni fogjuk egyszerű és mégis összetett módon tudjuk meghatározni, hogy mely elemekre vonatkozzanak a tulajdonságaink. Ebben a cikkben még nem mutatjuk be az összes lehetőséget, de megpróbáljuk bemutatni, hogy milyen széleskörűen tudjuk szabályozni a kiválasztást.

Elem kiválasztás

A legegyszerűbb kiválasztási lehetőséget nyújtja a számunkra, egy HTML elemet határozhatunk meg vele, amihez hozzá szeretnénk rendelni a különböző tulajdonságokat. Az eddigiekben ilyenre láthattunk példát:

h1, h2, h3 { color: #a00f00; }

Itt az első három szintű címsornak határoztuk meg a színbeli megjelenését.

Osztály alapú kiválasztás

A HTML elemeket lehetőségünk van osztályokba sorolni. Ekkor az adott osztályba sorolni kívánt elemhez egy class tulajdonságot rendelünk hozzá, amelynek az értéke az osztálynevünk lesz. A stíluslapban ehhez az osztályhoz határozhatunk meg megjelenést. Ha szeretnénk kiemelni egyes fejezeteket a szövegünkből, pirossal megjelenítve azokat, akkor a következőképpen járhatunk el:

<html>
<head>
<title>CSS példa</title>
<style type="text/css"><!--
h1 { font-size: 20px; color: #a00000; }
p { font-size: 12px; color: #00a000; }
.fontos { color: #ff0000; }
--></style>
</head>
<body>
<h1>A cserebogarak halhatatlanságáról</h1>
<p class="fontos">A cserebogárnak vannak lábai. Ebből...</p>
<p>Minden cserebogárnak van lába...</p>
<p class="fontos">A cserebogárnak vannak szárnyai is...</p>
<p>A szárnyaival repülni tud...</p>
<p>A halhatatlanság azt jelenti, hogy...</p>
<h1 class="fontos">FONTOS!</h1>
<p class="fontos">A cserebogarak halhatatlansága tehát...</p>
</body>
</html>

A példában három fejezetet és egy címsort soroltunk a fontos osztályba, a stíluslapban pedig a kiválasztónk ponttal kezdődött, ami azt jelezte, hogy ennek az osztálynak határozzuk meg a megjelenését. A példából még valami kiderül: az egyes stílusdefiníciók felül tudják bírálni egymást, illetve egy osztály bármelyik elemhez tartozhat. A fontos osztálynak mást színt adtunk meg, mint a bekezdéseknek, illetve a címsornak (itt ez a szín fog érvényesülni), míg a betűméretet tekintve a bekezdésben, illetve a címsorban meghatározott méretet öröklik a fontosnak besorolt bekezdések is.

Az egyes kiválasztókat keverhetjük is, például a következő példában a fontos címsoroknak definiálunk egy háttérszínt is:

<html>
<head>
<title>CSS példa</title>
<style type="text/css"><!--
h1 { font-size: 20px; color: #a00000; }
p { font-size: 12px; color: #00a000; }
.fontos { color: #ff0000; }
h1.fontos { background: #ffcccc; }
--></style>
</head>
<body>
<h1>A cserebogarak halhatatlanságáról</h1>
<p class="fontos">A cserebogárnak vannak lábai. Ebből...</p>
<p>Minden cserebogárnak van lába...</p>
<p class="fontos">A cserebogárnak vannak szárnyai is...</p>
<p>A szárnyaival repülni tud...</p>
<p>A halhatatlanság azt jelenti, hogy...</p>
<h1 class="fontos">FONTOS!</h1>
<p class="fontos">A cserebogarak halhatatlansága tehát...</p>
</body>
</html>

Azonosító alapú kiválasztás

Az azonosító alapú kiválasztás nagyon hasonló az osztály alapúhoz, egy lényeges különbség van: csak és kizárólag egy elemet tudunk egy bizonyos azonosítóval megjelölni egy HTML dokumentumon belül.

<html>
<head>
<title>CSS példa</title>
<style type="text/css"><!--
h1 { font-size: 20px; color: #a00000; }
p { font-size: 12px; color: #00a000; }
#halhatatlan { color: #ff0000; }
--></style>
</head>
<body>
<h1>A cserebogarak halhatatlanságáról</h1>
<p>A cserebogárnak vannak lábai. Ebből...</p>
<p>Minden cserebogárnak van lába...</p>
<p>A cserebogárnak vannak szárnyai is...</p>
<p>A szárnyaival repülni tud...</p>
<p>A halhatatlanság azt jelenti, hogy...</p>
<p id="halhatatlan">A cserebogarak halhatatlansága tehát...</p>
</body>
</html>

A stíluslapban a kettőskeresztet használtuk az azonosításhoz, a HTML forrásban pedig az id tulajdonságot. A kiválasztókat itt is keverhetjük (bár mivel egy azonosító csak egy konkrét elemre vonatkozhat, ezért nincs rá szükség), a p#halhatatlan egy szabályos kiválasztó.

Helyzetérzékeny kiválasztás

A stíluslapban lehetőségünk van a HTML fában betöltött helye alapján meghatározni egy elemről, hogy hogyan nézzen ki. Kevésbé bonyolultan megfogalmazva: a helyzetérzékeny kiválasztásnál a fában egy adott elem alatt levő elemhez rendelhetünk stílust, például megmondhatjuk, hogy a táblázatokon belül levő félkövér betűk sötétkékek legyenek, miközben a normál bekezdésekben levőknek nem fog megváltozni a színe.

<html>
<head>
<title>CSS példa</title>
<style type="text/css"><!--
table b { color: #0000a0; }
--></style>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">A <b>cserebogarak</b> halhatatlanságáról</th>
</tr>
<tr>
<td>A <b>cserebogárnak</b> vannak lábai. Ebből...</td>
<td>Minden <b>cserebogárnak</b> van lába...</td>
</tr>
</table>
<p>Minden <b>cserebogár</b> bogár...</p>
</body>
</html>

Mint a stílusdefinícióban láthatjuk, ilyenkor először azt az elemet kell leírnunk, amin belül (table), majd egy szóközt követően azt, amire (b) szeretnénk megadni a stílust. Több szintet is felölelhet a kiválasztónk, pl. használhatunk table tr b formát is, illetve keverhetjük a korábbiakban megismert kiválasztokat kedvünkre: table.fontos tr#egyedi b.

Szülő-gyermek kiválasztás

A szülő-gyermek kiválasztás abban különbözik a helyzetérzékeny kiválasztástól, hogy az elemeknek a fában betöltött helye szerinti közvetlen szülő-gyermek kapcsolata esetén tudjuk megadni a stílusmeghatározását. Az előző példánál maradva itt külön meg kell mondanunk azt, hogy a td és a th elemeken belüli b elemek esetén szeretnénk a színt megadni:

<html>
<head>
<title>CSS példa</title>
<style type="text/css"><!--
th>b, td>b { color: #0000a0; }
--></style>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">A <b>cserebogarak</b> halhatatlanságáról</th>
</tr>
<tr>
<td>A <b>cserebogárnak</b> vannak lábai. Ebből...</td>
<td>Minden <b>cserebogárnak</b> van lába...</td>
</tr>
</table>
<p>Minden <b>cserebogár</b> bogár...</p>
</body>
</html>

Az egyes elemeket itt most nem szóközzel, hanem nagyobb jellel választottuk el. Itt is lehet több szinten keresztüli kiválasztást leírni, például tr>th>b, amennyiben ez számunkra a megfelelőbb, illetve keverni a korábban megismert lehetőségeket. A szülő-gyermek kiválasztást a CSS szabvány újabb, második verziója, ezáltal az újabb böngészők támogatják csak!

Tulajdonság alapú kiválasztás

Előfordulhat, hogy egy adott paraméterének megléte, vagy annak az értéke szerint szeretnénk egy HTML elemhez kiválasztást rendelni, például szeretnénk csak a jelszó beviteli mezőkben a csillagok színét megváltoztatni:

<html>
<head>
<title>CSS példa</title>
<style type="text/css"><!--
input[type="password"] { color: #0000a0; }
--></style>
</head>
<body>
<form>
Név: <input name="name">
Jelszó: <input type="password" name="pwd">
</form>
</body>
</html>

A fenti példában látható, hogy a HTML elem neve után szögletes zárójelben a paraméter neve, majd az értéke következik. Lehetőségünk van a paraméter meglétére, a paraméter értékére, illetve a paraméter értékében szereplő jelsorozatra keresni:

input[type] { ... }
input[type="password"] { ... }
input[type~="pass"] { ... }

A tulajdonság alapú kiválasztást a CSS szabvány újabb, második verziója, ezáltal az újabb böngészők támogatják csak!

Bekezdések megjelenése
Betűkészletek

Adott elemeken állítani tudjuk a betűkészletet, a stílust, módosítást, súlyozást méretet.

Betűtípus

body { font-family: Arial, Helvetica, sans-serif; }

A példában az egész dokumentumra beállítjuk, hogy milyen betűkészlet legyen az alapértelmezett. Érdemes több, hasonló betűkészletet is felsorolni, illetve a lista végére egy általános betűkészletet is elhelyezni az adott családból. Az általános betűkészletek a következők lehetnek: serif, sans-serif, cursive, fantasy, monospace.
Stílus
Egy font dőltségét befolyásolhatjuk, példánkban az egész dokumentumra adtuk meg, hogy dőltek legyenek a betűk. További lehetőségeink: normal, italic, oblique.

body { font-style: italic; }

Súlyosság
A példában félkövér betűkészletet állítunk be a HTML dokumentumra. Lehetőségeink: lighter, normal, bold, bolder, illetve 100-tól 900-ig a számok 100-asával (egyre vastagabb betűkészletet választva).

body { font-weight: bold; }

Méret
A HTML dokumentum alapértelmezett betűtípusának a méretét határoztuk meg a példában. A konkrét méretmegadásnál több lehetőségünk is van, lehetséges pixelben (mint a példában), pontban (pt-t kell írni), százalékban, szövegesen (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) megadni a méretet. A lehetséges mértékegységekre egy következő cikkben még részletesebben is ki fogunk térni.

body { font-size: 14px; }

Csoportos megadás
Lehetőségünk van a fentieket egy paraméterként is átadni:

body { font: italic bold 14px Arial, Helvetica, sans-serif; }

Szöveg paraméterek
A szöveg színét, sűrűségét, igazítását, aláhúzását, behúzását állíthatjuk, továbbá konvertálhatjuk a szöveget különböző formára (kisbetűs, nagybetűs, stb.). Pár példa:

h1 { color: black; }

A 1. szintű címsor színét feketére állítjuk. Lehetőségünk van #ffffff hexadecimális formában is megadni a színt (a mértékegységek mellett a lehetséges színmegadási módokat is be fogjuk mutatni még).

h1 { letter-spacing: 10px; }

A címsor betűi közötti távolságot növeltük meg 10 képponttal. Lehetőségünk van növelni és csökkenteni a távolságot.

h1 { text-align: center; }

A címsor igazítását adjuk meg, lehetőségünk van balra, középre és jobbra igazítani, valamint sorkizártra beállítani a stílust (left, center, right és justify rendre a megfelelő értékek).

a { text-decoration: none; }

A példában a link dekorációjaként nem adtunk meg semmit, azaz felülbíráltuk az alapértelmezett aláhúzást. A lehetséges értékek: none, underline, overline, line-through, blink lehetnek, melyek rendre díszítetlen, aláhúzott, felülhúzott, áthúzott és villogó értékeket állítanak be.

p { text-indent: 40px; }

A bekezdések első sorának behúzását állíthatjuk ennek a paraméternek a segítségével.

h1 { text-transform: uppercase; }

A stíluslap hatására az 1. szintű címsorunk végig nagybetűvel fog megjelenni. Lehetséges értékek: none, capitalize, uppercase és lowercase, melyek rendre: módosítatlan, első betű nagy, összes betű nagy és összes betű kicsi jelentésűek.

h1 { text-shadow: 5px 5px 3px #000000; }

A tulajdonság hatására egy árnyékot rajzol a böngészőnk a szöveg köré. A pozíciók megadása nem kötelező, a sziné igen. Az egyes értékek jelentése rendre: lefele való távolság, jobbra való távolság, elmosottság sugara, szín. A távolságok negatív értéket is felvehetnek.

p { whitewhite-space: nowrap; }

A szóközök, tabulátorok kezelését állíthatjuk a white-space attribútummal. A normal a sorvégeken tördeli a szöveget, a nowrap nem enged sortörést, míg a harmadik lehetséges érték, a pre megtartja egy az egyben a sortöréseket, szóközöket, tabulátorokat (mint a pre HTML elemnél).

p { word-spacing: 10px; }

A szavak közötti távolságot vezérelhetjük ennek a paraméternek a segítségével. Lehetőségünk van negatív értékek megadására is.

p { line-height: 20px; }

A sormagasságot állíthatjuk vele egy paragrafuson belül. Célszerű a betűink méreténél nagyobb sormagasságot beállítani, különben összecsúsznak a sorok.

.super { vertical-align: super; }

A tulajdonsággal az elem függőleges pozícióját tudjuk szabályozni. Egy cellán belül a HTML nyelv td elemének valign tulajdonságához hasonlít, azonban szöveg környezetben (például egy div-en belül) a betűkhöz, és nem a befoglaló blokk méreteihez viszonyított igazítást állítja. Az értékei lehetnek: sub, super, baseline, text-top, text-bottom, middle, top, bottom. A példában egy felső index pozíció beállítását láthatjuk.

Dobozok megjelenése

Doboz modell

Négy oldala van, a felső, az alsó, a bal oldali és a jobb oldali. Mindegyik oldalnak van margója (1), kerete (2) és kitöltése (3). A margó a befoglaló doboz legszéle és a keret közötti távolságot állítja be. A keret a margó és a kitöltés között található. Végül a kitöltés a keret és a tartalom között helyezkedik el. Mindegyik lehet akár 0 pixel szélességű is, ekkor egyszerűen nem jelennek meg. A tartalom és a kitöltés által meghatározott terület hátterének színe állítható, illetve képet is el lehet helyezni rajta.

Az elemeknek van magasság (4) és szélesség (5) tulajdonsága is. Ezek a szabvány szerint az adott keret külső részétől az átellenes keret külső részéig értendőek. Erről sajnos a jelenleg domináns böngésző valamiért nem tud (kivéve 6-os verziójának kompatibilis módját), és a teljes dobozszélességet, illetve dobozmagasságot érti ezen tulajdonságok alatt.

Ahogy a képen látható, a piros keretű doboz középen (az elválasztásnál) kettétörik, és a keret (illetve a másik két tulajdonság) mindkét sorban hat, viszont a törésnél, azaz a sorok megfelelő szélénél nem. Ha több sorba kerül az elemünk aminek ezeket a tulajdonságokat megadtuk, akkor több helyen is kettétörik a doboz.

Háttér

A háttér színét vezérelhetjük segítségével, továbbá elhelyezhetünk képet háttérként, s annak tulajdonságait (elhelyezkedését, ismétlődését, mozgását) állíthatjuk be. A betűkhöz hasonlóan egy definícióban is, és külön-külön is szabályozhatjuk az tulajdonságokat.

body { background-color: white; }

Fehérre állítja a háttér színét. Természetesen a színt hexadecimális formában (#ffffff) is megadhatjuk.

body {
background-image: url(hatter.gif);
background-position: top left;
background-attachment: scroll;
background-repeat: repeat;
}

A példa a háttérnek megadja a hatter.gif-et (lehetne még none is megadva, ekkor csak a színezés maradna), a bal felső sarokhoz igazítja, beállítja, hogy amikor görgetjük az oldalt, akkor a háttér is mozogjon, s végül még azt, hogy ismétlődjön a háttérkép. A background-position (elhelyezkedés) értékei lehetnek szövegesek: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, illetve százalékosak (pl. 12% 34%) és pixelben megadottak (pl. 12px 34px). A background-attachement (a rögzízettséget szabályozza) értéke lehet fixed és scroll, az előbbinél nem mozdul a háttér, az utóbbinál pedig a görgetéssel együtt mozog. Az ismétlődést befolyásoló background-repeat négy értéket vehet fel: repeat, repeat-x, repeat-y, no-repeat, melyekkel mindkét, csak az egyik, vagy egyik irányban sem történő ismétlődést érhetünk el.

A háttér paraméterek egy összevonó background paraméterrel:

body { background: white url(hatter.gif) no-repeat fixed center center; }

Ebben az esetben mivel a képnek no-repeat értéket adtunk ismétlésül, a fennmaradó területen a háttér fehér színű lesz.

Keretek

A stíluslapok segítségével lehetőségünk van különböző stílusú keretet adni a kiválasztott HTML elemeinknek.

p { border: 2px solid blue; }

A fenti példában 2 képpont széles, sima és kék keretet adtunk minden bekezdésnek. Az első fenti paraméter a keret szélességét, a második a keret stílusát (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), a harmadik pedig a színét adja meg. Az egyes paraméterek elhagyhatóak, de általában szükséges mind.

Lehetőségünk van a keretek mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:

p {
border-left: 1px solid red;
border-top: 3px double blue;
border-right: 3px dotted green;
border-bottom: 3px dashed black;
}

Bal oldalt egy képpont széles piros, felül 3 képpontnyi két vonalas (vonalanként 1-1 képpontos) kék, jobb oldalt 3 képpontos pontozott zöld és végül alul 3 képpontos szaggatott vonalas fekete keretet kap minden bekezdés.

Körvonalak

A körvonalak a keretekhez nagyon hasonlóan működnek, ellenben az elem méretét nem befolyásolják, mindig körülötte és felette (előtte, azaz eltakarják mindenképpen a doboz tartalmát) jelennek meg, helyet nem foglalnak. A legegyszerűbb talán a fókusz példáját felhozni, mely ehhez nagyon hasonló: mikor egy beviteli elem (például gomb) aktív, akkor körülötte az operációs rendszer egy körvonallal jelzi, hogy fogadja a felhasználói bevitelt.

A körvonalak és a keretek további különbsége, hogy nem lehet a négy oldalon külön-külön megadni és hogy nem csak négyzetes alakú lehet.

De lássuk azokat a tulajdonságokat, melyekkel befolyásolni tudjuk a körvonal megjelenését!

p { outline-width: 2px; }
p { outline-style: solid; }
p { outline-color: #000000; }

Az outline-width tulajdonság segítségével a körvonal szélessége adható meg, az outline-style a stílust definiálja, míg az outline-color a körvonal színét állítja be. A stílusnál a kereteknél bemutatott stílusok használhatóak.

Lehetőség van egy tulajdonság segítségével beállítani a három tulajdonságot, ekkor opcionálisan és bármilyen sorrendben megadhatjuk az outline után ezeket:

p { outline: 2px solid #000000; }

Margók

Az egyes elemek a kereten (legyen az akár 0 képpontnyi) kívüli helyfoglalását szabályozhatjuk a margók segítségével.

p { margin: 0px 1px 2px 3px; }

A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi margót állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk:

body { margin: 0px; }

Ha csak két értéket adunk meg paraméterként, akkor az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú margókra fog vonatkozni:

body { margin: 10px 0px; }

Lehetőségünk van a margók mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:

p {
margin-left: 3px;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 2px;
}

Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső margós példánál bemutatottal.

Kitöltés

Az egyes elemek a kereten (legyen az akár 0 képpontnyi) belüli helyfoglalását szabályozhatjuk a kitöltések segítségével.

p { padding: 0px 1px 2px 3px; }

A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi kitöltést állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk:

body { padding: 5px; }

Ahogy a margóknál, itt is lehet csak két értéket megadni paraméterként, ahol az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú kitöltést szabályozza:

body { padding: 10px 0px; }

Lehetőségünk van a kitöltések mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:

p {
padding-left: 3px;
padding-top: 0px;
padding-right: 1px;
padding-bottom: 2px;
}

Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső kitöltéses példánál bemutatottal.

Listák megjelenése

A listák két különböző HTML elemek egymásba ágyazásából állnak össze. A külső elem lehet ul, ol és dd elem, melyben li, illetve dt elemek kapnak helyet. Mind a külső, mind a belső elemek saját margóval, kerettel és kitöltéssel rendelkeznek. A belső listaelemek listajelölő grafikájának megjelenítésekor a különböző böngészők kicsit eltérően viselkednek, egy részük a külső elem bal felének megfelelő szélességű margót, másik részük pedig megfelelő szélességű kitöltést ad, majd ezen a területen jeleníti meg a grafikát (a dd-dt páros esetén alapértelmezett esetben nem jelenik meg grafika, de a megfelelő margókkal rendelkezik). A grafika megjelenítése a belső listaelemeken kívülről áthelyezhető belülre egy tulajdonság segítségével.

Listaelemek

A listák megjelenését tudjuk szabályozni a következőkben bemutatott paraméterekkel. Lehetőségünk van képet rendelni a listaelemekhez, vagy egy előre meghatározott listából választani, továbbá befolyásolhatjuk az egyes listaelemek előtt álló jelek helyzetét. Lehetőségünk van mindezt egy paraméterrel, illetve külön-külön is állítani:

ul { list-style: square inside url(pont.gif) }
ul { list-style-position: inside }
ul { list-style-type: disc }
ul { list-style-image: url(pont.gif) }

Az első sor az egy paraméterként megadott szabályozást mutatja be. Egy kép fog megjelenni minden listaelem előtt, s a képet a szöveggel együtt fogja behúzni. Ha azt szeretnénk, hogy a kép ne legyen behúzva, akkor outside paramétert kell megadnunk. A fenti példában, mivel a kép meg van adva, s bár azt is meghatároztuk, hogy négyzet (square) legyen a jel, ezt felül fogja bírálni a kép. Mindazonáltal a jelet is meg kell adnunk, enélkül ugyanis nem jelenik meg a kép...

A második sorban a jel behúzásának szabályozó paramétert mutatjuk be, ahogy az előbb is említettük, itt állhat értékül inside és outside. A harmadik sor a jelet szabályozza. Itt széles választási lehetőségünk van: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha - persze nem mindegyik böngésző támogatja az összes jelet. Végül az utolsó sorban a képre cserélését láthatjuk a lista jelének - mégegyszer kihangsúlyozzuk, ha szeretnénk, hogy a kép megjelenjen, meg kell adnunk a jel típusát is.

Linkekkel kapcsolatos látszólagos kiválasztók

Aki már egy kicsit is foglalkozott HTML-lel, készített, vagy egyszerűen csak látogatott már weboldalakat, biztosan tudja, hogy a linkek más-más színnel jelennek meg, ha már voltunk az általuk mutatott oldalon, illetve ha még nem. Ezekre a színekre a HTML-ből, a body elem tulajdonságainak (link, vlink) állításával is hatással lehetünk, azonban CSS-t használva, sokkal több lehetőségünk lesz. Látszólagos kiválasztókkal ugyanis külön-külön meghatározhatjuk a megjelenésüket! Ezeket a kiválasztókat a következőképpen használhatjuk:

a { color: #0000FF; text-decoration: underline; }
a:link { text-decoration: none; }
a:visited { font-style: italic; }

Az első sor semmi különöset nem tartalmaz, egy link elemnek határozzuk meg a stílusát. A második sorban azokat a linkeket választjuk ki, melyeket még nem látogattunk meg, a harmadik sorban pedig azokat, melyeket már meglátogattunk (nemrég). A két tulajdonság értelemszerűen kizárja egymást.

Dinamikus látszólagos kiválasztók

A HTML dokumentumokat az ember nem szokta egy ültő helyében elolvasni, majd otthagyni. Az egész lényege valahol a dinamizmus: linkekre kattingatunk, adott esetben form elemeket használunk, stb. Az internet már interaktív média, és erre a CSS-t is felkészítették. No, nem kell bonyolult dolgokra gondolni, az eszköztárunk a következő lehetőségeket tartalmazza: az egérkurzor az adott elem felett van, az adott elem éppen aktív, továbbá ha az adott elem éppen fókuszban van.

input { font-size: 12px; border: 1px solid #000000; background: #ffffff; }
input:hover { border: 1px solid #0000FF; }
input:active { font-weight: bold; }
input:focus { background: #dddddd; }

Az első sorban itt sem tettünk semmi különöset, a beviteli mezők tulajdonságait határoztuk meg. A második sorban levő :hover kiválasztó akkor fog működni, ha az adott mező felé visszük az egérkurzort, ekkor kék színnel jelenik meg a kerete. A harmadik sorban azt határozzuk meg, miként jelenjenek meg az aktív elemek. Hogy mit értünk aktív elemen? Azt, amelyikkel éppen csinálunk valamit. Például "megragadjuk", azaz lenyomva tartjuk az egérkurzort, vagy éppen lenyomunk egy gombot, stb. Példánkban ilyenkor az elem betűi vastaggá válnak. Végül a negyedik sorban azt definiáljuk, mi történjen, mikor éppen ki van választva az elemünk, rajta van a fókusz, ebben az esetben éppen a kurzor villog az input mezőnkben. Ehhez a :focus kiválasztóhoz rendelt tulajdonságunkkal éppen azt határoztuk meg, hogy a háttérszíne legyen világosszürke. Fontos megjegyezni, hogy bár a példában éppen beviteli mezőt láttunk, de ez a tulajdonság például a linkekre ugyanúgy működik, mint a közönséges bekezdésekre, vagy más elemre!

Elemszerű látszólagos kiválasztók

A CSS lehetőséget biztosít kiválasztanunk egy-egy elem tartalmának csak bizonyos részeit, mintha azok külön-külön definiált elemek lennének. Ezekkel a látszólagos kiválasztókkal az adott elem első karakterét, vagy akár az első sorát is kiválaszthatjuk.

p:first-letter { font-size: 300%; }
p:first-line { color: #000080; }

Így az adott betű, vagy az adott sor teljesen úgy fog viselkedni, mintha osztály alapú kiválasztással, például egy div vagy egy span elemmel határoltuk volna. A példa első sora egy bekezdés első betűjének kiválasztását (3-szor nagyobb lesz, mint a bekezdés többi betűje), míg a második sor egy bekezdés első sorának (sötétkék színű lesz) kiválasztását mutatja be.

Első gyermek látszólagos kiválasztó

További lehetőségünk egy adott gyermek elemről eldöntenünk, hogy első-e a sorban. Azaz például ha a body elemen belül szeretnénk, hogy az első (bevezető) bekezdésünk vastagon legyen szedve, a first-child látszólagos osztály kiválasztó ad nekünk lehetőséget erre:

body > p:first-child { font-weight: bold; }

Fontos megjegyeznünk, hogy ha a body dokumentumunkban az első bekezdésünk előtt van egy másik elem (például h1), akkor ez a kiválasztás már nem működik. Azaz nem az első bekezdés elemet, hanem az első bekezdést, amennyiben az az első gyermek elem is, választja ki ez a kiválasztó. Természetesen a következő definíció is elégséges lett volna:

p:first-child { font-weight: bold; }

A különbség a két kiválasztó között, hogy ez utóbbi egy táblázatban levő bekezdés elemekre is illeszkedik, míg az előző csak a közvetlenül a body-ban levőkre.
Nyelv szerinti látszólagos kiválasztó
A HTML-ben, de más leíró nyelveknél is, lehetőségünk van meghatározni hogy milyen nyelven íródott az adott dokumentum (HTML-nél meta elem a fejlécben), vagy adott elemekre is külön definiálhatjuk ezeket. A CSS biztosít számunkra erre is kiválasztót. Hogy a gyakorlatban mire jó ez (amellett, hogy az angol szavakat pirossal, a németeket kékkel, stb. írhatjuk), egyetlen épkézláb példát találtam, meg lehet határozni a segítségével, hogy milyen idézőjelek szerepeljenek a dokumentumban. Ehhez egy speciális tulajdonság elemet használatunk fel, a quote-ot. Íme:

:lang(hu) > q { quotes: '\201E' '\201D' }
:lang(en) > q { quotes: '"' '"' }

Ha a dokumentumunk Content-Language értéke hu, azaz magyar nyelvű dokumentumról van szó, akkor az idézőjelek alul és felül jelennek meg, míg angol nyelvű dokumentumok esetén mind a kettő felül - ha q elemet használunk az idézésekhez.

Elem előtt és után...

Végezetül lássuk a :before és :after kiválasztókat. Ezek segítségével az adott elem előtti és mögötti látszólagos részeket választjuk ki (fontos: nem az előtte levő elemeket, hanem az elem és az előtte levő elem közötti 0 hosszúságú részt). Több trükköt is meg lehet vele valósítani, egy egyszerű, de nagyszerű például:

b:before { content: '<b>'; }
b:after { content: '</b>'; }

Ezzel a dokumentumunkban láthatóvá válnak a b elemeink, "mintha" a HTML forrást néznénk.

További tulajdonságok
Az alapszintű tulajdonságok áttekintésekor a korábbiakban már láthattuk, hogy számos módon befolyásolhatjuk dokumentumunk megjelenését, azonban ezeken kívül további eszközök is rendelkezésünkre állnak. A lehetőségek skálája annyira széles, hogy ezeket a tulajdonságokat is két cikkre bontottam, és ezeken belül is minden bizonnyal fognak még kimaradni tulajdonságok. Ezzel és a következő cikkel reményeim szerint ezek csak olyanok lesznek, melyekre viszonylag ritkábban van csak szükségünk.
A láthatóság tulajdonság
A láthatóság tulajdonság segítségével egy elemről meghatározhatjuk, hogy a böngésző megjelenítse-e, vagy pedig ne? Három értéket vehet fel:

visible
hidden
collapse

A visible érték esetén látható lesz a böngészőben, hidden esetén pedig el lesz rejtve. A collapse értéket táblázat elemeknél használhatjuk, egy oszlop, vagy egy sor elrejtésére való. Példa a tulajdonság használatára:

h1 { visibility: hidden; }

Fontos megjegyezni, amennyiben nem jelenítjük meg az elemünket, a hely még fennmarad számára, azaz tényleg csak és kizárólag a megjelenése lesz kikapcsolva, attól függetlenül még marad egy "lyuk" a dokumentumban. Ha teljesen el szeretnénk rejteni egy elemet, a következőben bemutatandó megjelenítés tulajdonságot a none értékkel használhatjuk rá.

A megjelenítés tulajdonság
A böngésző amikor megjeleníti a dokumentumunkat, előre meghatározott sémák segítségével építi fel a dokumentumunk megjelenését. Ilyen séma a dobozszerű megjelenítés, vagy a folyamatos, egy dobozon belüli megjelenítés, de a felsorolásokra, táblázatok megjelenésére is van egy-egy séma. Például a címsor elemek (h1-h6) és a paragrafus elem viszont ugyanazokat a blokk alapú sémákat használhatják. Ezek a sémák a következők:

inline
block
run-in
compact
list-item
marker
table
inline-table
table-row
table-row-group
table-column
table-column-group
table-header
table-header-group
table-footer-group
table-cell
table-caption
none

Bár a böngészőknél minden egyes elemhez hozzá van rendelve egy alapértelmezett séma, ezeket felül tudjuk bírálni. Erre szolgál a display tulajdonság. Ennek a használata a következő:

h1 { display: run-in; }

Vegyük sorra, hogy melyik séma hogyan jelenik meg!

Megjelenítés letiltása

Ezen nincs mit bonyolítani, egyszerűen, ha display: none stílust adunk egy elemnek, akkor nem fog megjelenni. Ettől függetlenül a dokumentumunkban jelen lesz, elérhető, használható, de fókuszt már felhasználó által nem kaphat (pl. javascriptből viszont igen). A használata egyszerű:

.hidden { display: none; }

Ha egy form elemet szeretnénk letiltani, megtehetjük akár így is. Az összes elem, ami az ilyen stílussal ellátott elemnek a gyermeke, szintén láthatatlan lesz.

Soron belüli megjelenítés

Ennek segítségével az adott elemet egy soron belül lehet megjeleníteni. Jó példa erre a div és a span elem, a span elem ilyen, a div pedig blokként jelenik meg. Hasznát sok helyzetben vehetjük, de egy tipikus példa, mikor a form elemünk blokk típusú megjelenítését soron belülire szeretnénk változtatni, mert zavar, hogy a form határokon sortörést tapasztalunk:

form { display: inline; }

Röviden összefoglalva: az elem előtt és után nem lesz sortörés.

Blokkban történő megjelenítés

Ilyenek a div, a p és a címsor elemek. Egy téglalapot foglalnak el, és abban jelenítik meg tartalmukat. Felhasználására példa lehet, mikor egy felsorolás elemeit blokként szeretnénk megjeleníteni (például menünek használva):

ul, li { display: block; border: 1px solid #000000; }

Összefoglalva: az elem előtt és után sortörés lesz beiktatva.
Befutó megjelenítés
A szabvány szerint a befutó megjelenés segítségével "betolakodhatunk" a következő elembe, amennyiben az blokként jelenik meg. Más szavakkal, a befutó megjelenítéssel azt érjük el, hogy az elemünk az utána következő blokk elem első soron belüli eleme lesz. Abban az esetben, ha nem blokk elem következik a befutó tulajdonságú elem után, akkor blokként jelenik meg. Így például egy címsor elemet az utána következő bekezdés elején tudunk megjeleníteni:

h1 { display: run-in; }

Kompakt megjelenítés

Itt a befutó megjelenítésnél egy fokkal bonyolultabb esetről van szó. A megjelenítő egy egy soros soron belüli blokként próbálja beilleszteni a következő blokk elembe - amennyiben a következő egy blokk elem és "befér" oda - a kompakt megjelenítés tulajdonságú elemet. Azt, hogy "befér"-e, a blokk elem bal vagy jobb margójának megvizsgálásával dönti el, ha az nagyobb, mint az elem szélessége, akkor a következő blokkon belül, különben pedig egy külön blokkban jelenik meg az elem. Az, hogy a bal, vagy a jobb margót vizsgálja-e meg a megjelenítő, a következő blokk elem irányától függ. Másként megfogalmazva, ha a következő elem mellett (bal, illetve jobb oldalon) elfér az elem, akkor ott, különben pedig felette egy külön blokkban jelenik meg. Ezt is címek megjelenítésére lehet talán használni, "kompaktabbá" tehetjük vele a dokumentumunk megjelenését:

h1 { display: compact; }

Lista elemként történő megjelenítés

Listaelemként történő megjelenítést okoz, persze tudom, hogy nem illik magával megmagyarázni valamit. A lista elemek két egymás mellett álló téglalapként jelennek meg, a bal oldali behúzásként is felfogható, a jobb oldaliban pedig a lista tartalma jelenik meg. A lista jelölő elem az a stílustól függően vagy a bal oldali, vagy a jobb oldali téglalapban fog megjelenni.

li { display: list-item; }

Jelölőként való megjelenítés

Csak generált blokkban használhatjuk, ellenkező esetben soron belüli megjelenést állít be. A generált blokkra példát az elem előtt és után történő kiválasztásnál láthattunk a content használatakor. Lényeg a lényeg, az előzőleg a lista elemnél a jelölő megjelenéséhez hasonlóan fog megjelenni ebben az esetben a generált tartalom.

li:before { display: marker; content: "-"; width: 10px; }

Táblázatokkal kapcsolatos megjelenítések

Ezek a tulajdonság értékek a táblázat elemekkel megegyező megjelenést biztosítanak. A lehetőségek a következők: table, inline-table, table-row, table-row-group, table-column, table-column-group, table-header, table-header-group, table-footer-group, table-cell, table-caption.

A pozícionálás és kapcsolódó tulajdonságok

Az egyes elemek helyzetét többféleképpen meg lehet adni. Szabályozható, hogy hol legyen a tetejük, aljuk, bal és jobb oldaluk, milyen széles és magas legyen a befoglaló méretük, hogy mihez képest viszonyuljon, stb. Ebben a részben ezeket a tulajdonságokat fogjuk megvizsgálni.

Pozícionálás tulajdonság

Evvel a tulajdonsággal azt határozhatjuk meg, hogy mihez képest helyezze el az elemet a megjelenítő alkalmazás. Lehetőség van statikus, relatív, abszolút, fix és öröklött értékre.

A statikus (static) érték (mely az alapértelmezett) ott jelenik meg az elem, ahol éppen tartunk a dokumentumban. Ennél az értéknél a bal és a fenti pozíció megadás (lásd mindjárt) figyelmen kívül lesz hagyva.

h1 { position: static; }

A relatív (relative) érték esetén a statikushoz hasonló helyre kerül az elem, de lehetőségünk van a bal és fenti pozíció megadással eltolnunk. A következő elem elhelyezése úgy lesz számítva, mintha ez az elem a helyén maradt volna.

#fejlec { position: relative; top: -15px; left: 10px; }

Az abszolút (absolute) érték esetén szintén a statikushoz hasonló helyre kerül az elem, szintén lehetőségünk van eltolni, meghatározni az elhelyezkedését, ezen kívül a méreteit is. Itt már a jobb és lenti, illetve a szélesség, magasság megadásokat is használhatjuk, szintén lásd mindjárt. Ez az elem kikerül a megjelenítés folyamából, a következő elem oda kerül, ahova ez került volna.

#lablec { position: absolute; bottombottom: 10px; rightright: 10px; }

A fix, rögzített (fixed) érték nagyon hasonló az abszolút pozícionáláshoz. Kiemelhetjük a dokumentumunkból az adott elemet, és rögzíthetjük, de most nem a dokumentumunkon, hanem a megjelenítőn (képernyőn) az adott pozícióban. Ennek eredménye, hogy ha lejjebb görgetjük a dokumentumot, az elemünk ugyanott marad.

#cimke { position: fixed; bottombottom: 10px; rightright: 10px; }

Elhelyezkedés és méret tulajdonságok
A pozícionálások meghatározásánál láthattuk, hogy adott esetben meghatározhatjuk egy-egy elem pozícióját, befoglaló méretét. Ehhez a top, left, bottom, right és a width, illetve a height tulajdonságok állnak rendelkezésünkre. A top, left, bottom, right esetében a befoglaló elem határaihoz képest befele kell megadnunk a méreteket. A három lehetőség (top, bottom, height és left, right, width) közül ha kettőt megadunk, a harmadik kiszámításra fog értelem szerint kerülni. Ha megadjuk a harmadikat is, akkor felülbírálódik az elsőnek megadott az ütközés miatt.

#szoveg
{
position: absolute;
top: 10px;
left: 10px;
bottombottom: 10px;
rightright: 10px;
background: #eeeeee;
}

Amikor egy elemnek szeretnénk "lefoglalni" egy adott helyet, vagy szeretnénk, hogy egy adott méreten ne nyúljon túl, akkor segítségünkre lehetnek a minimális és maximális magasságot és szélességet megadó tulajdonságok. Ezek a következők: min-height, max-height, min-width, max-width. Használatuk hasonló az előzőekben bemutatottakhoz. Akkor van értelme használni ezeket, ha nem adjuk meg a doboznak, csak maximum egy kötöttségét, s ekkor a tartalma fogja eldönteni, hogy milyen méretet vesz fel. Használata:

#content { min-height: 500px; }

Túlcsordulás tulajdonság

Az előzőekből következik, hogy előfordulhat, mikor egy adott doboz tartalma nagyobb, mint amekkora helyet neki szánunk, azaz a tartalmunk "túlcsordul", például a szélesség és magasság tulajdonságok megadásának következményeként. Az overflow tulajdonság segítségével tudjuk szabályozni a böngésző erre a helyzetre adott válaszát.

Az overflow lehetséges értékei: visible, hidden, scroll, auto. Ha a visible értéket adjuk meg, akkor a blokk határain túl fog futni a tartalmunk, ha van például keretünk megadva, akkor a tartalom ezen is túl fog folyni, erre is rákerül. A hidden megadásakor a tartalomnak csak az a része fog látszani, mely a blokk határain belül van. Ha scroll-t adunk meg értékül, akkor megjelenik egy görgetősáv, és azzal tudjuk fel-le mozgatni a tartalmat. Végül ha auto-ra állítjuk a tulajdonságot, akkor hasonlóan a scroll értékhez, görgetősáv jelenik meg, de csak akkor, ha valóban túlcsordul a tartalmunk. Példa:

.box { width: 200px; height: 200px; overflow: auto; }

A vágás tulajdonság
A vágás tulajdonság egy elem alakjának meghatározására szolgál. Segítségével kijelölhetjük láthatósági határait, így az elem le lesz vágva a megadott formára. Jelenleg egyetlen forma adható meg, a négyzet, melynek rendre a tetejének, jobb oldalának, aljának és bal oldalának a pozícióját kell megadnunk. Használata:

img { clip: rect(2px,2px,2px,2px); }

A lebegés és törlése tulajdonságok

Aki megismerkedett a HTML nyelvben a képek lehetőségeivel, biztosan ismeri azt a tördelési technikát, mikor egy képet, idézetet, vagy bármi mást úgy helyezünk el a szövegben, hogy az adott paragrafus(ok) szövege "körbefolyik" körülötte. Az img elemnek van ugye egy erre szolgáló tulajdonsága, az align, mellyel balra és jobbra igazíthatjuk úgy, hogy az utána következő szöveg mellette maradjon. A CSS is kínál nagyon hasonlóan egy ugyanilyen lehetőséget a float tulajdonságon keresztül, de nincs lekorlátozva a tulajdonság a kép elemekre, "bárminek" megadhatjuk, hogy balra, vagy jobbra illeszkedjen. Például:

.left { float: left; }

Előfordul azonban, hogy nem szeretnénk, ha például egy adott paragrafus mellett ilyen lebegő elemünk legyen, ezt törölhetjük a clear tulajdonság segítségével. Ekkor a lebegő elem alá "tolódik" le a clear tulajdonsággal bíró elem. A clear tulajdonság none, left, right és both értékeket vehet fel, tehát megadható, hogy csak bal, vagy csak jobb, vagy mindkét oldalon lebegő elemeket letiltsuk. Használata:

h1 { clear: both; }

HTML tanfolyam ingyen

CSS 1

CSS