<info9>

Kitekintő: HTML és CSS

Most, hogy a HTML alapjait már ismerjük, érdemes elkezdenünk megismerkedni a CSS nyelvvel is, ez teszi ugyanis lehetővé számunkra, hogy az oldalunk formázását, megjelenését igazán a kedvünkre alakíthassuk. Ahhoz, hogy alkalmazhassunk formázásokat egy-egy elemre, először meg kell találnunk az eleme(ke)t, ami(ke)re szeretnénk alkalmazni az adott formázást. Erre a CSS ún. szelektorokat használ.

Manapság már szinte bármilyen HTML paraméterre tudunk szelektort készíteni, azonban alapvetően a formázás meghatározásakor 3 fő szempont szerint szoktuk kiválasztani az elemeket: az adott tag típusa, azonosítója, valamint osztálya. Ezt azért érdemes tudnunk, mert érdemes már a HTML kód kialakításakor megfelelően megjelölni az oldal tartalmi elemeit ahhoz, hogy később a formázás kényelmesebb lehessen.

Azonosítók és osztályok

Az azonosítókkal már korábban találkoztunk, a hivatkozásokról szóló fejezetben. Azonosítót egy-egy elemre az id attribútummal tehetünk, azonban fontos, hogy egy oldalon belül az azonosítóknak egyedieknek kell lenniük. A formázáshoz azonosítót használni tehát akkor tanácsos, ha egy olyan elemet szeretnénk elérni, amiből garantáltan csak egy darab lesz az oldalon.

Az osztályok ennél valamivel rugalmasabb lehetőséget kínálnak elemek csoportosítására, ugyanis egy osztályba több elem is tartozhat, sőt, egy elem is tartozhat több osztályba is. Ez tehát lehetőséget ad arra, hogy csoportosítsunk hasonló megjelenésű elemeket. Például ha több <span> elem tartalmát is piros színre szeretnénk formázni, ezekre elhelyezhetjük a "piros" osztályt, ezzel összefogva azokat az elemeket, amiket egyformán szeretnénk formázni.

Osztályokat a class paraméterrel tudunk adni egy-egy elemnek. Az osztályok nevében nem szerepelhet szóköz, ha azonban több osztályt szeretnénk alkalmazni egy elemre, ezeket szóközzel választhatjuk el. Nézzünk néhány példát:

<div class="kartya"> Ez az elem a kartya osztály tagja.</div>
<div class="kartya piros"> Ez az elem a piros és a kartya osztálynak is tagja.</div>
<div class="piros"> Ez az elem a piros osztály tagja.</div>

Hogyan kapcsolódik a HTML és a CSS?

A CSS, bár egy önálló nyelv, nagyon szoros kapcsolatban van a HTML-lel. Alapvetően 3 lehetőség van arra, hogy CSS kódot helyezzünk el a HTMl-ben, mindnek megvan persze a maga előnye és hátránya:

• Külső CSS fájl: a CSS kód egy külön fájlba kerül, amit utána a link taggel csatolunk az oldalhoz.
• Stílus az oldalon belül: a CSS kód egy style elemben kerül elhelyezésre az oldalon belül.
• inline CSS: az adott elem formázását közvetlen az elemen magán jelöljük, a style paraméterrel.

Amennyiben több, hasonló kinézetű oldalt szeretnénk készíteni, mert az oldalunk több fájlból, lapból áll, és szeretnénk ezeket egységes megjelenéssel ellátni, érdemes a CSSt egy külső fájlban megírni, ugyanis így könnyedén becsatolhatjuk ezt bárhány oldalra. Ehhez nincs más dolgunk, mint létrehozni egy .css kiterjesztésű fájlt, elkészíteni bele a stíluslapot, majd az oldalak head részében elhelyezni az alábbi taget:

<link rel="stylesheet" href="css_fájl_elérési_útja">

Amennyiben olyan CSS kódot készítünk, ami csak egy adott oldalra vonatkozik, vagy valamiért nem szeretnénk külső fájlt használni, akkor használhatjuk a style elemet, amibe CSS kódot írhatunk. Ezt az elemet az oldal bármely részén elhelyezhetjük, mivel önmagában nem jelenik meg, de jellemzően a head részben szokás elhelyezni, így:

<style>
  CSS kód helye
</style>

Ha pedig gyorsan szeretnénk egy elemet egyedileg formázni, alkalmazhatjuk az inline CSS-t is. Fontos, hogy ez esetben szelektort nem adhatunk meg! A CSS arra az elemre kerül alkalmazásra, amelyen a style paraméter elhelyezésre került, más elemet nem tudunk formázni ebből az attribútumból! Ezt a megoldást így használhatjuk:

<span style="CSS helye">

Készen állsz megismerni a CSS-t?

Hamarosan megjelennek a CSS tananyagaink is, így máris belevághatsz a CSS elsajátításába!