Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 635361]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 295266

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [49959]
2. CSS
A pozícionálás, és a z-index [26713]
3. CSS
Függőleges menü, legördülő almenüvel [21118]
4. CSS
Függőleges menü készítése listából [20935]
5. CSS
Bevezetés a CSS alapjaiba [20139]
 

 

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

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-03-01 16:15:24
Lektorálta: outesticide
Lektorálva:
2005-10-01 12:41:16 [16181]

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.
#cimszoveg{
      color:blue;
}

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:

#0000A0 - kék
#FF0000 - piros
#FFFFFF - fehér
#000000 - fekete
#FFFF00 - sárga
#00FF00 - zöld

Most nézzük meg, hogyan is kell megadni a "color"-nak a hexadecimális értéket.
#szoveg{
      color:#FF0000;
}

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:
BODY{
      background-color:#FFFF00;
}

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.
BODY{
      background-image: url(kep.jpg);
}

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:
BODY{
      background-image: url(kepek/kep.jpg);
}

De lehet egy másik szerveren is a kép:
BODY{
      background-image: url(http://www.kepek.hu/kepek/kep.jpg);
}

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:

fixed - a háttérkép nem fog mozdulni, egy helyben marad
scroll - a tartalommal együtt mozog


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

no-repeat - a kép nem ismétlődik
repeat - ismétlődni fog
repeat-x - vízszintesen ismétlődik
repeat-y - függőlegesen ismétlődik


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

center - függőlegesen és vízszintesen igazítja középre
top - függőlegesen igazítja a lap tetejére, illetve pl. a DIV tetejére
bottom - függőlegesen igazít a lap aljához
left - balra igazít, vízszintbe
right - jobbra igazít, vízszintbe


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.)
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!