Ebben a leckében megtanuljuk, hogyan tudjuk megváltoztatni az oldalunk kinézetét. Mivel ez a tanfolyam többnyire Gportalosoknak szól, kifejezetten erre "kihegyezve" mutatom meg, hogyan lehet pl. átlátszóvá tenni a gportalos sablon moduljait. Ahhoz, hogy ezt megvalósítsuk, az eddig megismert HTML utasításainkhoz hozzá kell kapcsolnunk egy az oldalunk megjelenését befolyásoló speciális "nyelven" írt kódot, melynek neve: CSS

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.

Mire jó a CSS?

Már ismerjük a HTML nyelv formázási lehetőségeit, pl. betüformázás (szín, méret, betütípus), de lássuk be : egy bonyolultabb oldal szerkesztésekor, ahol más-más betüformát szeretnénk használni az egyes címek, felsorolások során, eléggé átláthatatlanná válik a kódunk. Minden egyes betüforma váltásnál le kell írnunk a formázási tulajdonságokat. Ez egyben azt is jelenti, hogy ugyanazokat a formázási tulajdonságokat annyiszor kell újra leírnunk, ahányszor előfordulnak. Ezt tudjuk elkerülni a CSS használatával. Elég egyszer definiálni egy-egy stílust és később a HTML kódban csak hivatkozunk rá. Ráadásul, ha valamiért meg kell változtatni pl. egy címsor betüformázását, elég egy helyen - a stílus leírásánál - megváltoztatni és az egész oldalra kihat.

A CSS kódot a HEAD részben kell elhelyezni, gportalon egy külön modult fogunk használni erre a célra, melyet a jobb vagy bal oldalon helyezünk el, így a látogató bármely menüpontban jár, mindig érvényes lesz.

Stílusok formátuma

kiválasztott elem {tulajdonság;tulajdonság}

Egy-egy kiválasztott elemhez több tulajdonságot is megadhatunk, ekkor a tulajdonságokat pontosvesszővel elválasztva kell felsorolnunk. Több kiválasztott elemet  is meghatározhatunk, ekkor a kiválasztott elemeket vesszővel kell elválasztani:

kiválasztott elem,kiválasztott elem {tulajdonság;tulajdonság}

Akkor most lássuk a gportalos háttér eltüntetését megvalósító CSS kódot:

Vegyük sorra a kiválasztott elemeket és tulajdonságaikat:

Példaként az oldalamon a "Belépés" ilyen input mező:

Átlátszó, mert az oldalháttér látszik és a beviteli mezők szegélye minden oldalon 1 pixeles, fekete.

A td.modtitle nevű kiválasztott elem egy táblázat címsora, gportalon ez a modulfejléc.
FONTOS: gportalon nem minden sablon modulfejlécét lehet eltüntetni! Amelyikben valamilyen kép van, ott hatástalan a "transparent" tulajdonság megadása. A "Beton" vagy a "Rain" sablonok alkalmasak!

A td.modbody nevű kiválasztott elem a táblázat "törzse", azaz gportalon maga a modulháttér.

Mint látod, nem kell minden egyes tulajdonságot felsorolni, csak amelyiket változtatni akarod.

Ideteszem az elvihető CSS kódot.

- Másold ki (Ctrl+C),
- nyiss egy új modult, típusa "egyszerű", pozíciója "bal" vagy "jobb" legyen.
- Nyisd meg szerkesztésre,
- válts át a "Forráskód" ikonnal HTML kód nézetbe,
- másold be a CSS kódot (Ctrl+V),
- vedd ki a két pipát alul és mentsd el.

A következő leckében a görgetősávok színezésére szolgáló CSS kódot írom le;))