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