Bevezetés a CSS alapjaiba

CSS alapjai I.

CSS alapjai

A cikksorozat első részében a CSS alapjairól lesz szó: bemutatásra kerül, hogy mi az a CSS, miért jó, ha oldalaink megjelenésének befolyásolására ezt használjuk, illetve elkezdünk megismerkedeni azzal, hogy milyen lehetőségeink vannak a nyelvben annak meghatározására, hogy mely elem(ek) tulajdonságait szeretnénk befolyásolni.

Mi az a CSS?

A CSS jelentése Cascading Style Sheets, azaz egymásba ágyazott stíluslapok. A HTML oldalaink megjelenését befolyásoló egyszerű nyelvről van szó, mely segítségével meghatározhatjuk, hogy hogyan (és hol) jelenjenek meg az egyes HTML elemek (paragrafusok, címsorok, stb.), többek között befolyásolhatjuk a színüket, méretüket, elhelyezkedésüket, margóikat, stb. Az egymásba ágyazhatóság (kaszkádolás) arra utal, hogy több stíluslapot, meghatározást is megadhatunk egyszerre, illetve egy stílus lehet több elemre is érvényes, amit egy másik stílussal felüldefiniálhatunk. A stílusok öröklődnek az oldal hierarchiája szerint, ha például a gyökér elemre definiálunk egy stílust, akkor az többnyire az oldal összes elemére érvényes (a tulajdonságok örökölhetőségétől függően).

Történelem

A HTML nyelvet fejlesztői a kezdetekben nem professzionális megjelenítést lehetővé tevő, hanem a tartalom egyszerű közlését megoldó leírónyelvnek tervezték, ennek függvényében került kialakításra is. A nyelv megjelenése egyre több ember számára tette lehetővé, hogy publikálhasson a weben, és az internet terjedése is egyre több és több új felhasználót hozott. A felhasználók elkezdtek egyre többre vágyni, az évek során felmerült annak az igénye, hogy lehessen a nyomdai megjelenéshez hasonlóan befolyásolni a weboldalak kinézetét. Így a HTML kiegészült bizonyos formázási lehetőségekkel.

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 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 oldalaink 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.

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? 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 honlapunkat (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.

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 oldal 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: #a00000; }

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!

Összefoglalás

Egyelőre még csak elkezdtünk ismerkedni a CSS-sel, a megadásuk lehetőségeit, illetve az egyszerűbb kiválasztók használatát tanultuk meg. A kiválasztók bármilyen formában keverhetőek (ahogyan fentebb is láttunk pár példát rá), ezáltal nagyon rugalmasan használhatóak. A következő lépés annak bemutatása lesz, hogy milyen lehetőségeink vannak egy elem megjelenésének a befolyásolására, azután, hogy kiválasztottuk a most megismert kiválasztók valamelyikének segítségével. Ennek a cikksorozatnak a keretében a tervek szerint nem fogunk rá kitérni, de jó azt is tudni, hogy nem csak HTML, hanem például XML dokumentumok, interfészek (pl. XUL) megjelenésének a befolyásolására is használható eszközzel ismerkedünk éppen meg.

Továbbá...