Honlapok Formázási Lehetőségeinek Bővítése a CSS Segítségével
-
Upload
adrianfenyvesy -
Category
Documents
-
view
16 -
download
4
Transcript of Honlapok Formázási Lehetőségeinek Bővítése a CSS Segítségével
-
SZEGEDI TUDOMNYEGYETEM BLCSSZETTUDOMNYI KAR
SZEGED
HONLAPOK FORMZSI LEHETSGEINEK BVTSE A CSS NYELV SEGTSGVEL
Szakdolgozat
Ksztette: Rimr Mikls Knyvtri informatikus szak
Tmavezet: Sndor kos
2004.
-
2
Tartalomjegyzk 1. Bevezets ............................................................................................................................ 3 2. A CSS alapjai ....................................................................................................................... 4
2.1 HTML s SGML............................................................................................................... 4 2.2 A stluslapok ................................................................................................................... 5 2.3 A CSS trtnete .............................................................................................................. 6 2.4 Szintaxis......................................................................................................................... 7 2.5 Ltszlagos elemek ......................................................................................................... 8 2.6 Stluslapok csatolsa...................................................................................................... 10 2.7 Dokumentumfa s dobozmodell....................................................................................... 12
3. Marg-, szegly- s kitlts-tulajdonsgok .............................................................................. 16 3.1 Margk......................................................................................................................... 16 3.2 Margk sszeolvadsa ................................................................................................... 18 3.3 Kitltsek...................................................................................................................... 18 3.4 Szeglyek..................................................................................................................... 19 3.5 Rvid szeglytulajdonsgok ............................................................................................ 20 3.6 Krvonalak ................................................................................................................... 22
4. A felhasznli fellet............................................................................................................ 23 4.1 Sznek.......................................................................................................................... 23 4.2 Httrtulajdonsgok ....................................................................................................... 24 4.3 Rendszersznek hasznlata ............................................................................................ 26 4.4 A bngszablak sznei .................................................................................................. 28 4.5 A kurzor ....................................................................................................................... 29
5. Bet- s szvegtulajdonsgok............................................................................................... 30 5.1 Betk formzsa............................................................................................................ 30 5.2 Szvegtulajdonsgok ..................................................................................................... 37
6. Megjelents s pozcionls ................................................................................................ 40 6.1 Rtegek s pozcik....................................................................................................... 40 6.2 Lthatsg.................................................................................................................... 44 6.3 Megjelens ................................................................................................................... 46 6.4 Krlfolyats ................................................................................................................. 46 6.5 Tlcsorduls ................................................................................................................. 48
7. Tblzatok ......................................................................................................................... 49 7.1 Formzs ..................................................................................................................... 49 7.2 Tblzatszeglyek ......................................................................................................... 51 7.2.1 Elklntett szeglyek .................................................................................................. 51 7.2.2 sszevont szeglyek................................................................................................... 52
8. Listk tulajdonsgai ............................................................................................................. 53 8.1 Jellk ......................................................................................................................... 53 8.2 Tartalom ltrehozsa, automatikus szmozs.................................................................... 55
9. Mdiafgg stluslapok......................................................................................................... 59 10. A jv .............................................................................................................................. 60 Irodalomjegyzk ..................................................................................................................... 62
-
3
1. Bevezets Ez a dolgozat a honlapszerkeszts terletn egyre szlesebb krben hasznlt CSS nyelv 2.0 verzijt kvnja bemutatni. A nyelv segtsgvel stluslapokat hozhatunk ltre, amelyek alkalmazsval nagy-mrtkben javtani tudjuk oldalaink megjelenst. A HTML viszonylag szks kereteihez kpest szm-talan formzsi s igaztsi lehetsg ll rendelkezsnkre, amelyek az ignyesebb felhasznlk elv-rsait is kielgtik.
Sajnos a CSS ltal knlt lehetsgeket nem tudjuk maradktalanul kihasznlni, az egyes bngszk ugyanis nem minden formzsi opcit valstanak meg. ppen ezrt nem vettem fel a dolgozatba azt a nhny CSS tulajdonsgot, amelyet az elterjedt bngszk egyike sem tmogat. Bekerltek viszont azok, amelyeket a programok egy rsze megjelent, mert j esly van r, hogy az egymssal val vetl-keds kvetkeztben ezeket a tbbi bngsz is igyekszik elrhetv tenni ksbbi verziiban.
A fentiekhez hasonl okok miatt nem esik sz a kpernyn megjelen (grgethet) dokumentumoktl eltr, teht a nyomtatott, n. lapozhat (paged media) s a hanggal megjelentett (aural) dokumen-tumtpusokra jellemz sajtos formzsi lehetsgekrl. Ezeket a klnbz bngszk meglehetsen rapszodikusan kezelik, s tbbnyire inkbb figyelmen kvl hagyjk.
A munka alapveten a W3C eredeti, angol nyelv CSS2 ajnlsra pl. Br lteznek klnfle, rszleges vagy teljessgre trekv magyar fordtsok, ezeket kisebb-nagyobb pontatlansgaik miatt csak tjkoztat jelleggel tudtam figyelembe venni a dolgozat ksztse sorn. A specifikci mellett a stluslapok alkalmazsval kapcsolatos forrsok (elssorban weboldalak), valamint tipogrfiai szakiro-dalom segtsgvel igyekeztem a klnbz tulajdonsgok felhasznlhatsgra vonatkoz eseteket sszelltani.
A dolgozatban szerepl pldkat, valamint a felsorolt CSS tulajdonsgokat a weben leggyakrabban hasznlt bngszk: az Internet Explorer, a Mozilla s az Opera legjabb verziinak segtsgvel tesz-teltem. A klnbz statisztikk szerint az internetezk 9095 szzalka ezeket a szoftvereket (illetve a Mozillval azonos motort tartalmaz Netscape Navigatort) alkalmazza a weboldalak megjelentsre, teht a fenti bngszknl tapasztalt eredmnyek, megfigyelsek relevnsnak tekinthetek.
-
4
2. A CSS alapjai
2.1 HTML s SGML
A weboldalak ksztsre szolgl HTML nyelv 1990-ben jelent meg. Kszti a CERN-ben dolgoz TIM BERNERS-LEE, aki a nyelvet a WWW alapjul szolgl msik kt ajnlssa egytt (HTTP, URI) kidol-gozta, s DANIEL W. CONNOLLY voltak. Megjelense nem volt elzmny nlkli: alapjul az 1986-ban ISO szabvnny vlt SGML szolglt.
Az SGML-t (Standard Generalized Markup Language, szabvnyos ltalnos jellnyelv) dokumentu-mok szmtgpes trolsra s feldolgozsra hoztk ltre. Kifejlesztshez az a jelensg vezetett, hogy az intzmnyek, nagyvllalatok nem tudtk egysgesen kezelni a klnbz rszlegektl, beszl-ltktl kapott dokumentcikat, azok eltr formtuma, bels szerkezete s sajtos elemei miatt. Ezrt kidolgoztak egy technolgit, amely lehetv teszi strukturlt dokumentumok ltrehozst, vagyis a szveg egyes alkotelemeit (pl. irodalmi mvek esetben ilyenek a szerz, cm, fejezet, versszak, vers-sor stb.) meghatrozhatjuk s elklnthetjk. Az elemek elhatrolsa n. cmkkkel (angol tag) trt-nik, ezek vezetik be s zrjk le az egyes elemeket.
Nemcsak azt tudjuk szablyozni, hogy a dokumentum milyen rszekbl lljon, de az egyes elemek egymshoz val viszonya, a szvegrszek hierarchija is megadhat. A megfelel mdon strukturlt dokumentum azutn gpi ton is feldolgozhat s visszakereshet. A mdszer hasznlata sok terleten elterjedt, a replgpgyrtstl a lexikonksztsig szmtalan terleten alkalmazzk.
Egy SGML alkalmazsnl meg kell hatroznunk a hasznland dokumentumtpusokat, azok szerke-zett. Ez a DTD (dokumentumtpus-definci), amely megadja, hogy az adott tpus dokumentum mi-lyen elemeket tartalmazhat, azokhoz milyen attribtumok tartoznak, illetve lerja a felhasznlhat entit-sokat. Az elemek az SGML szemllete szerint egy faszerkezetben helyezkednek el, melynek gykr eleme adja meg a dokumentum tpust.
Az SGML legelterjedtebb megvalstsa a HTML, amely nem ms, mint egy hiperszvegek kpernyn val megjelentsre kidolgozott dokumentumtpus-definci. Az adatszerkezetet s hierarchit ebbl kvetkezen csak minimlis mrtkben hatrozza meg. Tartalmaz ugyan olyan elemeket (H1, P stb.),
amelyek hasznlhatak lennnek strukturlt lershoz, de ezek rendeltetsszer hasznlata nem terjedt el.
Az SGML nem hatrozza meg, hogy milyen rszekbl lljon a szveg, nem tartalmaz konkrt eleme-ket, utastsokat, csak egyfajta keretet, irnymutatst ad a dokumentumok strukturlst illeten. Ezzel szemben a HTML egy specilis, elre meghatrozott s vges szm elemkszlettel dolgozik, vagyis egy feladatspecifikus SGML DTD-t valst meg.
-
5
2.2 A stluslapok Az SGML szabvny nem rendelkezik a dokumentumok megjelentsrl. Ez a ltszlagos hinyossg ppen az SGML filozfijnak lnyegbl: a tartalom s a forma klnvlasztsbl ered. A dokumen-tumokat egyszer ASCII szvegfjlknt troljk, amelyek mell a mindenkori ignyeknek s technikai lehetsgeknek megfelelen megjelentsi informcikat trsthatunk. Ezek a stluslapok, amelyek a dokumentumok klalakjt szablyozzk. Egy stluslapot tbb (akr ezres nagysgrend) dokumentum-hoz is hozzrendelhetnk, ezzel egysges megjelenst biztostva a szmukra. Egy dokumentumhoz pedig tbb stluslap is csatolhat, a klnbz felhasznlk vagy az egyes megjelent eszkzk sz-mra.
A HTML korltai hamar megmutatkoztak. A nyelv nem tudja megfelel mrtkben feltrni a dokumen-tumok szerkezett, hiszen elssorban a kpernyn trtn megjelents feladatra lett kidolgozva. Azonban a megjelensbeli lehetsgei is elgg korltozottak, gy a honlapksztk eszttikai, tipogr-fiai trekvsei csak szk keretek kztt mozoghattak.
A HTML nyelv viszonylag kevs formzsi lehetsget nyjtott a weboldalak kszti szmra. Ez f-leg a nyomtatott kiadvnyok szerkesztsnl add lehetsgekkel sszevetve volt szembetn. Ezrt jelentek meg a web vilgban is a stluslapok, amelyek kibvtettk a honlapksztk eszkzeit, s m-dot adtak arra, hogy a korbbiaknl ignyesebb weboldalak kszljenek, amelyeknl tbb lehetsg nylik az egyes megjelensi tulajdonsgok belltsra, mdostsra.
Stluslapok nemcsak a dokumentum szerzjtl szrmazhatnak, de a felhasznltl vagy egy alkal-mazstl is. Ez azt jelenti, hogy a felhasznl is kszthet vagy megadhat stluslapot, amit hozzrendel-het az ltala hasznlt dokumentumhoz. Egyes alkalmazsok (bngszk, felolvasprogramok stb.) szin-tn kpesek lehetnek r, hogy sajt stlusdefinciik alapjn jelentsk meg a dokumentumot. Ilyen esetben a szerzi stluslapok brnak a legnagyobb nyomatkkal, alaprtelmezsben ezek kerlnek megjelentsre. ket kvetik a felhasznli szablyok, de pl. a CSS esetben ez a sorrend megfordt-hat a felhasznli stluslapban elhelyezett !important utastssal. Ha a szerzi s a felhasznli
stlus is tartalmaz !important parancsot ugyanarra az elemre, akkor a felhasznl fog rvnye-
slni. Vgl a bngsz stluslapja kvetkezik, amely a legkisebb precedenciartkkel br. A HTML nyelv a 4.0-s verzijtl kezdve tmogatja a stluslapok hasznlatt. Ezzel egyidejleg a
HTML bizonyos elemeinek attribtumai, st egyes elemek is elavultt vltak. Ez azt jelenti, hogy a jelen-legi (4.01) vltozat mg lehetv teszi ugyan a hasznlatukat, de a nyelv kvetkez verzii mr nem biztos, hogy rtelmezni fogjk azokat.
-
6
2.3 A CSS trtnete Az els Web-bngszk mg maguk dntttek arrl, hogyan jelentsk meg az oldalakat. Kezdetben az egyes szoftverek mg egyni stlusnyelvet hasznltak, de a bngszk kvetkez genercii egyre kevesebb lehetsget biztostottak az oldalak klalakjnak befolysolsra. Az els grafikus bngsz, az 1993-ban megjelent NCSA Mosaic (amely szles krben elterjedt, s a Web npszersgrt is sokat tett) a megjelents terletn eldeihez kpest visszalpsnek bizonyult, ugyanis csak bizonyos szn- s bettulajdonsgok megvltoztatst tette lehetv. Ez a tendencia termszetesen egyarnt zavarta a lapok szerzit s felhasznlit is, akik elgedetlensgknek adtak hangot.
Az ugyancsak a CERN-ben dolgoz HKON WIUM LIE elhatrozta, hogy kszt egy stluslapnyelvet a Web szmra. Ez volt a CSS, amelynek els vzlatt (akkor mg konkrtan a HTML nyelvhez kidolgoz-va) 1994-ben mutatta be. Ekkor csatlakozott hozz BERT BOS, aki akkoriban egy stluslapokkal is ren-delkez bngsz kifejlesztsn dolgozott. Egyestettk eriket, s nekilttak egy olyan stlusnyelv ki-dolgozsnak, amely a HTML mellett ms ler nyelvekhez is hasznlhat. Sikerket attl remltk az egyes bngszk sajt stlusnyelveivel, illetve az SGML-hez kidolgozott DSSSL nyelvvel szemben, hogy a CSS kpes volt a szerzk s a felhasznlk ignyeit egyarnt figyelembe venni, s szksg esetn azokat kombinlni, egymsba gyazni.
A CSS megjelenst a HTML fejleszti rmmel fogadtk, mert meglttk benne a HTML-bl hinyz specilis lehetsgeket. A szakmt azonban megosztotta a bejelents, sokan ktelkedtek a nyelv hat-konysgban.
1995-ben ltrejtt a World Wide Web Consortium (W3C), s a CSS fejlesztse ennek keretei kztt, kln munkacsoport megalaptsval folytatdott. Ebben az vben a Microsoft jelezte, hogy kvetkez bngszje, az Internet Explorer 3.0 tmogatni fogja a CSS hasznlatt. Mivel a nagy ellenfl, a Nets-cape sem akart lemaradni, gy a Navigator 4.0 verzijba szintn bekerlt a CSS tmogatsa. Ez a Netscape filozfijban is vltozst jelentett, hiszen k eredetileg nem rtettek egyet a stluslapok hasznlatval, majd egy sajt stlusnyelv (a JSSS) fejlesztsbe kezdtek.
A CSS1 vgs formjt 1996-ra nyerte el, a W3C ekkor vette fel ajnlsai kz. Kzben mr kszlt a kvetkez, a 2.0 verzi, amely 1998-ban vlt W3C ajnlss. Az elz vltozathoz kpest szmos j-tst tartalmazott (pl. mdiatpusok, a nemzetkzisg tmogatsa, jabb mretezsi s pozcionlsi lehetsgek, generlt tartalom, a felhasznli fellettel val egyttmkds stb.), amelyek tovbb bv-tettk a honlapksztk eszkztrt. A fejleszts ezek utn is kt irnyban folytatdott: jelenleg a meg-jelens eltti vgs fzisban tart a 2.1 verzi, amelyet tkp. a 2.0 javtott vltozataknt definilnak (level 2, revision 1). A tervek szerint 2004 novemberben rvnyess vl ajnls szmos mdostst tar-talmaz az elz verzihoz kpest, ezekrl az egyes tulajdonsgoknl megjegyzsknt esik majd sz.
-
7
Kzben mr tervezs alatt ll a CSS level 3, amely mg tbb formzsi lehetsget knl majd felhasz-nli szmra.
1998-tl mr nem csak a kt nagy bngsz tudja rtelmezni a CSS-t: ekkor debtl az Opera 3.5 verzija, amely szintn tmogatja a stluslapokat. (Azta is ez a bngsz ragaszkodik legkvetkezete-sebben a HTML s a CSS lershoz, s ez valstja meg a legtbb tulajdonsgot.) Ezzel a CSS polgr-jogot nyert a kisebb bngszk vilgban is, s alkalmazsa innentl kezdve egyre szlesebb krben terjedt el.
2.4 Szintaxis A CSS nv a Cascading Style Sheets rvidtse, jelentse lpcszetes vagy egymsba gyazott stlus-lapok. Az elnevezs arra utal, hogy az elemek tulajdonsgait tbb lpsben, vagy akr tbb stluslap alkalmazsval is meg tudjuk hatrozni. gy pldul felhasznlknt bellthatjuk, hogy az ltalunk megltogatott oldalak bizonyos jellemzi az eredetitl eltr mdon, j rtkekkel jelenjenek meg. Szer-zknt pedig megadhatunk egy tulajdonsgot, mely az elem sszes elfordulsakor rvnyes lesz, de emellett hozzadhatunk egy tovbbi tulajdonsgot, amely csak a fenti elemek egy csoportjra, egy konkrt elemre, vagy annak csak egy rszletre lesz alkalmazva. Ez pldul azt jelentheti, hogy a do-kumentum minden H1 eleme kk szn lesz, de egyes rszeik mg ezen tl nagyobb betvel is fognak
megjelenni, az albbi stluslapnak megfelelen: H1 {color: blue} .kiem {font-size: 120%}
A HTML forrskdban ezt a kvetkezkppen hasznlhatjuk fel: cmsor kiemelssel a kzepn
Az eredmny az 1. kpen lthat:
Amint az elz pldn is lthat, a CSS nyelv utastsai kt rszbl tevdnek ssze.
Az els, a kapcsos zrjel eltti rsz elnevezse szelektor. Ez adja meg, hogy az oldal mely rszre alkalmazzuk a stlusdefincit. A szelektor ennek megfelelen lehet valamilyen HTML elem (BODY, H1,
P stb.), valamilyen osztly (ilyen a fenti pldban a .kiem) vagy azonost, valamint n. ltszlagos
osztly s elem is.
1. kp lpcszetes stlusmegads
-
8
Ha szelektorknt egy HTML elemet adunk meg, akkor arra minden elfordulsakor a megadott stlus-informcik fognak vonatkozni (hacsak ms utasts fell nem brlja azokat).
Az osztlyokat s azonostkat az oldal brmely rszre alkalmazhatjuk. Az osztly nevt pont vezeti be, hivatkozni pedig a CLASS attribtummal tudunk r. Az azonost # jellel kezddik, meghvni az ID
attribtummal lehet. Egy osztlyt az oldal tbb helyn is felhasznlhatunk, az azonostk viszont egye-diek. Mindkettt hozzfzhetjk elemekhez, pl. a vagy az
aktulis bekezdsre lesz rvnyes. Ha elemen belli rszt akarunk formzni, a HTML nyelv SPAN ele-
mt hasznlhatjuk, ez trtnt a fenti pldban is. Tbb elemet formzs cljbl a DIV segtsgvel
tudunk csoportba foglalni. A CSS utastsok msodik, a kapcsos zrjelen bell elhelyezett rsze a deklarci, amely megmutatja, hogy az adott elemnek melyik tulajdonsgt lltjuk be, s milyen rtket adunk neki.
Egy elemnek tbb tulajdonsga is bellthat egyszerre, ilyenkor az egyes meghatrozsok felsoro-lsszeren kvetik egymst, pontosvesszvel elvlasztva:
H1 {color: blue; background-color: yellow; height: 16pt} Egy stlusdefinci tbb elemre is rvnyes lehet, ekkor az elemeket kell felsorolnunk, vesszvel elv-
lasztva: H1, H2 {color: red}
Ha egy stlusdefincit az oldal minden elemre alkalmazni akarunk, akkor hasznlhatjuk a * univer-
zlis szelektort. A * {color: green} utasts hatsra minden elem color tulajdonsga a green rtket veszi fel, vagyis zld szn lesz.
2.5 Ltszlagos elemek Stlusdefincikat nem csak az oldaller nyelv (jelen esetben a HTML) ltal generlt elemekre adhatunk ki. A CSS-ben lteznek n. ltszlagos vagy pszeudo-osztlyok s -elemek is, amelyek nem jelennek meg a dokumentum forrsban, sem a dokumentumfn. Segtsgkkel specilis informcik alapjn hajthatunk vgre formzsokat.
Ilyen ltszlagos osztly a :first-child, amely az elemek els gyermekelemre vonatkozik. A
kvetkez stlusmegads a megj elemcsoport () els bekezdst barna httren kk bets szvegg alaktja:
#megj P:first-child {color: navy; background: #987}
-
9
Az utasts csak akkor lesz rtelmezve, ha az els elem tnylegesen P, s nem kerl vgrehajtsra
az elemek kztt ksbb, de elszr elfordul P esetn. Ha a fenti meghatrozsbl kihagyjuk a P
elemet, akkor az a #megj brmilyen tpus els gyermekelemre (pl. cm) fog vonatkozni. A linkek esetben a CSS kt pszeudo-osztlyt vezetett be, ezek a :link s a :visited. Az els a
mg meg nem ltogatott, a msodik pedig a mr felkeresett linkeket jelenti. Mivel a HTML esetben a linkek a HREF attribtum A elemek, gy a kt ltszlagos osztly csak ezekre lesz rtelmezve. Ebbl
kifolylag az albbi utastsok egyenrtkek: A:link {color: red} :link {color: red}
A felhasznli tevkenysg dinamikus kezelsre hrom ltszlagos osztly ll rendelkezsnkre. A :hover azokra az elemekre vonatkozik, amelyeket a felhasznl kijellt (pl. flvitte a kurzort), de
nem aktivlt. Az :active akkor lp letbe, amikor a felhasznl aktvv tesz egy elemet, pl. az egr-
gomb lenyomsa s felengedse kztti idben. A :focus akkor lesz rvnyes egy elemre, amikor
az oldal fkusza az elemen van. A dinamikus pszeudo-osztlyokat elszeretettel szoktk alkalmazni a linkek esetben, az azokra vo-
natkoz ltszlagos osztlyokkal egytt. (A tbbi elem esetben biztonsggal nem is hasznlhatak, ugyanis elemenknt s bngsznknt ms-ms eredmnyt kapunk.) ltaluk a linkek interaktvan k-pesek reaglni minden ket rint felhasznli esemnyre, beavatkozsra. Egy ilyen stlusbellts lthat a kvetkez pldn: a linkek beti flkvrr vlnak, ha fljk visszk a kurzort, a mr megl-togatott linkek pedig szrkk s kisebb betmretek lesznek, hogy ne vonjk el a figyelmet.
A {text-decoration: none} A:active {color: red} A:hover {font-weight: bold} A:visited {color: gray; font-size: smaller}
A :lang ltszlagos osztly alkalmazsval eltr formtumot (pl. ms idzjelek, bettpus, szn
stb.) rendelhetnk klnbz nyelv dokumentumokhoz, vagy akr egy dokumentum klnbz nyelv rszeihez. A nyelvek megklnbztetse a HTML elemek LANG attribtumnak felhasznlsval trt-
nik. Az albbi stluslap a megfelel bngszkben az oldal magyar nyelvknt meghatrozott bekezd-seit () zlden, az angolokat pedig kk sznnel, dlt betvel jelenti meg:
:lang(hu) {color: teal}
-
10
:lang(en) {font-style: italic; color: navy} A :first-line pszeudo-elem segtsgvel a blokkszint elemek els sornak tulajdonsgait tud-
juk befolysolni. Ez nem egy lland terjedelm szakaszt jelent: a szvegek els sornak hosszt min-dig az aktulis megjelentsi krlmnyek (az ablak- s oldalszlessg, fontmret stb., ill. ezek vltoz-sai) hatrozzk meg. Erre lthatunk pldt a 2. kpen is, ahol ugyanaz a dokumentum klnbz bn-gszablakokban eltr szlessggel, ezrt vltoz tartalm els sorral jelenik meg. A felhasznlt uta-sts a bekezdsek els sort kk sznv s nagybetss alaktja:
P:first-line {color: navy; text-transform: uppercase}
A :first-letter ltszlagos elem elmletileg inicilk ltrehozsra hasznlhat, mivel szve-
gek els betjre vonatkoz tulajdonsgokat lehet vele belltani. A bngszk azonban meglehetsen szeszlyesen kezelik, hasznlata ezrt egyelre nem ajnlott. Az inicil ltalban is problms terlete a honlapok vilgnak. Elfogadhat megolds a float tulajdonsg s a margmretezsek prost-
sval rhet el, errl majd ott olvashatunk. A :before s :after pszeudo-elemek tartalom generlsra szolglnak, ezrt az erre vonatko-
z rszekben lehet majd hasznlatukrl olvasni.
2.6 Stluslapok csatolsa A CSS nyelv stluslers tbbflekppen is hozzkapcsolhat egy honlaphoz. Hasznlhatunk begya-zott stluslapot, ekkor a stlusinformcik a HTML oldal fejben, a STYLE elemben helyezkednek el.
gy a lers az egsz dokumentumra (de csak arra az egyre) lesz rvnyes. Ilyenkor a STYLE elemben
a stlusnyelvet is meg kell hatroznunk. Ha nem tesszk, akkor a bngszk a HTML-hez alaprtelme-zetten trstott stlusnyelven prbljk rtelmezni a lertakat ezt trtnetesen szintn a CSS.
2. kpegy dokumentum els sora
klnbz nzetekben
-
11
A stluslapokat nem ismer bngszk megjelentenk a lerst, ezrt clszer HTML megjegyzsbe () tennnk azt.
A kls stluslap egy nll fjl, amely tbb oldalhoz is hozzkapcsolhat. Segtsgvel egy helyrl tudjuk szablyozni oldalaink klalakjt, s gy az esetleges megjelensbeli vltoztatsokat is csak itt kell vgrehajtani. A kls stluslapra a HTML fejben lv LINK elem segtsgvel tudunk hivatkozni, a
kvetkez mdon:
Stlust nemcsak oldalakhoz, hanem egy-egy elemhez is tudunk trstani. Ezt az elemek STYLE attri-
btuma segtsgvel oldhatjuk meg, a formzs termszetesen csak az elem egyszeri elfordulsra lesz rvnyes. Az albbi plda egy konkrt bekezds sznt s bettpust lltja be:
Magnak a CSS nyelvnek is van olyan utastsa, amellyel stluslapra hivatkozhatunk. Ez az @import, amelyet a stluslap legelejn kell elhelyeznnk. Az utasts utn abszolt vagy relatv hi-
vatkozs formjban kell megadnunk a csatolni kvnt stluslap elrsi tjt. Az url kifejezs s a
zrjelek opcionlisak.
@import url(lap.css);
A stluslapok npszerv vlsval egyre tbb olyan oldal jelenik meg a vilghln, amelynek kszti tbb stluslapot is kidolgoznak, s a felhasznlra bzzk, hogy ezek kzl melyiket vlasztja ki. A dolog technikai megvalstsnak tbb lehetsges vltozata van. A dinamikusan ltrejv oldalaknl gyakori, hogy PHP segtsgvel jragenerldik az oldal a kvnt stlusjegyekkel formzva. Ms lapok esetben elterjedtebb megolds a kliensoldali csere, ahol JavaScript utastsok illesztik a stluslapot az oldalak-
-
12
hoz. A 3. kpen is egy ilyen mdon mkd weboldal mensvja figyelhet meg a klnbz stlusok alkalmazsval. A terleten lthat a stluskivlaszt rsz is, a tbbi linkkel megegyez formban.
3. kp
egy weboldal cserlhet stlusai
2.7 Dokumentumfa s dobozmodell
A CSS is fenntartja azt az SGML-bl ered szemlletet, amely szerint a dokumentum minden eleme kapcsoldik egymshoz. Viszonyukat egy faszerkezet segtsgvel lehet lerni. A dokumentumfn min-den elemnek pontosan egy szleleme van, kivve a gykrelemet, amelynek nincs szleleme. Egy elemnek termszetesen tbb gyermekeleme is lehet. Egy dokumentumfa pldul az albbi mdon plhet fel:
4. kp plda a dokumentumfa felptsre
-
13
A dokumentumfa felptse az rklds szempontjbl lehet fontos. A CSS ugyanis lehetsget ad arra, hogy az elemek rkljk szlelemk tulajdonsgait. Ilyen esetben azonban rdemes arra odafi-gyelni, hogy relatv rtk megadsa esetn ltalban nem maga az rtk rkldik, hanem annak az n. szmtott rtke. Ez azt jelenti, hogy ha pl. a BODY elemben 16 pontos betmretet, s 200%-os
sortvolsgot hatroztunk meg, akkor a bngsz ez utbbit tszmolja egy abszolt rtkk, ami 32 pontot eredmnyez. Az oldal minden eleme, amely rkli ezt a belltst, 32 pontos sortvolsggal jele-nik meg, mg akkor is, ha esetleg egy 8 pontos szvegrl van sz, amelynl a sortvolsgnak 16 pont-nak kellene lennie. [A CSS2.1 bizonyos tulajdonsgoknl megengedi a szzalkos rtkek rkldst.] A CSS dobozmodelljnek meghatrozsa szerint a dokumentumfa minden eleme egy ngyszgletes dobozban helyezkedik el:
Minden doboznak van tartalma (content), ez maga az elem, amelyik a dobozt ltrehozza. Az elemek kr szeglyek (keretek, border) rajzolhatak, amelyek vizulis tulajdonsgokkal (szn, vastagsg, vo-naltpus) rendelkeznek.
A tartalom s a szegly kztt tvolsgot, teret hatrozhatunk meg, ez a kitlts (padding). A kitlt-sekre a tartalom httrtulajdonsgai jellemzek, belltani csak a mreteit tudjuk. A szeglyen kvl pedig marg (margin) helyezkedhet el, amelynek segtsgvel szablyozni lehet a szomszdos ele-mektl val tvolsgot. A margk minden esetben tltszak.
A doboz teljes mrett ennek megfelelen a tartalom, a kitlts, a szegly s a marg mreteinek sszege adja meg. A kitlts, szegly s marg vastagsga egyarnt lehet nulla is, ebben az esetben a dobozmret termszetesen a tartalom mretvel lesz azonos.
A CSS alapveten ktfle: soron belli s blokkszint elemet klnbztet meg. Blokkszint az az elem, amelynek vizulis formzsa blokk formjban trtnik (pl. bekezds). A blokkszint elemek dobozai a
Marg (margin) Szegly (border) Kitlts (padding)
Tartalom (content)
5. kpa CSS dobozmodellje
-
14
norml elrendezs sorn a tartalmaz doboz tetejtl lefel egyms utn, fgglegesen helyezkednek el. A dobozok kztti tvolsgot a margin tulajdonsg rtke hatrozza meg. A szomszdos blokk-
dobozok kztti vzszintes margk sszevondhatnak. A blokkszint elemek szlessgt a width tulajdonsg hatrozza meg. rtkei:
(hossz): a szlessg explicit megadsa
(szzalk): a szlessg arnynak megadsa a befoglal dobozhoz kpest
auto: a szlessg ms tulajdonsgok rtkeitl fgg
Az elemek szmra minimlis s maximlis szlessget is megadhatunk. Elbbit a min-width,
utbbit a max-width segtsgvel tudjuk belltani. rtkeik:
(hossz): a doboz fix minimum/maximum szlessge
(szzalk): a doboz minimlis/maximlis szlessge a befoglal dobozhoz kpest
none: (csak a max-width tulajdonsgnl): a doboz szlessge nincs korltozva
A dobozok magassgt a height tulajdonsg szablyozza. rtkei hasonlak a width-nl lertak-
hoz:
(hossz): rgztett magassgot hatroz meg
(szzalk): a magassg arnya a befoglal dobozhoz kpest
auto: a magassg ms tulajdonsgok rtkeitl fgg
A magassg esetben is megadhatunk minimlis s maximlis rtket, erre valk a min-height
s max-height tulajdonsgok. rtkeik:
(hossz): a minimum/maximum magassg konkrt meghatrozsa
(szzalk): a minimum/maximum rtkek arnya a befoglal doboz szlessghez kpest
none: (csak a max-heigth tulajdonsgnl): a doboz magassga nincs korltozva
A minimlis s maximlis szlessgek s hosszsgok meghatrozsval a dobozok mrett bizo-nyos keretek kztt tarthatjuk. A soron belli elemek nem hoznak ltre j blokkot, tartalmuk (pl. kiemelt szvegek, soron belli kpek stb.) a sorokon bell kerl megjelentsre. A befoglal doboz tetejtl kezdve vzszintesen egyms utn helyezkednek el, tvolsgukra az elemek fggleges kitltsei, szeglyei s margi vannak hatssal. A soron belli elemek fggleges igaztsra a vertical-align tulajdonsg szolgl. Lehetsges
rtkei:
baseline: a doboz alapvonalt (annak hinyban az aljt) a sor alapvonalhoz igaztja
-
15
middle: a doboz fggleges kzppontjt a sor alapvonala fltt fl x-magassgba helyezi
sub: a doboz alapvonalt a sor als indexnek pozcijba sllyeszti
super: a doboz alapvonalt a sor fels indexnek pozcijba emeli
text-top: a doboz tetejt a sor betinek tetejhez igaztja
text-bottom: a doboz aljt a sor betinek aljhoz igaztja
top: a doboz tetejt a sordoboz tetejhez igaztja
bottom: a doboz aljt a sordoboz aljhoz igaztja
(szzalk): pozitv rtk esetn felemeli, negatvnl lesllyeszti a dobozt a megadott mrtkkel.
Hivatkozsi alap a line-height tulajdonsg rtke
(hossz): pozitv rtk esetn felemeli, negatvnl lesllyeszti a dobozt a megadott tvolsgra A dobozmodell helyes megjelentse rgta problms terlete a bngszknek. A szoftverek egy r-sze a kitlts- s szeglyszlessget a CSS szemlletnek megfelelen a doboz tartalmn kvl helyezi el, teht azok mrete a tartalomval sszeaddik. Ezzel szemben a bngszk msik csoportja bizo-nyos elemeket gy jelent meg, hogy a kitlts s a szegly a tartalom hatrtl befel helyezkedik el, gy a doboz mrete a tartalom mretvel fog megegyezni. Ez akkor fordul el, ha nem mr ltez ele-met vesznk krl szegllyel, hanem jonnan hozunk ltre egyet, amelynek mrett explicit mdon hatrozzuk meg.
A kvetkez kpen egy ilyen doboz lthat kt klnbz bngszvel megjelentve. A jobb oldali helyesen jelenik meg, mg a bal oldalinl a megadott szlessgen bellre kerl a kitlts s a szegly is. Ebbl kifolylag az egsz doboz lesz olyan szles, mint a msik doboz tartalma nmagban. A do-bozt az albbi stluslappal hoztuk ltre:
#doboz { border: 20px solid;
padding: 30px;
width: 300px;} A hibs doboznl a teljes szlessg a megadott 300 pixel lesz, ebbl lesznek kivonva a kitlts s sze-gly rtkei, gy a szveges tartalomnak 300-(220)-(230)=200 pixelnyi hely marad. A msik doboz esetben a tartalom veszi fel a megadott szlessget, ehhez addnak hozz a tovbbi rtkek, gy vgeredmnyknt 300+(220)+(230)=400 pixelt kapunk.
-
16
Ez a jelensg problmkat okozhat az elemek elhelyezsnl, az oldal szerkezetnek kialaktsnl. Ezrt is clszer honlapunkat tbb bngszn is letesztelni, s hibs mkds esetn eltekinteni a nagy kitlts- s szeglymret alkalmazstl. Nhny pixeles szegly vagy kitlts viszont ltalban nem okoz szrevehet vltozst. Megoldst a krvonalak hasznlata jelenthetne, amely nem foglal helyet, de a bngszk azt sem egyforma mdon tmogatjk.
3. Marg-, szegly- s kitlts-tulajdonsgok
3.1 Margk A margk esetben csak a mret belltsra van lehetsgnk. Erre szolglnak a margin-top,
margin-right, margin-bottom, margin-left s margin tulajdonsgok. Az els
ngy az egyes oldali margkat kln-kln lltja be, mg a legutols egy n. rvid tulajdonsg, amely a ngy marg egyttes belltsra szolgl. A lehetsges rtkek:
(hossz): a margmret explicit megadsa
(szzalk): a marg mrete a befoglal doboz szlessghez kpest
auto: a bngsz ltal automatikusan adott rtk
A margin tulajdonsg egy s ngy kztt tetszleges szm rtket vehet fel. Egy rtk esetn az
mind a ngy oldalra rvnyes lesz. Kt rtk kzl az els a vzszintes (fels s als), a msodik a
6. kp egy blokkdoboz kpe klnbz bngszkben
-
17
fggleges (jobb s bal) oldalakra vonatkozik. Hrom rtk esetn az els a fels oldalhoz tartozik, a msodik a jobb s bal oldalra lesz rvnyes, a harmadik pedig az als oldalra vonatkozik. Ngy rtk sorrendben a fels, a jobb, az als s a bal oldalakat lltja be. (Ezek a meghatrozsok az albb lert padding, border-style, border-color s border-width rvid tulajdonsgokra is
vonatkoznak.) A margk mretnek szablyozhatsga jelentsen megnveli mozgsternket. A HTML nem teszi
lehetv, hogy az egyes elemek egymstl val tvolsgt meghatrozzuk, gy a weblapksztk ko-rbban klnbz kisegt mdszereket alkalmaztak az elemek igaztsra. Jellemzen ilyen fogs volt a fehr szn kpek beszrsa, amelyeknek tvolsgtart szerepk volt, vagy res tblzatcellk elhe-lyezse az elemek kztt.
A 7. kpen egy szveggel krlfuttatott kp eredeti elhelyezkedse, s a megnvelt margk ktfle hatsa lthat. Ilyenkor csak a szveg felli margkat szabad megnvelnk, a tbbit hagyjuk vltozatla-nul, hogy a kp ne bontsa meg a szvegtmb optikai egysgt. Itt is ez trtnt, a kvetkez mdon:
img {margin-right: 20px; margin-bottom: 20px; float: left}
Margmretnek megadhatunk negatv tvolsgot is, ezt azonban az egyes bngszk nem azonos mdon rtelmezik. A negatv rtkek megfelel elem megfelel margjra trtn kiadsa az elemek egymsra csszst, vagy ppen egy elemnek a kpernyrl val kilgst is eredmnyezheti. Ez jl megtervezett esetben igen ltvnyos jelensgeket produklhat, de akr a szndkolatlansg vagy a hibsan megjelen oldal ltszatt is keltheti. A 8. kpen egy olyan plda lthat, ahol a httrben lv szveg a hats rdekben jelents negatv fels margt kapott:
#hatter {margin-top: -60px; } Ugyanez az eredmny elrhet az elem abszolt mdon trtn pozcionlsval is, clszerbb ez
utbbi mdszert vlasztani.
8. kp
negatv marg alkalmazsa
7. kptrkz helyes (kzpen)
s helytelen (jobbra) ltrehozsa margval
-
18
3.2 Margk sszeolvadsa A CSS-ben kt vagy tbb, egymst kvet vagy egymsba gyazott elem egymssal rintkez margi sszevondhatnak. Ennek clja a feleslegesen nagy res terletek ltrejttnek megakadlyozsa, s az optikai-eszttikai egyensly ltrehozsa. Br a CSS specifikci kvetkezetesen a fggleges (vertical) margk sszeolvadsrl beszl, a valsgban ppen a vzszintes margk esetben lehets-ges ez a folyamat. Valsznleg arra gondolhattak a szerzk, hogy az egyms alatt, fgglegesen k-vetkez margk olvadhatnak egybe, innen a sajtos megfogalmazs.
Az egyms alatti vzszintes margk abban az esetben vondnak ssze, ha a dobozok mindegyike a norml elrendezs alapjn lesz elhelyezve.
A margk sszeolvadst jl megfigyelhetjk a 9. kpen. Itt a H1 elemek minden oldalukon hsz pixel
nagysg margt kaptak, de ez a kt elem kztt nem addik ssze negyven pixelre, hanem a margik egymsra csszsa miatt a kztk lv tvolsg is hsz pixeles lesz. A margkat jobban meg tudjuk figyelni kijellt szvegnl, mert ekkor a teljes betsvok vlnak kiemeltt.
3.3 Kitltsek A margkhoz hasonlan a kitlts mrett is szablyozhatjuk. Erre a padding-top, padding-
right, padding-bottom, padding-left tulajdonsgok, valamint a padding rvid tulaj-
donsg szolgl. Mivel a kitlts sznt a tartalom httrtulajdonsgai hatrozzk meg, gy belltani itt is csak a mreteket tudjuk. A margin tulajdonsggal ellenttben itt negatv rtkeket nem adhatunk
meg.
(hossz): a kitltsmret konkrt megadsa
(szzalk): a kitlts mrete a tartalmaz doboz szlessghez kpest
9. kp margk sszeolvadsa
-
19
Ha szvegek (pl. cmek) krl szeglyt is alkalmazunk, clszer a jobb- s bal oldali kitlts mrett kicsit megnvelni. Ez lthat a 10. kpen is. A szegly alaprtelmezetten kzvetlenl a betk kr raj-zoldik ki, s a kiemels helyett inkbb elnyomja a szveget, esetenknt az olvasst is megneheztheti.
3.4 Szeglyek A szeglyek esetben mr nem csak a mretet, hanem a sznt s a stlust is meg tudjuk hatrozni. Eh-hez viszonylag nagy szm tulajdonsg ll rendelkezsnkre.
A szeglyszlessget a border-top-width, border-right-width, border-
bottom-width, border-left-width tulajdonsgok s a border-width rvid tulaj-
donsg lltjk be. Ezek a kvetkez rtkeket vehetik fel:
thin: vkony szegly
medium: kzepes szegly
thick: vastag szegly
(hossz): a szeglyvastagsg explicit megadsa. Nem vehet fel negatv rtket Az els hrom rtk rtelmezse bngszfgg.
A szeglyek sznt a border-top-color, border-right-color, border-bottom-
color, border-left-color tulajdonsgok s a border-color rvid tulajdonsg segt-
sgvel tudjuk befolysolni. Amennyiben egy elem szeglynek nem adunk meg sznrtket, akkor a bngsz az elem color tulajdonsgnak rtkt fogja alkalmazni szeglysznknt.
(szn): a szegly sznnek meghatrozsa
transparent: a szegly tltsz, de van szlessge. Ezt az rtket nem minden bng-
sz tmogatja A szeglystlust a border-top-style, border-right-style, border-bottom-
style, border-left-style tulajdonsgok, s a border-style rvid tulajonsg hatroz-
zk meg. Az albbi rtkeket kaphatjk:
none: nincs szegly. Egyttal a border-width tulajdonsg rtkt 0-ra lltja
10. kp szegly alkalmazsa kitlts nlkl (balra)
s kitltssel (jobbra)
-
20
hidden: ugyanaz, mint a none (a tblzatok elemeinek kivtelvel, ahol a szeglytkz-
sek elkerlsre szolgl)
dotted: pontozott vonal
dashed: szaggatott vonal
solid: folyamatos vonal
double: kt folyamatos vonal; a szeglyszlessg a kt vonal s a kztk lv tr sszege
groove: a keret gy nz ki, mintha a vszonba lenne mlytve
ridge: a keret gy nz ki, mintha kiemelkedne a vszonbl
inset: az egsz doboz gy nz ki, mintha a vszonba lenne mlytve
outset: az egsz doboz gy nz ki, mintha kiemelkedne a vszonbl
Az egyes szeglystlusokat a klnbz bngszk eltr mdon jelentik meg. Ez fleg az utols ngy stlusra igaz, amelyek elmletileg a legltvnyosabb eredmnyt produklnk. A gyakorlatban azonban ez nem mindig valsul meg, hasznlatuk taln ezrt sem terjedt el.
3.5 Rvid szeglytulajdonsgok A border-top, border-right, border-bottom s border-left segtsgvel az
egyes oldalak szeglyeinek klnbz tulajdonsgai egy lpsben llthatak be. A border tulajdon-
sg hasznlatval pedig az sszes oldal egyszerre formzhat. A kvetkez rtkeket adhatjuk:
(hossz): a szeglyszlessgnl megadhat rtkek
(stlus): a szeglyek stlusnl felsorolt rtkek
(szn): a szeglyszneknl elfogadott rtkek
11. kp hromdimenzis hats szeglyek
klnbz bngszkben
-
21
A szeglyek tlzott mrtk alkalmazsa inkbb rt, mint hasznl egy weboldal kinzetnek. Szvegk-zi kiemelsre lehetleg ne hasznljuk ket, mert nem mutat jl. Nagyobb egysgeknl viszont dekorci-s vagy elvlaszt cllal hasznos lehet valamilyen szegly hasznlata. Ilyenkor trekedjnk az oldal stlushoz sznben s megjelensben illeszked vonalak megvlasztsra. A vastag, harsny szeg-lyek ltalban nem szpek, vkonyabb s visszafogottabb szeglyek alkalmazsval viszont ltvnyo-sabb tehetjk oldalunkat.
rdekes eredmnyeket tudunk elrni, ha szeglyeket csak egyes oldalak mentn helyeznk el. Kny-vek esetben szokott elfordulni, hogy kiemelni kvnt hosszabb szvegrsz mellett fggleges cskot tallunk, a szveg alhzsa vagy dlt szedse helyett. Ezt oldalunkon gy hozhatjuk ltre, hogy csak a bekezds bal oldali szeglynek adunk rtket. Ha a vonalat a szvegtmbn kvl, a margn kvnjuk elhelyezni, akkor a margin tulajdonsg kapjon minimlis negatv rtket, az albbi pldhoz hason-
lan: .kiemelt {border-left: solid 3px black; padding-left: 3px; margin-left: -6px}
Mivel ebben az esetben a margin rtke a border s a padding rtknek sszege, a
kiemelt szveg szle a tbbi bekezds bal oldalval fog egy vonalba esni. A kiemelt bekezdst formzhatjuk a tbbitl eltren, kisebb szlessggel is, ebben az esetben a
margin rtke pozitv lesz. Ilyenkor a kiemelst jelz vonal vastagsga nagyobb is lehet: .kiemelt2 {border-left: solid 5px black; padding-left: 4px; margin-left: 12px}
A kt formzs eredmnye az 12. kpen lthat:
A szeglyek alkalmazsval klnbz alhzsi effektusokat is elidzhetnk. Egy ilyen lthat a 13. kpen, ahol a cm alatti vonal kilg a kpernyrl. A hatst a kvetkez utastssal rtk el:
H3 {border-bottom: solid 1px teal; margin-left: -10px; padding-left: 20px; width:30%}
12. kpkiemels ltrehozsa
szegllyel
-
22
3.6 Krvonalak A CSS-ben a szeglyek mellett krvonalat is rajzolhatunk az egyes objektumok kr. A szegllyel szemben a krvonal nem foglal helyet, gy annak dinamikus megjelentse vagy eltntetse nem vl-toztatja meg az elemek pozcijt, az oldal elrendezst. A krvonalak az elem doboza fltt, az esetle-gesen aljuk kerl tbbi elemet eltakarva jelennek meg.
A krvonalaknak nem kell ngyszgletesnek lennik. Ez a gyakorlatban azt jelenti, hogy egy tbb sor-ba trdelt elemnl a vonal nem a befoglal ngyzetet mutatja, hanem az egyes rszeket kzvetlenl krlveszi. Radsul a kerettel ellenttben a vonalak nem lesznek nyitottak a sorok elejn s vgn. Sajnos a szgletestl eltr krvonalat nem lehet ltrehozni: a (kr alak) rdigomb krl is ngyzetes keret jelenik meg, az image map hasznlatnl pedig semmilyen alak kijellst nem tudunk krvonallal elltni, a specifikci kijelentsvel ellenttben.
Mivel a krvonal nem felttlenl tglalap alak, gy nincs lehetsg az egyes oldalak eltr vastags-gnak vagy stlusnak belltsra, az egsz krvonal megjelenst egysgesen kell szablyoznunk. A vonal sznt az outline-color segtsgvel hatrozhatjuk meg. Az adhat rtkek:
(szn): a krvonal sznnek meghatrozsa
invert: a vonalba es pixelek eredeti sznk inverzt veszik fel, gy a krvonal a httr sz-
ntl fggetlenl mindenflekppen ltszani fog A stlus belltsnak mdja az outline-style tulajdonsggal trtnik. Itt a szeglyeknl hasz-
nlt rtkeket tudjuk megadni, a hidden kivtelvel. A vonal vastagsgt az outline-width
tulajdonsg szablyozza, a lehetsges rtkek megegyeznek a border-width esetben haszn-
latosakkal.
13. kpalhzs helyettestseszegly hasznlatval
-
23
A krvonalak jl hasznlhatak lennnek arra, hogy folyamatosan kzlni tudjuk a felhasznlval, az oldal melyik eleme van fkuszban. Mivel a krvonal nem foglal helyet, gy a fkusszal egytt trtn mozgatsa nincs hatssal az oldal elrendezsre, viszont mindig rteslnk a lehetsges felhasznli beavatkozs aktulis pozcijrl. Sajnos ezt a tulajdonsgot csak a bngszk egy rsze tmogatja, gy egyelre nem tudjuk kihasznlni a benne rejl lehetsgeket.
4. A felhasznli fellet
4.1 Sznek
Egy elem szveges tartalmnak sznt a color tulajdonsggal tudjuk belltani.
(szn): a szn explicit megadsa Az rtkknt megadhat szn tbbfle mdon hatrozhat meg. Bizonyos alapsznek esetben megad-hatjuk a szn nevt, termszetesen angol nyelven. A HTML 4.0 specifikci 16 ilyen kifejezst tartalmaz: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, yellow. Sok jabb bngsz egyb sznek s rnyalatok (pl.
azure, brown, vagy darkBlue, lightSteelBlue) elnevezs szerinti hasznlatt is lehet-
v teszik, de a W3C ajnlsai ezeknek az elnevezseknek az alkalmazst nem tmogatjk. [A CSS2.1 bevezette egy jabb sznrtk, az orange hasznlatt.]
A szneket meghatrozhatjuk RGB kdjuk alapjn is. A 0255-ig terjed rtkek megadhatk tzes s tizenhatos szmrendszerben, valamint szzalkos formban egyarnt. A hexadecimlis rtket egy #
jelnek kell bevezetnie, a msik kt esetben az rgb kifejezs utn zrjelben kvetkeznek az rtkek,
vesszvel elvlasztva. Ennek megfelelen az albbi kifejezsek egyenrtkek: H1 {color:blue} H1 {color:rgb(0,0,255)} H1 {color:rgb(0%,0%,100%)} H1 {color:#0000ff} H1 {color:#00f} Amint az utols pldban is lthat, az egyes hexadecimlis sznrtkek lervidthetek, ha egy-egy sznt kt azonos karakter hatroz meg.
-
24
4.2 Httrtulajdonsgok Az elemek esetben azok httert is meghatrozhatjuk: kpet vagy httrsznt adhatunk meg.
A dobozmodell alapjn httren csak a tartalom s a kitlts terletnek httert rtjk. A szegly sz-nt (s stlust) a szeglytulajdonsgok segtsgvel tudjuk belltani. A margk tltszak, ezrt rajtuk a szldoboz httere ltszik t. A httrszn meghatrozst a background-color tulajdonsg
belltsval vgezhetjk el. rtkei:
(szn): httrszn megadsa
transparent: tltsz httr. Ez a tulajdonsg alaprtelmezett rtke
Sokan nem adnak egysges, elre megtervezett ltvnyt, dizjnt honlapjuknak, hanem csak egyes elemek (szvegek, linkek) fbb tulajdonsgait lltjk be, vagy mg azokat sem. A httrrel pedig egyltaln nem trdnek, holott az fontos sszetevje a kpernyn megjelen dokumentumoknak mr csak azrt is, mert ez teszi ki az oldal felletnek legnagyobb rszt. A mai monitorok s szoftverek olyan klst biztostanak a dokumentumok szmra, amelyek a nyomtatott anyagokhoz teszik hasonl-v azokat: fehr httren kismret, vkony vonal betket jelentenek meg. A tl vilgos, nagy fny-erej httr hosszabb olvass esetn frasztja a szemet, amit a httr s a betk les kontrasztja is erst. Ebbl kifolylag clszer a httrnek valamilyen tnust adni mr egy halvnyabb pasztell r-nyalat is sokkal felhasznlbartabb teheti oldalunkat. Ha egy elem httereknt kpet kvnunk megadni, azt a background-image tulajdonsg segt-
sgvel tehetjk.
(url): a httrkp abszolt vagy relatv elrsi tvonala
none: nincs httrkp
Httrkp alkalmazsa esetn is rdemes valamilyen httrsznt megadni. Ha a kp valamilyen okbl nem rhet el, akkor a bngsz ezt a sznt fogja httrknt megjelenteni.
A rendben megjelen httrkp a httrszn fltt helyezkedik el, teht eltakarja azt. Ha a httrkp-nek vannak tltsz rszei, akkor ezeken a helyeken a httrszn lesz lthat. Ezt figyelembe kell ven-nnk, ha tltsz htter (pl. GIF) kpekkel dolgozunk, de mint lehetsget, szndkosan is kihasznl-hatjuk bizonyos hatsok elrse rdekben.
A httrkp megjelenst tbbfle mdon is szablyozhatjuk. A kp ismtldst a background-
repeat tulajdonsg hatrozhatja meg. A kvetkez rtkeket adhatjuk:
-
25
repeat: a kp vzszintesen s fgglegesen egyarnt ismtldik, a htteret mozaikszeren
bebortva. Ez az alaprtelmezett rtk
repeat-x: a kp csak egy vzszintes svban ismtldik
repeat-y: a kp egy fggleges svban ismtldik
no-repeat: a httrkp egyetlen pldnyban, ismtls nlkl kerl megjelentsre
Szveges oldalon httrkpet alkalmazni elgg kockzatos. A teljes htteret bebort kp megnehezti, esetleg lehetetlenn is teheti a fltte elhelyezked szveg olvasst. Ez fokozottan igaz a kisebb m-ret, gyakrabban ismtld kpekre. A jelensg ellen gy vdekezhetnk, hogy a kpet elhalvnytjuk, hiszen gysem illusztrcinak, hanem csak dekorcinak sznjuk. Ilyenkor is meg kell azonban fontol-nunk a betmret nvelst vagy a szveg sznnek megvltoztatst a jobb olvashatsg rdekben.
Nemcsak az oldalhoz, hanem brmilyen elemhez rendelhetnk httrkpet. Ezekre az esetekre is iga-zak a fentebb lertak, de itt azrt tbb lehetsgnk van: ami egy egsz oldalon keresztl zavar lehet, annak esetleg figyelemfelkelt, kiemel hatsa van pl. egy cmsor esetben.
Httrkp esetn azt is megadhatjuk, hogy az rgztett legyen, vagy a dokumentummal egytt grdl-jn. Ezt a background-attachment tulajdonsg szablyozza. rtkei:
fixed: a httr mozdulatlan marad, amikor a dokumentum tartalmt grdtjk felette
scroll: a httr egytt mozog a tartalommal A httrkp kezdeti pozcijt a background-position tulajdonsg hatrozza meg. Lehets-
ges rtkei:
(szzalk) (szzalk): a kp szzalkrtkkel megadott pontjt a kitltend terlet azonos sz-zalkrtk pontjhoz illeszti
(hossz) (hossz): a kp bal fels sarknak a kitltend terlet bal fels sarktl szmtott eltol-sa, mrtkegysgben megadva
top: fggleges igazts a terlet tetejhez
bottom: fggleges igazts a terlet aljhoz
center: fggleges s vzszintes igazts kzpre
left: vzszintes igazts a terlet bal oldalhoz
right: vzszintes igazts a terlet jobb oldalhoz
-
26
A top, bottom, left s right rtkek nmagukban kiadva az oldalak kzephez, egymssal
megfelel mdon prostva a klnbz sarkokba helyezik a httrkpet. [A CSS2.1 lehetv teszi a klnbz tpus rtkek (pl. top 25%) kombinlst.] A httr klnbz tulajdonsgai egyszerre, a background rvid tulajdonsg segtsgvel is bel-
lthatak. Ez trtnt a 14. kpen lthat oldal esetben is, ahol a kvetkez stlusdefincit alkalmaztuk: body {background: black url("paris2.jpg") 15px 40px no-repeat fixed; margin-left: 200px; color: #DDD}
Az oldal httert feketre lltottuk, de egyttal httrkpet is meghatroztunk. A kpet pozcionltuk, utna letiltottuk brmilyen irny ismtldst, majd rgztettk a lttrhez, aminek eredmnyekppen az oldal grgetsekor a kp egy helyben marad. Vgl az oldal tartalmnak bal margjt akkorra n-veltk, hogy a szveg knyelmesen s arnyosan elfrjen a kp mellett, a betszn pedig egy vilgos szrke rnyalatot kapott, az ers kontraszt elkerlse rdekben.
4.3 Rendszersznek hasznlata A color s background-color tulajdonsg esetben nemcsak a hagyomnyos mdon (nv
vagy RGB-rtk) megadott szneket alkalmazhatjuk: arrl is gondoskodhatunk, hogy lapunk sznei al-kalmazkodjanak a felhasznl szmtgpn kialaktott grafikus krnyezethez. Ebben az esetben a bngsz a (belltott vagy alaprtelmezett) rendszerszneket hasznlja az egyes elemek megjelent-sre. Ezek a kvetkezk lehetnek:
14. kp httrtulajdonsgok belltsnak
hatsa egy oldalon
-
27
activeBorder: az aktv ablak keretnek szne
activeCaption: az aktv ablak cmsornak (httr)szne
appWorkspace: a tbbdokumentumos alkalmazsok httrszne
background: az asztal httrszne
buttonFace: a nyomgombok felletnek szne
buttonHighlight: a nyomgombok fnyes leinek szne
buttonShadow: a nyomgombok rnykos leinek szne
buttonText: a nyomgombok betszne
captionText: a cmsorok betszne, valamint a grdtsv nyilainak s az ablak
mretezgombjainak rajzszne
grayText: a szrktett (letiltott) szvegek betszne. Ha az egyenletes szrke szn nem t-
mogatott, akkor a #000 (=fekete) rtket kapja
highlight: a kivlasztott elemek httrszne
highlightText: a kivlasztott elemek szvegszne
inactiveBorder: az inaktv ablak keretszne
inactiveCaption: az inaktv ablak cmsornak httrszne
inactiveCaptionText: az inaktv ablak cmsornak betszne
infoBackground: az elugr informcis ablak httrszne
infoText: az elugr informcis ablak betszne
menu: a menk httrszne
menuText: a menk szvegszne
scrollbar: a grdtsv szrke terlete
threeDDarkShadow: a hromdimenzis kpernyelemek rnykos leinek sttebb szne
threeDFace: a hromdimenzis kpernyelemek felletnek szne
threeDHighlight: a hromdimenzis kpernyelemek fnyes leinek vilgosabb szne
threeDLightShadow: a hromdimenzis kpernyelemek fnyes leinek sttebb szne
threeDShadow: a hromdimenzis kpernyelemek rnykos leinek vilgosabb szne
window: az ablakok httrszne
windowFrame: az ablakok keretszne
windowText: az ablakok szvegszne
-
28
A fentieknek megfelelen pldul a * {color: windowText} utasts hatsra az oldal minden szveges eleme azt a sznt fogja felvenni, amelyet a felhasznl az ablakok szvegre belltott.
Ezeknek az rtkeknek az alkalmazsval nem rt vatosnak lenni, mert br a felhasznlk nagy r-sze az alaprtelmezett belltsokat hasznlja, nhnyan azonban olyan egyedi sznkombincikat hozhatnak ltre, amelyek lvezhetetlenn tehetik honlapunkat. Meghatrozott esetekben azonban lt-vnyos lehet a fenti rtkek hasznlata, erre a font tulajdonsgnl lthatunk majd pldt.
4.4 A bngszablak sznei A CSS specifikci nmagban nem ad arra lehetsget, hogy a weboldalon kvli terletek tulajdons-gait, pldul a rendszerszneket meghatrozzuk. Azonban mra a CSS nyelv is eljutott ahhoz a fzis-hoz, amelyhez nhny vvel korbban a HTML: az egyes bngszprogramok fejleszti sajt utast-sokat, kifejezseket vezetnek be, amelyeket termszetesen csak az ltaluk ksztett bngszk fogad-nak el. A Microsoft ilyen jtsa volt a grdtsv szneinek megvltoztatsa, amelyet csak az Internet Explorer tmogat, az 5.5 verzijtl kezdve.
Ha a grdtsv sznhatst egysgesen szeretnnk megvltoztatni, pl. az alaprtelmezett szrke sznek helyett a kk klnbz rnyalataiban akarjuk ltni, akkor elg a scrollbar-base-
color tulajdonsgot hasznlnunk, amely a sv minden elemhez a kvnt alapszn megfelel rnya-
latt rendeli hozz. Ha ezt a tulajdonsgot nmagban hasznljuk, akkor clszer olyan sznt vlaszta-ni, ami nemcsak jl mutat, de a hromdimenzis hatsok is rvnyeslnek mellette.
Lehetsgnk van a grdtsv rszeinek kln-kln trtn mdostsra is. A csszka s a gom-bok felsznt a scrollbar-face-color, a peremkn lv vilgos s rnykolt terletek sznt
a scrollbar-3dlight-color, scrollbar-highlight-color, scrollbar-
shadow-color s scrollbar-darkshadow-color, a gombokon lv nyilakat a
scrollbar-arrow-color, a csszka tvonalt pedig a scrollbar-track-color
tulajdonsgokkal hatrozhatjuk meg. A megadhat rtkek megegyeznek a color tulajdonsgnl
hasznlhatakkal.
15. kp a grdtsv szneinek illesztse az oldalhoz
-
29
Ha a bngszablak grdtsvjra szeretnnk alkalmazni a vltozsokat, akkor a stlusmeghatrozs sorn a BODY elem tulajdonsgaiknt kell megadnunk ket. Lehetsgnk van azonban a formok
egyik fajtja, a szvegbeviteli mez esetben is ugyanerre, ekkor a TEXTAREA elemhez kell trsta-
nunk a tulajdonsgokat. Mint minden hasonl esetben, itt is felmerl a krds, hogy rdemes-e hasznlni olyan tulajdonsgo-
kat, melyeket a bngszk egy rsze nem tmogat. ltalban nem clszer, hiszen az oldalkp stabili-tsa fontos kvetelmny, amelyhez lehetsg szerint ragaszkodnunk kell. A fenti tulajdonsgok viszont a tbbitl eltr mdon az oldal megjelensre, elrendezsre nincsenek hatssal. Ms bngszkben nem okoznak hibs mkdst: a tbbi szoftver egyszeren figyelmen kvl hagyja a grdtsvra vonat-koz rszeket. Ha radsul a felhasznli statisztikkbl az derl ki, hogy a ltogatk tlnyom rsze Internet Explorert hasznl, akkor nyugodtan alkalmazhatjuk a grdtsvok szneinek megvltoztatst.
4.5 A kurzor A cursor tulajdonsg segtsgvel meghatrozhatjuk, hogy az egrmutat milyen alakot vegyen fel
az egyes elemek, vagy akr az egsz oldal fltt. rtkei:
auto: a kurzor az aktulis krnyezetnek megfelelen jelenik meg
crosshair: a kurzor szlkereszt formj lesz
default: a platform alaprtelmezett kurzora. Gyakran nyl formj
pointer: a kurzor a linkek fltt megjelen alakjt veszi fel
move: a mozgathat elemeket jelz kurzorvltozat
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize,
s-resize, w-resize: a kurzor az tmretezskor megjelen nyilak alakjt veszi fel. A
betk az gtjaknak megfelel oldalakat jelzik
text: a szveg felett megjelen kurzor. Gyakran I formj
wait: a vrakozst jelz kurzor. Gyakran ra vagy homokra formj
help: a segtsgkrs lehetsgt jelz kurzot. Gyakran krdjel vagy eszkztipp-ablak alak
[A CSS2.1 kiegszti a sort a progress rtkkel, amely azt jelzi, hogy egy program dolgozik,
de kzben lehetv teszi a felhasznli beavatkozst. Gyakran egy forg labdaknt, vagy nyl melletti raknt kerl megjelentsre.]
-
30
A szmtalan kurzortpus hasznlatnak lehetsge elgg kibvti eszkztrunkat. Nem szabad azon-ban tlzsokba esnnk, s nem kerlhetnk meg bizonyos konvencikat.
Ha a kurzor nem vltoztatja meg alakjt a linkek fltt, akkor a felhasznlk egy rszt ez biztosan megzavarja, az oldal kezelst pedig megneheztheti. Ha az oldal alaprtelmezett kurzornak a wait
rtket adjuk, akkor a megjelen homokra azt a benyomst kelti, mintha a lap mg nem tltdtt volna le teljesen, a sokig tltd oldalakrl pedig ltalban ellpnek a felhasznlk.
5. Bet- s szvegtulajdonsgok
5.1 Betk formzsa A betk s szvegek terletn a CSS jelents elrelpst biztost a HTML lehetsgeihez kpest. Az ide tartoz tulajdonsgok hasznlatval ignyesebb, ltvnyosabb, de egyttal egyszerbb felpts oldalakat tudunk ltrehozni.
A bettpust a font-family tulajdonsg segtsgvel llthatjuk be. Ktfle rtket adhatunk
meg szmra, mindkettbl egyszerre tbbet is felvehet:
(fontcsald): valamilyen konkrt betcsald elnevezse
(ltalnos csald): a CSS t ilyen tpust klnbztet meg: serif, sans-serif,
cursive, fantasy s monospace
Tbb bettpus szimultn megadsnak lehetsgre azrt van szksg, mert a weblap szerzje nem tudhatja, hogy a munkjt megtekint felhasznlnak milyen fontok llnak rendelkezsre. Ezt a lehet-sget ezrt rdemes is kihasznlni, odafigyelve arra, hogy a betcsaldok felsorolsnl egymshoz hasonl megjelens fontok (pl. az Arial mell Tahoma s Verdana) neveit adjuk meg, hogy a ltrejv oldalkp ne trjen el sokban az eredetitl.
Az ltalnos csaldot arra az esetre clszer megadni, ha a felhasznlnak semmilyen font nem ll rendelkezsre a felsorolt listbl. Ilyenkor a bngsz megkeresi az adott tpusba tartoz alaprtelme-zett fontot, s azzal jelenti meg a tartalmat. Az ezekbe tartoz egyes jellegzetes betk sszehasonl-tskppen a 16. kpen lthatak.
A serif (=talpas) fontok betszrait talp, de legalbb vonal zrja le. A betk klnbz szless-
gek, a betvonalak vastagsga is gyakran vltozik. Ezek a klasszikus latin betk, amelyeknek legis-
-
31
mertebb mai kpviseli pl. a Times New Roman vagy a Garamond, de ms rstpusoknl (grg, cirill stb.) is elfordulnak ilyen vltozatok.
A sans-serif (=talp nlkli) fontok szrait nem zrjk le talpak. A betszrak azonos vastags-
gak, de a betk szlessge klnbz. Ilyen jelleg fontok minden rstpusra megtallhatak (pl. Arial Unicode MS).
A cursive betk a kzrst utnozzk, a karakterek egymssal sszekapcsoldnak, sszernek.
Az rskp gyakran dlt, emiatt a kurzv kifejezst a nyomdszatban a dlt betk megnevezsre is hasznljk.
A fantasy betk dekoratvak, dsztettek, de rzik a betalakokat.
A monospace fontok jellegzetessge, hogy karaktereik azonos szlessgek, az rgp betihez
hasonlan.
A fenti feloszts alapveten a latin betkre, illetve a vele rokon rstpusokra (grg s cirill) rvnyes. A japn sztagrsoknl erltetett lenne talpas s talp nlkli vltozatokrl beszlni, mg az arab rs kiz-rlag kurzv jelleg betkbl ll, vltakoz s lland vonalvastagsg vltozataiban egyarnt. Miutn meghatroztuk a felhasznland fontokat, sor kerlhet azok megjelensi adottsgainak bellt-sra. A stlust a font-style segtsgvel tudjuk belltani. rtkei:
normal: a fontok alaprtelmezett stlusa. Ez ltalban az ll, norml betalak: csak nhny
font tartalmaz eleve dlt karaktereket, jobbra a kzrst utnz bettpusok
italic: a fontkszletben lv szablyos dlt bet, amelyet tervezk ksztenek el, figyelem-
be vve s kikszblve a dlsbl ered torzulsokat, arnytalansgokat. Egyes betk for-mja jelentsen eltrhet a norml s dlt vltozatban, pl.: a s a, f s f stb.
oblique: A szmtgp ltal mestersgesen ltrehozott alak, amely az ll betk megdnt-
svel, mindenfle korrekci nlkl jn ltre
16. kp a CSS ltal meghatrozott betcsaldok
sszehasonltsa
-
32
A bngszk az utols kt rtket nem klnbztetik meg. Ha egy betkszlet tartalmaz dlt (italic) vltozatot, akkor mindkt esetben az kerl megjelentsre. Ennek hinyban pedig programonknt s bettpusonknt eltr mdon reaglnak: vagy mindkt rtkre a megdnttt (oblique) vltozatot hozzk ltre, vagy egyszeren ms fonttal jelentik meg a szveget. A font-variant hasznlatval a norml s kiskapitlis alakok kzl vlaszthatunk. Ennek meg-
felelen kt rtket vehet fel:
normal: norml betalak
small-caps: kiskapitlis vltozat
A kiskapitlis forma hagyomnyos eleme az eurpai tipogrfinak. Kismret nagybett jelent, kicsit megvltozott arnyokkal. Egyrszt a nevek kiemelsre hasznljk, mert kevss bontja meg a sor kpt, mint a nagybet. Msfell pedig az inicil utn kvetkez kt-hrom szt szoktk kiskapitlissal szedni, hogy ne legyen tl les az tmenet a nagymret kezdbet s a kisbetk kztt. Ha a fontban nem ll rendelkezsre kiskapitlis betvltozat (mrpedig ltalban nem szokott), akkor a bngsz ltrehozza azt a nagybetk lekicsinytsvel.
A font-variant tulajdonsg csak olyan fontokra van hatssal, amelyek megklnbztetnek kis-
s nagybetket, mint pl. a latin rs. Az egyalak bcknl (ilyen a vilg legtbb rsa) nem eredm-nyez lthat vltozst. (A kis- s nagybet kztti klnbsg nem a mreten alapul: a nagybetk ke-zetek s mellkjelek nlkl kt vzszintes segdvonal kz rhatak, mg a kisbets bchez a fel- s lelg betszrak miatt ngy segdvonalra van szksg.)
A betk slyt (vastagsgt, sttsgt) a font-weight tulajdonsggal tudjuk megvltoztatni. r-
tkei:
100, 200, 300, 400, 500, 600, 700, 800, 900: egy arnyos sklt hatroznak meg,
ahol minden rtk legalbb annyira stt, mint az elz
normal: a norml vastagsg font, a fenti skln a 400-nak felel meg
bold: flkvr bet, a skla 700-as rtknek felel meg
bolder: a fontban lv kvetkez sttebb slyrtket hatrozza meg, vagy ennek hiny-
ban a kvetkez sttebb szmrtket rendeli a fonthoz, amely vltozatlan marad. Pldul ha egy font csak norml s flkvr betket tartalmaz, akkor a norml (400-as) betk a bolder
hatsra flkvr (700-as) slyak lesznek. A flkvr betk nem vltoznak, csak a hozzjuk rendelt rtk lesz 700 helyett 800
-
33
lighter: a fontban lv kvetkez vilgosabb slyrtket hatrozza meg, vagy ennek hi-
nyban a kvetkez vilgosabb szmrtket rendeli a fonthoz, amely vltozatlan marad A fenti skla rtkeit ltalban nem tudjuk kihasznlni, hiszen a legtbb font csak 400-as (norml) s 700-as (flkvr) vastagsg betket tartalmaz. A kztes rtkeket hiba adjuk meg, a bngsz nem hozza ltre mestersgesen a kvnt alakokat. Ez tulajdonkppen nem is problma, ugyanis az algorit-musok ltal kialaktott formk nem tl eszttikusak, kisebb betmretnl pedig az olvashatsguk is lecskkenhet. A font-stretch tulajdonsg segtsgvel egy fontcsald norml, sszenyomott vagy szthzott
vltozatait hatrozhatjuk meg. rtkei:
normal: a fontcsald norml (alaprtelmezett) szlessg beti
ultra-condensed, extra-condensed, condensed, semi-condensed,
semi-expanded, expanded, extra-expanded, ultra-expanded: ebben a
sorrendben a klnbz szlessg alakokat jellik a legkeskenyebbtl a legszlesebbig
wider: a kvetkez rendelkezsre ll szlesebb vltozatot jelenti meg
narrower: a kvetkez rendelkezsre ll keskenyebb vltozatot eredmnyezi
A font-weight-hez hasonlan itt is csak a rendelkezsre ll rtkeket tudjuk felhasznlni, a
bngsz nem lltja el a tbbi betformt. [A font-stretch tulajdonsg a CSS2.1-ben megsznik] A betk mretezsre a font-size tulajdonsg szolgl. Lehetsges rtkei:
(hossz): a fontmret abszolt megadsa
(szzalk): a fontmret relatv megadsa
xx-small, x-small, small, medium, large, x-large, xx-large: egy n-
vekv sklt hatroznak meg, ahol a szorz 1,2.
larger: megnveli a betmretet 1,2-szeresre. Nem csak a fenti skla vgs rtkig
hasznlhat, hanem elmletileg tetszleges nagytst tesz lehetv
smaller: cskkenti a fontmretet a fenti szorz rtkvel
A CSS egyarnt lehetsget ad a hosszsgrtkek abszolt s relatv mdon trtn megadsra. Abszolt rtkadskor valamilyen mrtkegysgben hatrozzuk meg a szksges mretet (jelen eset-
-
34
ben a font mrett), relatv rtkek hasznlatakor pedig egy msik hosszsgegysghez viszonytva. A lehetsges abszolt mrtkegysgek a kvetkezk:
in: hvelyk (inch) = 2,54 cm
cm: centimter
mm: millimter
pt: pont = 1/72 hvelyk
pc: pica = 12 pont
A pont a nyomdszatban hasznlatos mrtkegysg. Eredeti rtke Eurpban a mter 2660-ad rsze, kerektve 0,376 mm, az angol-amerikai rendszerben pedig a hvelyk 72-ed rsze, azaz 0,353 mm. Mi-vel a szmtgpek rtelemszeren az amerikai rendszert kvetik, radsul a monitorokat rgen gy gyrtottk, hogy egy hvelykre 72 pixel jutott, gy a szmtstechnika trhdtsval ez a vltozat egyre szlesebb krben terjed el, mra mr szinte egyeduralkodv vlt.
A kvetkez defincik azonos betmretet eredmnyeznek: body {font-size: 4.2mm} body {font-size: 12pt} body {font-size: 1pc}
A relatv mrtkegysgek az albiak lehetnek:
em: az aktulis font betmagassga
ex: az aktulis font kisbetinek magassga
px: pixel, a megjelent eszkz kppontja
Az em (vagy M) hasznlata a rmai korbl szrmazik, ahol a feliratok M betje egy ngyzetbe rajzolhat volt, vagyis a szlessge megegyezett a magassgval s a betkszlet magassgval is, hiszen a rmaiak felirataikon nem hasznltak kisbett, amelyek alul vagy fell kilghattak volna a sorbl. A betmagassgot azta is hagyomnyosan em-nek nevezik, br most mr a kisbetk lelg betszrtl a felnyl betszrakig tart teljes magassgot jelli, amely gy mr nem egyezik meg az M szless-gvel.
Az ex (azaz x-) tvolsg elmletileg a kisbetk alapvonaltl mrt magassga. A gyakorlatban ez a la-pos tetej betkre vonatkozik (mint pl.a nvad x), a kerek betk ugyanis optikai korrekcit tartalmaz-nak, vagyis kicsit magasabbak ennl.
-
35
Norml (12-14 pontos) betmret esetn nem clszer az x-magassgot szvegrszek mretezsre hasznlni, hiszen pl. egy 12 pontos Times New Roman font x betje kb. 1,9 mm magas, ami 5,5 pont mret szveget eredmnyez de mivel ez a teljes j betsv magassga, a ltrejv kisbetk 0,9 mm magasak lesznek, vagyis gyakorlatilag olvashatatlanok.
Az albbi mretek megegyeznek: H1 {font-size: 1.2em} H1 {font-size: 120%}
Lehetsgnk van tbb bettulajdonsg egy helyrl trtn belltsra. Ezt a font rvid tulajdonsg
segtsgvel tudjuk megtenni. A tulajdonsg hasznlata elszr visszalltja az sszes bettulajdonsgot alaprtelmezett llapotba,
az albb felsoroltakon kvl a font-stretch tulajdonsgot is. Utna az itt definilt tulajdonsgok
felveszik a hozzjuk rendelt rtkeket, a font-stretch rtkt kln kell belltani.
(font-style), (font-variant), (font-weight), (font-size), (line-height), (font-family): az egyes nll tulajdonsgok rtkeinek felsorolsa
caption: a feliratozott vezrlelemeknl (gombok, legrdl menk) hasznlt font
icon: az ikonoknl hasznlt font
menu: a menkben hasznlt font
message-box: a prbeszdablakokon hasznlt font
small-caption: a kismret feliratozott vezrlelemeken hasznlt font
status-bar: az ablak llapotsorban hasznlt font
Mint lthat, az egyes fonttulajdonsgok rtke mellett a font megkaphatja konkrt rendszerfontok
jellemzit is. Ezeket nincs mdunk kln-kln belltani, a font tulajdonsg azonban rtket ad az
egyedi tulajdonsgoknak is, melyek mr mdosthatak. Az albbi plda a menkn hasznlatos fontot teszi az oldal alaprtelmezett bettpusv, amely n-
magban nem mdosthat. Utna ltrehozunk egy osztlyt, amely az egsz tulajdonsgcsoportot rk-li, s rszben meg is vltoztatja.
body {font: menu} .kk {font-variant: small-caps}
A rendszerfontok s -sznek kzs hasznlatra lthatunk pldt a 17. kpen. Az oldal kivlaszt--menje ugyanazokat a tulajdonsgokat kapja, mint a bngszablak sajt meni, alkalmazkodva ezzel a felhasznli krnyezethez. Az eredmnyt a kvetkez kdrszletekkel rtk el:
-
36
.me {font: menu; color: menuText; background: menu} ()
A CSS2 arra is lehetsget ad, hogy ne csak a felhasznl szmtgpn rendelkezsre ll fontokat hasznljk fel a bngszk. Az @font-face tulajdonsg segtsgvel meghatrozhatjuk egy tet-
szleges font lelhelyt az Interneten, ahonnan a bngsz letltheti azt a pontos megjelentshez. Az albbi pldban elbb megadunk egy fontot, majd definiljuk annak helyt, vgl a H1 elem bettpu-
saknt hatrozzuk meg. @font-face {font-family: "Prime Regular"; src: url("http://www.fontok.hu/prime.ttf")} H1 {font-family: "Prime Regular", serif}
Az ilyen mdon begyazott fontok alkalmazsval nagyon ltvnyos eredmnyt rhetnk el, hiszen az oldal tervezsekor brmilyen bet- vagy rstpust felhasznlhatunk. A fontfjlokban, amelyek akr egyediek, erre a clra ksztettek is lehetnek, nemcsak betk, hanem grafikai- s dsztelemek is he-lyet kaphatnak, ezzel mg tovbb gazdagtva a lapok kinzett.
Ha a fontok s a honlap ugyanazon a szerveren tallhat, akkor az oldal helyes megjelentse val-sznleg nem fog gondot okozni a bngsznek. Ellenkez esetben viszont megtrtnhet, hogy a fontok trolsra szolgl webhely nem rhet el, pl a hlzat egyes szegmensei leterheltek. Ekkor a bng-sz a font-family tulajdonsgban megadott tovbbi bettpusokat fogja alkalmazni, gy az oldal-
kp nem az eredetileg kvnt mdon alakul. Ez egyttal azt is jelenti, hogy mindenkppen clszer
17. kp rendszertulajdonsgok alkalmazsa
egy elemre
-
37
megadni ms fontokat is. A lap tervezse ne lljon meg ott, hogy egyetlen, nagyon szpen kidolgozott bettpust hatrozunk meg, hanem gondoljunk a lehetsges alternatv megoldsokra is.
Ugyancsak problmt okozhat, ha a felhasznl elmenti a lapot, s egy olyan szmtgpen (pl. ott-honi vagy laptop) kvnja hasznlni, amelynek nincs Internet-kapcsolata. A begyazott bettpusok termszetesen ebben az esetben sem fognak megjelenni. Ha teht tbbszri olvassra sznt vagy nagyobb terjedelm szveget, tartalmat szolgltatunk (pl. szpirodalmi vagy tudomnyos munkk, zleti anyagok stb.), inkbb kerljk a begyazott fontok hasznlatt. [Az @font-face-t a CSS2.1 nem tartalmazza.]
5.2 Szvegtulajdonsgok A szvegblokkok els sornak behzst a text-indent tulajdonsg hatrozza meg. A behzs a
sordoboz bal oldaltl (jobbrl balra rt szvegnl a jobb oldaltl) kezdve res helyknt jelenik meg. rtkei lehetnek:
(hossz): a behzs konkrt megadsa
(szzalk): a behzs arnynak meghatrozsa A tulajdonsg kaphat negatv rtket is, de ez nem a fgg behzs nven ismert hatst okozza
(amikor az els sor a helyn marad, a tbbi pedig beljebb kezddik). Negatv rtk esetn ugyangy az els sor pozcija vltozik meg a sordoboz oldalhoz kpest, teht ebben az esetben az els sor kijjebb, akr a kpernyn kvl kezddik, a tbbi sor helyzete termszetesen nem vltozik. Fgg behzshoz a szveg bal margjt legalbb akkorra (de inkbb kicsit nagyobbra) kell nvelnnk, amekkora (negatv) rtket adunk a text-indent tulajdonsgnak. Ez trtnt a 18. kpen lthat plda esetben is.
A szvegek igaztst a text-align tulajdonsg szablyozza. Lehetsges rtkei:
left: a szveget balra igaztja
right: a szveget jobbra igaztja
18. kpa text-indent hatsa pozitv rtkkel (balra), negatv rtkkel, korrigls nlkl (kzpen)
s megnvelt margval (jobbra)
-
38
center: a szveget kzpre igaztja
justify: mindkt marghoz kinyjtja a sorokat, ami a sz- s betkzk megnvekedsvel jrhat. Ha ezt az rtket a bngsz nem tmogatja, akkor a szveget balra vagy jobbra rende-zi, az aktulis rsirnynak megfelelen.
(szveg): csak tblzatok celli esetn van rtelmezve A text-decoration tulajdonsg hasznlatval a szvegek egyes megjelensbeli tulajdonsgait
tudjuk megvltoztatni. A kvetkez lehetsgeink vannak:
underline: a szveg alhzott lesz
overline: a sorok fl rajzol vonalat
line-through: a szveg vzszintes vonallal t lesz hzva
blink: villogv teszi a szveget. Ezt az rtket a bngszk egy rsze nem tmogatja.
none: nem hoz ltre dekorcit, st a meglvket is eltvoltja, amit az A elem esetben el-
szeretettel ki is hasznlnak. Az albbi pldban a link alatt csak akkor jelenik meg alhzs, amikor a felhasznl rviszi a kurzort: A {color: blue; text-decoration: none} A:hover {color:teal; text-decoration: underline}
A letter-spacing tulajdonsg a szveg karakterei kzti tvolsgot hatrozza meg. rtkei:
normal: a fonthoz tartoz alaprtelmezett betkzk hasznlata
(hossz): a karakterek kztti tvolsg az alaprtelmezetten tl. A megadott rtkek negatvak is lehetnek
Ez a tulajdonsg jl alkalmazhat, ha ritktott szveget szeretnnk ltrehozni. Ezt elssorban kieme-ls cljra szoktk alkalmazni, de oda nem tl szerencss, mert megbontja a szveg egysges folthat-st. Jt tenne viszont a kismret ritkts a kiskapitlis betknek, illetve a stt httren vagy sznes kpen elhelyezett vilgos szvegnek. Sajnos a megfelelen kis tvolsg (0.020.03 em) hasznlatt a bngszk tbbsge nem teszi lehetv, s magt a tulajdonsgot sem minden szoftver tmogatja. A word-spacing tulajdonsg a szavak kztti tvolsgot, vagyis a szkzk mrett hatrozza
meg. Lehetsges rtkei:
normal: a font vagy a bngsz ltal meghatrozott norml szkzt jelenti meg
(hossz): meghatrozza, hogy mekkork legyenek a szkzk a norml rtken tl. Negatv r-tket is megadhatunk.
-
39
A szkzk nvelsre (vagy cskkentsre) ltalban nincs szksg. A csupa nagybetvel rt sz-vegeknl clszer viszont egy kicsit megnvelni a szkzket (0.10.2 em tvolsggal) a jobb olvas-hatsg rdekben. A text-transform kis- s nagybets alakok ltrehozst teszi lehetv. A kvetkez rtkeket
veheti fel:
capitalize: minden sz els betjt nagybetss teszi
uppercase: a teljes szveg minden betje nagybets lesz
lowercase: a teljes szveg minden betjt kisbetss alaktja
none: semmilyen vltozs nem trtnik.
A white-space tulajdonsg hatrozza meg, hogyan legyenek kezelve az elemen belli whitespace
karakterek (ezek CSS esetben a szkz, a tabultor, a soremels, a kocsi vissza s a lapdobs). rt-kei:
normal: sszevonja a whitespace-ek sorozatt, a szveget pedig gy tri, hogy az kitltse a
sordobozokat
pre: a kzk nem kerlnek sszevonsra, sortrs csak ott jn ltre, ahol a forrsban is j sor
kezddik
nowrap: szintn sszevonja a kzket, de megtiltja a szvegen belli sortrst.
Mindhrom rtk a forrsban jelenlv whitespace-ekre vonatkozik, az ott ltrehozottakra (pl. a BR
elem a HTML-ben) nem. A pre hasznlata alkalmas lenne specilisan formzott szvegek, pl. versek megjelentsre, de
sajnos a tulajdonsgnak ezt az rtkt nem minden bngsz tmogatja, ezrt alkalmazstl el kell tekintennk.
A nowrap hasznlatval vigyznunk kell, mert mr egy, a forrskdban nhny soros bekezds is
egyetlen hossz sorknt jelenik meg a kpernyn, s a kinyomtatsa is lehetetlenn vlik. Nagyobb szvegekre vagy az oldal egszre ezrt ne alkalmazzuk. Csak olyankor hasznljuk, amikor egy-egy konkrt szvegrszt, pl. forrskdot vagy URL-t szeretnnk sortrs nlkl megjelenteni. [A CSS2.1-ben kt j rtk jelenik meg: a pre-wrap nem vonja ssze a kzket; sortrs ott
jn ltre, ahol a forrsban j sor kezddik, vagy ott, ahol a sordoboz kitltse rdekben szk-sges. A pre-line sszevonja a kzket; a sorok ott trnek, ahol a forrsban j sor kezddik, vagy ott, ahol a sordoboz kitltse rdekben szksges.]
-
40
A line-height tulajdonsg blokkszint elemeknl a sorok minimlis magassgt, vagyis a sorkzt
hatrozza meg. Sorszint elem esetn az elem doboznak pontos magassgt adja meg. rtkei lehet-nek:
normal: a betkszlet alaprtelmezett sormagassga
(szm): a sortv arnya a betmrethez viszonytva
(hossz): a sormagassg konkrt rtknek megadsa
(szzalk): a sortv arnya a betmret szzalkban Az albbi pldk ugyanazt a sormagassgot eredmnyezik:
DIV {line-height: 1.2; font-size: 10pt} DIV {line-height: 1.2em; font-size: 10pt} DIV {line-height: 120%; font-size: 10pt}
A helyes sortvolsg a betmret 110120%-a. A bngszk ltalban automatikusan az utbbi rtket hasznljk, gy ettl csak akkor trjnk el, ha valamilyen clunk van vele. Nagyobb betszem fontok-nl, vagy hossz soroknl esetleg szksg lehet a sortvolsg megnvelsre, kisebb betszem t-pusnl s nagyon rvid soroknl pedig a cskkentsre, de ezeket a vltoztatsokat kezeljk megfon-toltan.
6. Megjelents s pozcionls
6.1 Rtegek s pozcik A CSS ktsgkvl legltvnyosabb jdonsga a rtegek kezelse. Segtsgkkel az oldal klnbz elemeit tetszleges pozciban helyezhetjk el. Nincs szksg a HTML-bl ismert kerl megoldsokra az elemek pozcionlshoz, s nem kell trdnnk a tbbi elem hatsval.
A rtegek hasznlata tovbb azrt is figyelmet rdemel, mert br a bngszk sok esetben mskp-pen (vagy egyltaln nem) jelentik meg a klnbz stlusjegyeket, a rtegek megjelentsben elgg hasonl eredmnyt produklnak. Ha azt szeretnnk, hogy honlapunk klalakja ne trjen el nagyon az egyes felhasznlk kpernyjn, akkor rdemes kihasznlni a rtegekben rejl lehetsgeket.
-
41
Rtegeket a HTML nyelv DIV elemnek segtsgvel tudunk megjelenteni. Az egyes rtegekre jellem-
z tulajdonsgot a stluslapban kell belltani, minden rteg szmra egy osztly (pl. .kozepso)
vagy egy azonost (pl. #kozepso) ltrehozsval.
Az osztlyokat egy oldalon tbb elemhez is hozz lehet kapcsolni, vagyis tbb elem is tartozhat ugya-nabba az osztlyba. Az azonostval megadott stlusok csak egyszer hasznlhatak fel, legalbbis el-mletben; a gyakorlatban viszont a bngszk egy rsze elfogadja, ha tbb elem is ugyanazt az azono-stt kapja. Ennek ellenre clszer minden rteget egyedi azonostval elltni (vagy egyedi osztlyba sorolni), mert gy a dokumentum biztosan helyesen jelenik meg, s a szerkezete is ttekinthetbb v-lik.
A rtegek egyik tipikus felhasznlsi mdja az oldalak szerkezeti vznak ltrehozsa. Egy oldal meghatrozott rszekbl (f tartalom, fej- s lblcek, navigcis- s mensvok stb.) llhat. Ezeket elhelyezhetjk egy skban egyms mellett, de az elemeket egyms fl, egymst rszben vagy eg-szen eltakarva is tehetjk a nagyobb hats kedvrt. A 19. kp egy tlagosnak mondhat lapszerkeze-tet mutat be. Az oldal fels rszn egy sv hzdik, amelyikben aktulis tartalmat (pl. dtum, nvnap stb.), kzrdek informcikat, vagy ppen reklmcskot helyezhetnk el. A CSS csak a formt hat-rozza meg, a tartalmat ugyangy alakthatjuk, mint korbban (HTML, JavaScript, Flash stb. felhasznl-sval). Baloldalt egy men tallhat, amelynek segtsgvel a site oldalai kztt lpkedhetnk, a tbbi rszen pedig az oldal lnyegi tartalma olvashat.
A rtegek adatait a kvetkez kdrszlet hatrozza meg:
#fej {position: absolute; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0} #menu {position: absolute; width: 10em; height: auto; top: 15%; right: auto; bottom: 200px; left: 0} #fo {position: absolute; width: auto; height: auto; top: 15%; right: 0; bottom: 0; left: 10em}
19. kp: egy modulokbl ll oldal vzlata
-
42
A rtegek helyt a position tulajdonsggal adtuk meg. Lehetsges rtkei:
static: a doboz norml elrendezs, teht sorszint vagy blokkszint elemknt lesz megje-
lentve. A top s a left tulajdonsgok ebben az esetben nem hasznlhatak.
relative: elszr a doboz norml elrendezs szerinti pozcija kerl kiszmtsra, majd a
doboz ehhez kpest lesz eltolva. Az utna kvetkez dobozok helyzetre ez a relatv elmozdu-ls nincs hatssal. Az eltols mrtkt ilyenkor a top, bottom, right s left tulajdon-
sgok hatrozzk meg.
absolute: a doboz helyzett (s lehetleg a mrett is) kizrlag a left, top, right
s bottom tulajdonsgok hatrozzk meg. Ezek szablyozzk az eltolst a doboz tartalmaz
blokkjhoz kpest. Az abszolt pozcionls kiemeli a dobozokat a norml elrendezsbl: nin-csenek hatssal ms dobozokra, s a margik sem olvadnak ssze ms elemekvel.
fixed: a doboz pozcijnak kiszmtsa az abszolt elrendezs alapjn trtnik, de a doboz
valamihez kpest rgztve van. Folyamatos mdia esetn a lttrhez rgzl, s nem grdt-het. Lapozhat mdinl a laphoz kpest lesz fix a doboz, akkor is, ha az lttren keresztl (pl. nyomtatsi kp) jelenik meg.
A position brmilyen elem helyzetnek belltsra hasznlhat. Ha blokkszint elemekre alkal-
mazzuk, amelyeket abszolt mdon (teht absolute vagy fixed rtkkel) pozcionlunk, akkor
kapunk olyan, az oldal tbbi rsztl fggetlen elemeket, amelyeket rtegnek nevezhetnk. Ha a fenti pldban szerepl #menu rtegnek a fixed rtket adjuk, akkor az ltala ltrehozott
men (a megfelel bngszkben) az oldal grgetsekor is egy helyben marad. Ez nemcsak ltvnyos megolds, de hosszabb oldalak esetn a naviglst is megknnyti. Egyttal alternatvjt jelentheti a HTML nyelv FRAMESET parancsa ltal ltrehozott oldalszerkezetnek is. Ilyen esetben viszont gon-
doskodnunk kell arrl, hogy a kpernyn statikus llapot men ne szerepeljen minden kinyomtatott oldalon, vagyis az oldalakhoz kpest ne legyen fix a pozcija. Ezt megtehetjk az @media utasts-
sal, kt klnbz stlusvltozat megadsval: @media screen { #menu {position: fixed; @media print { #menu {position: static;
Ha azt szeretnnk, hogy a men egyltaln ne jelenjen meg a kinyomtatott vltozaton, akkor ott a display tulajdonsgnak none rtket kell adnunk, a tbbi rteg bal oldali eltolst pedig akr meg
is szntethetjk. Ezltal a nyomtats kevesebb helyet (s paprt) ignyel majd.
-
43
A dobozok eltolsra a top, left, right s bottom tulajdonsgok szolglnak. Azt hatrozzk
meg, hogy az elem megfelel oldalai milyen tvolsgra helyezkedjenek el a tartalmaz doboz leitl. Csak n. pozcionlt elemekre hasznlhatak, vagyis olyanokra, amelyek position tulajdonsga
nem static. rtkeik:
(hossz): az eltols megadsa mrtkegysggel
(szzalk): az eltols arnynak megadsa. Hivatkozsi alap a tartalmaz doboz szlessge (left, right), illetve magassga (top, bottom)
auto: hatsa az elem mretezsi tulajdonsgainak auto rtktl fgg
A rtegek abban a sorrendben fognak megjelenni a kpernyn, ahogyan az oldal forrsban megadjuk ket. Ha azonban szeretnnk egyrtelmen rgzteni a rtegek sorrendjt, s ezzel biztosan megrizni az oldalkpet, azt a z-index tulajdonsg segtsgvel tehetjk meg. Ennek rtke mutatja meg a
bngsznek, melyik rteggel kell kezdenie a megjelentst.
auto: a rtegek a megads sorrendjben kvetik egymst. Hatsa ugyanaz, mintha a tulaj-
donsg nem is lenne belltva.
(egsz): a rtegek megjelensnek sorszma. A legalacsonyabb szm elem van legfell, va-gyis legkzelebb a felhasznlhoz
A rtegek egyms fltti sorrendje azrt fontos, mert egy rteg, amelynek nincs httere, tltsz azo-kon a helyeken, ahol a tartalma engedi. A szvegek s bizonyos kpformtumok (pl. GIF) rendelkeznek tltsz terletekkel, mg ms kptpusok (pl. JPG) tltszatlanok. Szveg s kp egymsra helyezs-nl ezrt clszer a szveget mindenkppen hozznk kzelebb elhelyezni, az olvashatsg rdek-ben.
20. kpszvegek elhelyezse tbb
rtegben
-
44
A rtegek s a szvegtulajdonsgok kombinlsval ltvnyos eredmnyeket tudunk elrni. A fenti kpen az oldal szvegnek httert egy msik szveg adja. Ennek betmrett, sortvolsgt s sznt azonban gy lltottuk be, hogy inkbb optikai-eszttikai hatsa legyen, de a f tartalom olvasst ne zavarja. Ehhez egy vastag szr bettpusbl flkvr vltozatot, 60 pontos betmretet, de csak 30 pontos sortvolsgot vlasztottunk. Az eltrben lv szveg eredeti sortvolsgt kicsit megnveltk. Elterjedt mdszer a szvegek egymsra helyezse rnykolsi effektusok ltrehozsa cljbl. Ilyenkor a kt rteget alig nhny pixel eltrssel helyezik egymsra, gy elrve a megfelel eredmnyt. Tbb-rteg rnykols hasznlatval tovbb fokozhatjuk a hatst. A 21. kp ezekre mutat pldt: az els esetben az als rteget kt-kt pixellel toltuk el jobbra s lefel. A msodikban kt rteg szolgl rny-kolsra, kzlk az egyik jobbra, a msik balra, s mindkett lefel mozdul el ugyanennyit.
6.2 Lthatsg A rtegekben rejl tovbbi lehetsg a dinamikus megjelentsk. Ezt bizonyos eredmnnyel mr a HTML esemnykezelinek felhasznlsval is megtehetnnk, de ezek a klnbz bngszkben nem azonos mdon mkdnek.
A dinamikus megjelentst sokkal hatkonyabban tudjuk vezrelni valamilyen szkriptnyelv (pl. JavaScript) hasznlatval. gy nem csak a visibility tulajdonsg rtkt tudjuk megvltoztani, de
a rtegek tbbi jellemzjt (mret, szn, pozci stb.) is. rhatunk olyan fggvnyeket, amelyek segts-gvel a fmenbl kivlasztott oldalak rteg formjban tltdnek be, vagy kszthetnk bemutatt, slideshow-t, ahol klnbz informcik kvetik egymst meg gombnyomsra vagy ppen idzt ir-nytsval. A visibility tulajdonsg a kvetkez rtkeket veheti fel:
visible: az elem lthat
hidden: az elem lthatatlan (teljesen tltsz), de ltrejn
collapse: a tblzatoknl hasznlhat rtk, ismertetse is ott trtnik
21. kp rnykols ltrehozsa
rtegekkel
-
45
rdekes trkk bizonyos elemek dinamikus megjelentsre az A elemben trtn elhelyezsk. Ezzel a linkekhez tudunk megjegyzseket vagy akr kpeket is csatolni. A linken bell egy SPAN elemet kell elhelyeznnk, az albbihoz hasonl mdon:
letltsitt rdekes dolgokat tallhatsz
A kdrszlethez tartoz stlusdefincik gy nznek ki: DIV#linkek A SPAN {display: none} DIV#linkek A:hover SPAN {display: block; }
Ennek rtelmben a SPAN elemen belli szveg csak akkor jelenik meg, ha a link fl visszk a kur-
zort, ez lthat a 22. kpen.
Nemcsak szveget, hanem kpet is elcsalhatunk ilyen mdon. Ebben az esetben az A elemben nem
egy SPAN, hanem egy IMG elemet kell elhelyeznnk. Mivel egyes bngszk nem jl kezelik a
display: none rtk kpeket, gy ms megoldshoz kell folyamodnunk. A kp kezdeti mreteit
nullra lltjuk: DIV#linkek A IMG {height: 0; width: 0; border-width: 0;}
Amikor a linkre visszk a kurzort, a kp a kvetkez jellemzket kapja: DIV#linkek A:hover IMG {position: absolute; height: 50px; width: 50px; }
Az eredmny a 23. kpen lthat.
22. kp megjegyzs hozzfzse
linkekhez
23. kp linkhez kapcsolt illusztrci
-
46
6.3 Megjelens Az elemek klnbz tpus dobozokat hozhatnak ltre. Minden elemnek van olyan doboztpusa, amelybe alaprtelmezetten tartozik, de a display tulajdonsg hasznlatval ezt meg tudjuk vltoz-
tatni. Az egyes elemekhez a kvetkez tpusokat rendelhetjk:
inline: az elem (egy vagy tbb) soron belli dobozban fog elhelyezkedni
block: az elem megjelense blokkszint lesz
list-item: az elem listaelemknt fog viselkedni, formzsa is ennek megfelelen trtnhet
marker: a :before s :after ltal ltrehozott tartalomra kiadva azt jellknt formz-
hatv teszi, egybknt inline elemknt jelenik meg
table, inline-table, table-row-group, table-column, table-
column-group, table-header-group, table-footer-group, table-
row, table-cell, table-caption: a dobozok a megfelel tblzatelemknt fognak
viselkedni. Ezeket az rtkeket az egyes bngszk teljesen eltr mdon jelentik meg, alkal-mazsuk ezrt nem ajnlott. Valamilyen tartalom tblzatszer elhelyezshez biztosabb s egyszerbb megolds a HTML nyelv megfelel elemeinek hasznlata
run-in, compact: a run-in doboz az t kvet blokkdoboz els soron belli dobozv
vlik; a compact doboz az utna kvetkez blokkdoboz margjn, vagy hely hinyban a
doboz eltt fog megjelenni. Ezek a doboztpusok igen ltvnyos eredmnyt produklnak, de a bngszk nagyobb rsze nem tudja megfelel mdon megjelenteni ket, gy hasznlatuktl el kell tekintennk
none: a doboz nem jn ltre
[A CSS2.1 a felsorolst egy j elemtpussal bvti: ez az inline-block, amely sorszint elemknt viselkedik, a tartalma azonban blokkdobozknt formzhat. Megsznik viszont az j verziban a compact s a marker rtk hasznlata.]
6.4 Krlfolyats A margknl mr tallkoztunk a kpek krlfolyatsval. Ezt a float tulajdonsg teszi lehetv,
amely az egyes elemek s a krlttk elhelyezked szveg helyzett szablyozza. Belltsval az elem doboza a sor szlre toldik (lebeg), a szveg pedig a tetejtl kezdve vgig tud folyni az oldala
-
47
mentn. A tulajdonsg nemcsak kpekre alkalmazhat, segtsgvel szveges elemeket (pl. inicil) is krbefuttathatunk. A kvetkez rtkeket veheti fel:
left: az elem balra helyezkedik el, a szveges tartalom a jobb oldaln folyik fentrl lefel
right: az elem jobbra toldik, a szveg balrl folyja krbe
none: az elem a norml elrendezs szerint jelenik meg, a szveg pedig ennek megfelelen
helyezkedik el Ha inicilt szeretnnk ltrehozni, nem elg csupn a kezdbet float tulajdonsgnak left rt-
ket adni. Az inicil helyes elhelyezshez a margk mreteinek belltsa (ltalban cskkentse) is szksges. Ennek mrtkt minden konkrt esetben (a felhasznlt bettpusok s -mretek klnbz-sge miatt) prblgatssal kell kidertennk. Szerencsre a vgeredmny a klnbz bngszkben nagyjbl azonos mdon jelenik meg. A 23. kpen egy ilyen, szablyosan elhelyezett inicilt lthatunk. A kinagytott rszleten megfigyelhet, hogy bal oldalon a bettalpak kilgnak, hiszen a kezdbet sz-rnak kell egybeesnie a hasb oldalval. A bet teteje az els sor felnyl betszraival van egy vonal-ban, nem pedig a kisbetk magassgval. Ezt a pldt a kvetkez utastssal hoztuk ltre:
body {font:normal 12pt "Times New Roman"} .nagy {font-size:460%; float:left; margin-top:-12px; margin-bottom:-20px; margin-left:-6px}
Egy lebeg elem oldala mentn tbb, egymst kvet elem (bekezds, cmsorok stb.) is a krlfuttats-nak megfelelen helyezkedhet el, egszen a lebeg elem vgig. Ha azonban azt szeretnnk, hogy pl. egy fejezetcm helyzett ne valamilyen korbbi lebeg elem hatrozza meg, akkor a clear tulajdon-
sgot hasznlhatjuk. Ez megmutatja, hogy az aktulis elem melyik oldala nem kerlhet lebeg elem mell, vagyis addig csszik lefel a doboz a lapon, amg a megadott oldala a marghoz nem tud iga-zodni. rtkei:
left: a doboz a korbbi balra leb