CSS -> A felhasználói felület - első rész

1.Színek

A CSS-ben lehetőség nyílik minden elemnek színt adni. Ez azért hasznos, mert így nem feltételen a felhasználó böngészője szabja meg az oldalon használt színeket. Például ha nem állítasz be az oldaladon a linkeknek színt, akkor azt olyan formában jeleníti meg a böngésző, amilyen az alapértelmezett beállítása. Sokat segít az oldal tervezésénél is, amikor DIV-ekkel dolgozol, és könnyebb, átláthatóbb munkához keretszínt adsz a DIV-eknek (ezt később megértitek miért hasznos).

A szöveg színének megadása

Minden elem szöveges tartalmának színét a color tulajdonsággal állíthatjuk be.

Ekkor a "cimszoveg" minden betűje kék lesz.
A színek megadására többféle mód van: az egyik korlátoltabb mozgásteret ad, a másik színmegadás viszont szinte végtelen lehetőséget nyújt.
Most nézzük a korlátoltabbat: itt a tágabban vett alapszíneket alkalmazhatjuk, a szín angol nevének magadásával. Ha például kék szövegszínt szeretnénk, akkor a "blue"-t kell megadunk értéknek. Körülbelöl 20 ilyen értéket tudnak értelmezni a böngészők (nem mindegyik). Sokszor vagy másképp, vagy nem az összes színt értelmezik. Ezért ezt a megadási módot nem ajánlom, a W3C ajánlásai sem támogatják, és ma már szinte nem is alkalmazzák, a fent említett problémák miatt.
Azért nézzünk meg néhányat közűlük:
black, blue, gray, green, lime, navy, purple, red, silver, white, yellow, red, lightblue, darkblue, pink, orange, brown
A színeket megadhatjuk RGB kód alapján is: ebből csak egyet emelek ki, a legáltalánosabbat.
A hexadecimális értéket egy "#" jel vezeti be, utána 6 karakter áll, amelyek között lehet betű is.
Nem fontos megérteni hogyan működik, de tudni kell alkalmazni. Ma már a legtöbb HTML szerkesztőben, képszerkesztőben stb. is benne van egy ilyen színkeverési lehetőség, ami a legtöbb esetben megadja a kész hexadecimális kódot, és azt már csak be kell illesztened, vagy a program beilleszti. Lássunk néhány ilyen értéket is:

Most nézzük meg, hogyan is kell megadni a "color"-nak a hexadecimális értéket.

Itt a "szoveg" azonosítójú elem szövegének (minden betűjének) adtunk piros színt.

2.A háttér

A háttér színének megadása

Minden elem esetében meghatározhatjuk azok hátterét. Színt adhatunk vagy képet is berakhatunk. Azonban figyeljünk arra, hogy ez a tartalom hátterét érinti, a szegélyekre nincs kihatással (a szegélyekről bővebben később).
A háttérszínt a background-color tulajdonsággal állíthatjuk be. Itt ez két részre oszlik.
Vagy megadunk valamilyen hátteret, legyen az kép, vagy szín, de átlátszóvá is tehetjük a transparent értékkel - ez az alap beállítás.
Szín megadása a háttérnek:

Ekkor az oldal alap háttérszíne sárga lesz.
Érdemes mindenképp megadni háttértulajdonságot, mivel a böngészők ezt is a beállításaik szerint változtatják.
Például ha a design-nak egy fehér háttér az alapja, és nem adjuk meg a háttértulajdonságot, akkor a böngésző akár piros hátteret is beállíthat.

A háttérkép megadása

A háttérnek nem csak a fenti beállításokat adhatjuk meg. Képet is berakhatunk a "background-image"-el.

A fenti kódban egy elérési útvonal segítségével adtunk meg háttérképet. Ez esetben a kép az oldalt tartalmazó mappában volt.
De ha a kép egy másik mappában van, akkor be kell írnunk a teljes elérési útvonalat.
Például a "kep.jpg" egy "kepek" nevű mappába van:

De lehet egy másik szerveren is a kép:

Ha használunk is valamilyen hátteret, akkor is érdemes megadni háttérszínt. Megtörténhet, hogy a képet nem tölti be a böngésző, vagy esetleg átlátszó képet alkalmazunk. Ilyenkor átlátszik alatta a háttér színe.
A képeket nem csak elhelyezhetjük egy elemben, hanem adhatunk megjelenési tulajdonságokat is.
Most nézzünk ezek közül néhány fontosabbat:

background-attachment: - a képet lehet rögzíteni, illetve gördíteni a tartalommal együtt.
Ilyenkor következő értékeket veheti fel:


background-repeat: - ezzel a kép ismétlődését lehet szabályozni.
Ekkor következő értékeket veheti fel:


background-position: a háttérkép pozícióját határozza meg.
Ez a következő értékeket veheti fel:


A fenti értékeknek, (tehát a "left", "right", "top", "bottom") adhatunk még eltolási értéket.
Mondjuk, ha top:220px; akkor a kép, a lap tetejétől számolva 200 pixellel lejjebb lesz. (A mértékegységekről később számolok be)
Ez minden, két sorral fentebb említett esetben lehetséges. Például: left:121px; a lap bal szélétől 121 pixelre lesz eltolva a kép.
Itt megemlítem, hogy adhatunk százalékos értékeket is: top:22%; ilyenkor a kép az oldal hosszának 22 százalékával lejjebb fog kerülni.
(Vannak margóbeállítások is, amelyekkel az oldal margóit tüntethetjük el, illetve szélesíthetjük. Ezekkel is változtathatjuk az elemek, képek elhelyezkedését, de ezekről később.)