--->>> PORTALGURU <<<---


Főoldal
Vendégkönyv
Fórum
Blog 
Itt hirdess!!!
Bannereim
Frissítések 
Díjaim 


Hogyan ???
Vezérlő menü
HTML tanfolyam
Kódok 
Kódpróba
Újdonságok a Gp-n
Pánik


Design szettek
780 pixeles szettek
Glitteres szettek
CSS kódok
Fejlécek 
Hátterek (1131 db)
Menük 
Hirdető dobozok
Naptárak
Naptáras órák
Avatarok  (270 db)
GIF-ek (138 db)
Glitterek
Átlátszó képek (451 db)
PSP brush 
PSP mask 
PSP Textures 
Modulhátterek
Képes keretek I.
Képes keretek II.
Glitteres keretek
Csipkés keretek
Átlátszó keretek
Oldalhátterekhez keretek


Stílusok
Új stílusok 
Színkódok nevei
Színkód generátor
Hasznos linkek 

Letöltések 

Elkészült rendelések 

Kedvcsináló 

 

 

Fantától kaptam, köszönöm!!!


Kedvenc oldalam

Fantától

 

           

Eddig 15 sablonhoz készült webszett!

Eddig 126 db 780 pixeles webszett!

Eddig
32 db extra szett!

2009.10.23.
Új menüpont a Kellékeknél:
PSP Textures!

114 db új kép
Használat leírásával!



2009.10.10.
  8 db új design szett
Ezek csak az EXTRA-s
oldalamon láthatók

http://semilin.extra.hu

 

  Ha kérdésed van, írj a FÓRUM-ba!

 
Gyere máskor is!
 
semilin

 

 

 

 

 

           

     

     

SMS hirdetőfal - Megéri!
 
Belépés
Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 
Hírlevél! Iratkozz fel!
E-mail cím:

Feliratkozás
Leiratkozás
SúgóSúgó
 
Látogatottság
Indulás: 2007-07-04
 
Szavazás
Lezárt szavazások
 

 


 

Page Ranking Tool

 

PageRank Kereső optimalizálás


 

 

 

Az oldal elköltözött, frissítések itt már nem lesznek!!! Gyere az új helyre: http://webdesign-graphic.hu Klikk!!!

HTML tanfolyam
HTML tanfolyam : 10. lecke - Stílusok - átlátszó modulháttér

10. lecke - Stílusok - átlátszó modulháttér

  2008.02.19. 11:10


10. lecke

Stílusok - átlátszó háttér

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:

kiválasztott elem

tulajdonság

magyarázat

input

  beviteli mező, pl. felhasználónév, jelszó, számláló
  background-color háttérszín. Megadhatunk színt (#000000) vagy a "transparent" kulcsszót (átlátszó)
  font-family betütípus (pl.verdana)
  font-size betüméret pixelben (10px)
  color betü színe (#ffffff)
  border-left bal oldali szegély  (1 pixel vastag :1px, dupla vonal: double, fekete:#000000)
  border-right jobb oldali szegély  (1 pixel vastag :1px, dupla vonal: double, fekete:#000000)
  border-top felső szegély (1 pixel vastag :1px, dupla vonal: double, fekete:#000000)
  border-bottom alsó szegély (1 pixel vastag :1px, dupla vonal: double, fekete:#000000)

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.


Ez a kód az oldalam jelenlegi CSS kódja. Változtasd a tulajdonságokat igényeid szerint!

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


 

SZEREPJÁTÉK - Csatlakozz közénk és légy részese egy kalandnak - FRPG - Még nem késõ csatlakozni - SZEREPJÁTÉK    *****    VANESSA HUDGENS - A LEGNAPRAKÉSZEBB MAGYAR RAJONGÓI OLDALAD A TEHETSÉGES ÉNEKES-SZÍNÉSZNÕRÕL - VANESSA HUDGENS    *****    Ipari elektronkia szerviz, villamos kéziszerszám javitás, érintésvédelmi felülvizsgálat. elektronika-szerviz.gportal.hu    *****    Minden lány egy kicsikét királylány, minden Fiú kicsit hõs lovag. - FRPG    *****    | WATTPAD | Egy neves gimnázium, egy gazdag, arrogáns srác és egy ösztöndíjas lány nem mindennapi szerelme | WATTPAD |    *****    Szerepjáték &#8211; Csatlakozz közénk, és részese Te is a kalandoknak - FRPG    *****    Egy igazi hõs sem tudja magáról, hogy hõs. - Egy igazi hõs sem tudja magáról, hogy hõs.    *****    Nincs Új Poszt Cousin & Best Friend & A Lot More    *****    az új élet reményében, hajózz    *****    ANELIATH - varázslat és sárkányvér    *****    csillagütközés marcangolta nász    *****    Katt!Katt!Katt! Lépj be a galopp versenyparkunkba! Katt Katt!    *****    Új lovas szerepjáték! * Új lovas szerepjáték! * Lépj be a lovak csodálatos világába! Nevelj te is nálunk!    *****    ANELIATH - varázslat és sárkányvér- Te ki leszel ebben a csavaros Történetben? - SZEREPJÁTÉK    *****    Te ki leszel ebben a csavaros, mágiával, intrikával és hataloméhséggel f&#251;szerezett olvasztótégelyben?    *****    Te ki leszel ebben a csavaros, mágiával, intrikával és hataloméhséggel fûszerezett olvasztótégelyben?    *****    Vörös sziluett az emlékvárban    *****    'cause I am only human    *****    az új élet reményében, hajózz    *****    Új lovas szerepjáték! * Új lovas szerepjáték! * Lépj be a lovak csodálatos világába! Nevelj te is nálunk!