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


 

A FÉRJFOGÁS és a FÉRJMEGTARTÁS TITKAI, a SZERELEMRÕL MINDEN, a BOLDOG SZEXUÁLIS ÉLEThez vezetõ út: PSP    *****    PÁRKAPCSOLATI és SZEXUAL PARAPSZICHOLÓGIA: PSP alternatív spirituális tanácsadó képzés abszolút kezdõknek és haladóknak    *****    Hogyan kell a SZERELMET BEVONZANI ÉS MEGTARTANI? Mi a BOLDOG SZERELEM TITKA? A PSP-n megtudhatod!    *****    Minden amit TUDNI AKARSZ A SZERELEMRÕL ÉS A SZEXRÕL: PSP Párkapcsolati tanácsadó képzés * SZERELEM SZEXUALITÁS    *****    Magyarország egyetlen Olicity és legaktívabb Arrow rajongói oldala! Minden infó az aktuális 6. évadról és egyéb finomság    *****    Megjelent a The Sims 4 legújabb kiegészítõje, a Laundry Stuff Pack. Vajon megéri megvenni? Derítsd ki Te magad!    *****    Állatok - Könyvek - Zene - HobbiZoona Blog - Állatok - Könyvek - Zene - HobbiZoona Blog - Állatok - Könyvek - Zene -Katt    *****    Lépj be a lovak csodálatos világába! Nevelj te is nálunk! KATT KATT KATT KATT    *****    Nem lehet saját lovad? Nevelj virtuálisan ITT! Nevelj, versenyezz, licitálj szebbnél szebb lovakra!    *****    -Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!-    *****    The Resident - A kórházi drámasorozat január 21-én indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!    *****    Mindenféle kérdésedre õszinte választ kaphatsz a valódi Kérdõasztrológia segítségével.    *****    Részletes személyiség és sors analízis / születési horoszkóp / ajándék 3 év elõrejelzéssel. Most érdemes ide látogatni!!    *****    Ha diplomás asztrológust keresel, aki BECSÜLET KASSZÁS alapon ad tanácsot és INGYEN OKTAT, akkor keress bizalommal!    *****    A BIOTÉRKÉP AZ IGAZI KARMA! MEGMUTATJA PONTOSAN,MILYEN FELADATTAL SZÜLETTÉL.EGY PRÓBÁT MEGÉR. SOK SEGÍTSÉG MINDEN NAP!!!    *****    Megnyitott a madárvendéglõ! Gyertek vendégségbe ti is Mályvához és Pipitérhez! Irány a Mesetár!    *****    Megnyitottam cikkes, véleményes blogomat! Sok-sok érdekes bejegyzéssel várlak naponta, ne hagyd ki! - Alice    *****    Sztárokról és idolokról írok,ajánlókat hozok,tippeket és tageket osztok meg veletek!Nézz be egy blogkóros lány oldalára!    *****    Az igazi karma a horoszkópodban a Felszálló holdcsomópont,a Chiron,a Lilith (Fekete Hold),Rendeld meg most!Várlak, katt!    *****    családi adókedvezmény 2018 nyomtatvány letöltés, feltételek tudnivalók