HTML tanfolyam : 12. lecke - Stlusok - Vendgknyv tsznezse
12. lecke - Stlusok - Vendgknyv tsznezse
2008.03.01. 14:48
12. lecke
Stlusok - Gportalos vendgknyv
tsznezse
Az elz leckkben teljesen megvltoztattuk gportalos
oldalunk kinzett. Stlus segtsgvel eltntettk a modulhtteret,
modulkeretet, tszneztk a grgetsvot (srollbar). Ha gyesen
vlasztottad meg a szneket, akkor oldalad egysges, harmonikus. m
hibaval a sok fradsg, ha a ltogat - belpve a vendgknyvedbe -
meglepdik az eredeti sablon sznein, mert egyltaln nem illik az oldalad
sznvilghoz. Ezen a problmn segtnk ebben a leckben. Vegyk teht
ignybe jra a jl bevlt CSS segtsgt. (Ha nem tudod mi az, olasd el a
10. leckt ;))
Vendgknyv tsznezsnek CSS kdja:
Kivlasztott elem
Tulajdonsg
Magyarzat
td.listheader3
vendgknyv fejlce
ebben ltod, hogy mikor kszlt a bejegyzs
font-size
betmret pixelben (8px)
font-weight
bet vastagsg (normal, bold, italic)
color
bet szne (sznkdja) nlam fehr
background-color
fejlc httrszne (sznkdja) nlam olajzld
BORDER_RIGHT
fejlc szeglynek jobb oldala
(nlam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-TOP
fejlc szeglynek fels oldala
(nlam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-LEFT
fejlc szeglynek bal oldala
(nlam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-BOTTOM
fejlc szeglynek als oldala
(nlam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
td.list1
vendgknyv trzse
ide r majd a ltogat
font-size
betmret pixelben (8px)
font-family
bettpus (nlam Verdana)
color
bet szne (sznkdja) nlam zld
background-color
trzsrsz httrszne (sznkdja) nlam vilgos-zld
BORDER_RIGHT
trzsrsz szeglynek jobb oldala
(nlam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-TOP
trzsrsz szeglynek fels oldala
(nlam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-LEFT
trzsrsz szeglynek bal oldala
(nlam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
BORDER-BOTTOM
trzsrsz szeglynek als oldala
(nlam fekete - #000000,
1 pixeles,
pontozott vonal - dotted)
Ideteszem elvihet formban is. TIPP: msold ki a kdot (Ctrl+C), majd msold be a Kdprba dobozba
(Ctrl+V).
Ezutn vltoztatgasd a klnbz paramterek sznkdjait, mindig nzd meg
az eredmnyt.
Ne ijedj meg, ha a Kdprba "Megnzem" gombjt megnyomva res lapot ltsz.
Mivel ez a CSS kifejezetten a gportalos vendgknyvre van hatssal, csak
gy tudod megnzni az eredmnyt, ha felteszed oldaladra a kdot, elmented
s megnyitod a vendgknyvet.
Hogyan tegyem be az oldalamra a
mr elkszlt kdot?
Ha nem gportalos vagy, akkor a style utastst
a HEAD rszbe tedd.
GPORTALOSOKNAK: A modulkezelben hozz ltre egy
egyszer modult. A pozcija jobb vagy bal oldali legyen, mert gy lesz
rvnyes a hatsa az egsz oldaladon. Nyisd meg szerkesztsre s vlts t
a "Forrskd" ikonnal HTML nzetbe. Msold be a kdot. Nem rdemes
visszavltani editor nzetbe, mert nem fogsz ltni semmit. Vedd ki a kt
pipt alul, hogy ne ltsszon a modulfejlc s a modulkeret. Vgl mentsd
le s gynyrkdj a mvedben.