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


 

Társszerkesztõket keresek a dakotajohnson.tk újranyitásához.Ha érdekel és szeretnél jelentkezni kattints a részletekért!    *****    Április 22. a Föld napja! Az ünnep alkalmából cifraszûrös juhászlegény vár benneteket a Mesetárban! Nézzetek be hozzánk!    *****    Asztrológiai tanácsadás, részletes elemzésekkel, a legkedvezõbb áron és teljesen ingyenes konzultáció, idõkorlát nélkül!    *****    Egy jégkorong-rajongó lelkészgyakornok lány blogja - ha van kedved, nézz be, szeretettel látlak :) Gréti    *****    Minden Kedves látogatómat szeretettel várom Asztrológia oldalamon, ahol az oktatás INGYENES, az elemzés BECSÜLET-KASSZÁS    *****    Ayang Avagy milye is a világ az én szememmel    *****    Charmed - Új külsõ - Még több tartalom - Még több információ, érdekesség - CHARMED - Bûbájos boszorkák - Varázslat - Cha    *****    BOOKISLAND -> A könyvek birodalma elvezet a képzeletünk világába! <- BOOKISLAND    *****    KUTYA VS MACSKA, MELYIK AZ OKOSABB? SZAVAZZ! FÉLSZ A ROBOTOKTÓL, VAGY SEM? MONDD EL! KUTYA VS MACSKA!KUTYA VS MACSKA!!!!    *****    Outsider - Gay - Creative - Rebel - Tolerant - Furry - Brony - Hipster - Gamer - Otherkin - Geek - Autistic    *****    Online Gyermekáruház és bababolt Több ezer termékkel olcsón, országos kiszállítással!    *****    Charmed - Új külsõ - Még több tartalom - Még több információ, érdekesség - CHARMED - Bûbájos boszorkák - Varázslat - Cha    *****    Supernatural - Odaát - 13. Évad - Extrák - Infók - Érdekességek - Odaát - Supernatural - 13.ÉVad - Supernatural - Odaátv    *****    Készítsük el együtt a születési horoszkópodat, látogass el az oldalamra és nézd meg a részleteket. Szeretettel várlak!!!    *****    Adóbevallás 2018 ! 17SZJA - 1753any adónyilatkozat letöltés szja adóbevalláshoz    *****    Részletes személyiség és sors analízis, ajándék 3 év elõrejelzéssel,ingyenes konzultáció,ahol megbeszéljük a kérdéseid!    *****    BOOKISLAND -> A könyvek szigete, ahol ötletet kaphatsz egy jó könyvhöz <- BOOKISLAND    *****    Rendeld meg asztrológiai elemzésed,nagyon kedvezõ feltételekkel,találkozzunk az oldalamon és válassz a sok lehetõségbõl!    *****    Asztrológiai tanácsadás, részletes elemzésekkel, a legkedvezõbb áron és teljesen ingyenes konzultáció, idõkorlát nélkül!    *****    Adóbevallás 2018 sms, határidõ, nyomtatvány és tudnivalók itt