HTML tanfolyam : 12. lecke - Stílusok - Vendégkönyv átszínezése
12. lecke - Stílusok - Vendégkönyv átszínezése
2008.03.01. 14:48
12. lecke
Stílusok - Gportalos vendégkönyv
átszínezése
Az előző leckékben teljesen megváltoztattuk gportalos
oldalunk kinézetét. Stílus segítségével eltüntettük a modulhátteret,
modulkeretet, átszíneztük a görgetősávot (srollbar). Ha ügyesen
választottad meg a színeket, akkor oldalad egységes, harmonikus. Ám
hiábavaló a sok fáradság, ha a látogató - belépve a vendégkönyvedbe -
meglepődik az eredeti sablon színein, mert egyáltalán nem illik az oldalad
színvilágához. Ezen a problémán segítünk ebben a leckében. Vegyük tehát
igénybe újra a jól bevált CSS segítségét. (Ha nem tudod mi az, olasd el a
10. leckét ;))
Vendégkönyv átszínezésének CSS kódja:
Kiválasztott elem
Tulajdonság
Magyarázat
td.listheader3
vendégkönyv fejléce
ebben látod, hogy mikor készült a bejegyzés
font-size
betüméret pixelben (8px)
font-weight
betü vastagság (normal, bold, italic)
color
betü színe (színkódja) nálam fehér
background-color
fejléc háttérszíne (színkódja) nálam olajzöld
BORDER_RIGHT
fejléc szegélyének jobb oldala
(nálam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-TOP
fejléc szegélyének felső oldala
(nálam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-LEFT
fejléc szegélyének bal oldala
(nálam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-BOTTOM
fejléc szegélyének alsó oldala
(nálam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
törzsrész szegélyének jobb oldala
(nálam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-TOP
törzsrész szegélyének felső oldala
(nálam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-LEFT
törzsrész szegélyének bal oldala
(nálam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-BOTTOM
törzsrész szegélyének alsó oldala
(nálam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
Ideteszem elvihető formában is. TIPP: másold ki a kódot (Ctrl+C), majd másold be a Kódpróba dobozba
(Ctrl+V).
Ezután változtatgasd a különböző paraméterek színkódjait, mindig nézd meg
az eredményt.
Ne ijedj meg, ha a Kódpróba "Megnézem" gombját megnyomva üres lapot látsz.
Mivel ez a CSS kifejezetten a gportalos vendégkönyvre van hatással, csak
úgy tudod megnézni az eredményt, ha felteszed oldaladra a kódot, elmented
és megnyitod a vendégkönyvet.
Hogyan tegyem be az oldalamra a
már elkészült kódot?
Ha nem gportalos vagy, akkor a style utasítást
a HEAD részbe tedd.
GPORTALOSOKNAK: A modulkezelőben hozz létre egy
egyszerű modult. A pozíciója jobb vagy bal oldali legyen, mert így lesz
érvényes a hatása az egész oldaladon. Nyisd meg szerkesztésre és válts át
a "Forráskód" ikonnal HTML nézetbe. Másold be a kódot. Nem érdemes
visszaváltani editor nézetbe, mert nem fogsz látni semmit. Vedd ki a két
pipát alul, hogy ne látsszon a modulfejléc és a modulkeret. Végül mentsd
le és gyönyörködj a művedben.