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;))