|
Stílusok — bevezetés Bár a stílusok nem kizárólag a karakterek formázására használhatók, kiindulásként úgy képzelhetünk el egy stílust, mint egy karakterformázási tulajdonság-gyűjteményt. Például, egy szövegrész lehet Arial 12-es, félkövér és kék színű, míg egy másik szövegrész Verdana 10-es, dőlt betűs és sárga hátterű. Mikor stílust hozunk létre, a stílusban egy-egy ilyen szövegrész tulajdonságainak csoportját írjuk le, és nevezzük el valamilyen néven. A HTML stíluslapcsomag hivatalos neve a Cascade Style Sheets (CSS). Első verziója, a CSS1 az alábbiakhoz rendelkezik támogatással:
A CCS szócska a Cascading Style Sheets rövidítése, ami magyarul Lépcsőzetes Stíluslapokat jelent. Azért lépcsőzetesek, mert három különböző szinten lehet használni őket: lokális (helyi), globális és univerzális (linkelt) szinten.
A lokális stílus használata nem túl ajánlott, mert ha egynél többször használunk egy adott lokális stílust, ugyanazt a stílusdefiníciót többször le kell írnunk - ebben az esetben ajánlatos globális stílusdefiníciókat használni, ahol egy adott stílust csak egyszer kell létrehoznunk, és az egész fájban használhatjuk. Ha olyan weblapot készítünk, mely több összetartozó oldalból áll, még ennél is tovább kell mennünk: a globális stílusokról át kell térnünk az univerzális stílusok használatára. Ebben az esetben érdemes a globális stílusokról (melyeket az adott fájlban írnánk meg) teljesen lemondani, és kizárólag univerzális stílusokat (melyeket egy különálló css fájlban tárolunk) használni. Ha ezt mégsem tennénk, tartsuk szem előtt, hogy ha van ugyanolyan nevű globális és univerzális stílusunk is definiálva, akkor a böngésző a globális stílust veszi figyelembe. A továbbiakban vegyük sorra részletesebben a stílusok szintjeit. Helyi (lokális) stílusok A <SPAN> kóddal egy újabb karakterformázási stílust definiálhatunk, mely a </SPAN> zárókódig a közrezárt szövegre érvényes lesz. A H1, H2, …, H6-tal való formázásban az 1-es, 2-es, …, 6-os méretjelző számoknak semmi köze nem volt a karakter tényleges méretéhez. Az alábbi példában egy valódi 16 pontos méretű (és még egyéb formázásokkal is rendelkező) szövegrészt láthatunk:
Ehhez hasonlóan a <B>…</B>, <I>…</I> stb. formázó kódpárokkal is speciális formázásokat adhatunk meg:
A fenti példák mint lokális stílusokat mutattak be, melyek tulajdonságait ott helyben, a formázandó szövegrész előtt kell megadnunk. A lokális stílusok használatáról ajánlatos teljesen lemondani, mert beépített univerzális stílusok vagy akár globális stílusok segítségével ezek a formázások előnyösebben elvégezhetők, ugyanis egy univerzális stíluslapban egy adott stílust csak egyszer kell definiálni, és az tetszőleges számú HTML-dokumentumban elérhető, és ezeken belül akárhányszor felhasználható. A stíluslap alkalmazása azon túl, hogy helymegtakarítást eredményez, azzal a nagy előnnyel is kecsegtet, hogy ha utólag meg kell változtatnunk valamelyik stílust, akkor azt nem kell az összes előfordulási helyen megtennünk, hanem csak egyszer, a stíluslapban. Globális stílusdefiníciók Ha weblapunkon egy-egy karakterformázási rész többször előfordul (például a szokásos fekete betűs szöveg között bizonyos fogalmak kiemelésére gyakran 9-es betűméretű dőlt piros Verdana betűket szeretnénk használni), akkor ezt megtehetjük a <FONT> tag segítségével is, amennyiben a 9-es betűméretnek megfelelő SIZE attribútum-érték megtalálható, de még ebben az esetben is túlságosan sok helyet foglal a sok <FONT> tag, arról nem is beszélve, hogy ha utólag úgy döntünk, piros betűszín heleyett kéket szeretnénk használni, abba a kényelmetlen helyzetbe kerülünk, hogy dokumentumunkban kénytelenek leszünk megkeresni a COLOR attríbútum összes előfordulását, és azok piros értékeit egyenként kékre változtatni (a lokális font- és stílushasználat hátrányai). Hogy az ehhez hasonló nehézségeket elkerüljük, globális stílusdefiníciókat kell használnunk a dokumentum elején: itt minden stílus tulajdonságait egyszer megadjuk, a stílusokat elnevezzük, majd később, valahányszor szükségünk van egy adott stílusra, hivatkozunk annak nevére. Ha pedig utólag meg szeretnénk változtatni egy adott stílus egy vagy több tulajdonságát, akkor ebben az esetben elegendő a stílusdefiníciót megváltoztatni, és ennek hatására az egész weblapon a változtatásoknak megfelelően megváltozik az illető stílussal formázott összes szövegrész. A stílusok használata mellett szól továbbá az nyomós ok is, hogy a HTML-szabványok újabb verzióinak elkészítésében van egy olyan tendencia, hogy amit stílusokkal el lehet végezni, de nem stílusokkal végzik, azt fokozatosan mind kiveszik, így például a <FONT> taggal kialakított formázások a közeljövő böngészői számára minden valószínűség szerint nem fognak semmit sem mondani. Egy dokumentum számára stílusokat a <HEAD> tagba helyezett <STYLE>…</STYLE> kódpárral definiálhatunk. Tekintsük a következő példát:
Magyarázat: Fenn, a <STYLE> tagban megtalálható a következő stílusdefiníció: .album { COLOR: red; FONT-STYLE: italic; } Ennek a segítségével létrehoztunk egy album nevű stílust, melynek karakterformázása piros írásszínű (red) és dőltbetűs (italic). Nem adtuk meg a betűtípus nevét (FONT-FAMILY) és még néhány egyéb tulajdonságát, ezért ezek a formázások olyanok lesznek, amilyen a környezetüké. A dokumentum <BODY> részében az albumcímeket a <FONT CLASS=album>…</FONT> kódpár közé írtuk, ezért azok felvették az album stílus tulajdonságait: piros és dőlt betűsek lettek, többi tulajdonságuk viszont azonosult a körülöttük levő szöveg stílusával. Maga a cikk szövege kis Verdana betűs lett, mivel fenn a <STYLE> stílusdefiníciókban a BODY elemhez 10-es Verdana fontot rendeltünk, ezáltal beállítva az egész weblap-tartalom alap-betűstílusát. Megfigyelhető, hogy az általunk kitalált új stílusok neveit ponttal (.) megelőzve definiáljuk (például .cikkcim, .album), míg a már létező HTML-elemek (BODY, TABLE, TR, TD, B, I, UL, LI, EM, DIV, PRE, H1, H2 stb.) neveit magukra írjuk (ezeket nem előzi meg pont). További különlegesség, hogy a létező HTML-elemekhez többféle stílust is rendelhetünk, például így tettünk a TR esetén: létrehoztunk egy félkövér, Arial 11-es, TR.fej nevű stílust, és egy kisebb, zöld (#008800) betűs TR.test nevű stílust. Ennek következtében például a <BODY>-ban a <TR CLASS=test> formázású második táblázatsor elemei valóban kis, zöld betűsek lettek. Mivel a harmadik táblázatsor esetén nem adtunk meg semmilyen stílust, ennek tartalma alapértelmezett stílusú lett, ami a böngésző beállításaitól függ. Ezt a kiszámíthatatlan stílust előidéző helyzetet megakadályozhatjuk azzal, ha egy TABLE stílust is definiálunk. Ebben az esetben minden táblázatcella formázása felveszi ezt a stílust, ahol pedig TR-formázás is van, azokban a sorokban ezek az utóbbiek érvényesülnek, felülírják a TABLE stílust (és ugyanígy egy TD stílus is felülírná a TR stílusokat). Univerzális stílusok, stíluslapok (Style sheets, CSS files) Miután láttuk a globális stílusdefiníciók előnyeit, feltevődik egy további kérdés: mi van akkor, ha egy bizonyos stílust nem csak egyetlen HTML-dokumentumban szeretnénk használni, hanem sokban, esetleg több százban? Ebben az esetben ismét ugyanazokkal a hátrányokkal kellene számolnunk, mint amivel egy dokumentum esetén, míg nem használtuk a stílusokat. Szerencsére erre a helyzetre is van egy megoldás: a stíluslapok. A stíluslapok olyan .css kiterjesztésű állományok, melyekben a STYLE taghoz hasonló módon egyszer megírjuk a stílusokat, és azokat aztán tetszőleges más HTML-dokumentumban felhasználhatjuk. A stíluslap nagy előnye, hogy egyetlen fájlból irányítjuk a teljes weblap-rendszer formázását, külalakját. Ha egy stílust megváltoztatunk a stíluslapban, az összes weblapban megváltozik az adott stílussal formázott összes szövegrész. Az ilyen különálló css fájlban definiált stílusokat univerzális stílusoknak nevezzük. Például a jelen weblap-rendszer is használ egy ilyen stíluslapot, melynek neve fstyle.css és tartalma a következő:
Ahhoz, hogy egy HTML-dokumentumban használhatóak legyenek az ebben a fstyle.css (melynek a neve természetesen lehetne bármilyen más érvényes .css kiterjesztésű fájlnév) nevű stíluslapban definiált stílusok, az illető HTML-dokumentum <HEAD> tagjába be kell építeni egy hivatkozást a fstyle.css fájlra a következő szintaxissal:
Stíluslap importálása Az @import paranccsal külső stíluslapot importálhatunk a weboldalba. A parancsot a <STYLE> tagba írjuk:
CSS források A stílusok tudományába mindez csak bevezetés volt; a különböző HTML kódelemek (BODY, A, TABLE, TR, TD, UL, LI, H1, stb.) stílusainak a legkülönfélébb attribútumai vannak, és azoknak is szintén megvannak a maguk speciális értékei. Mindezek olyan sok lehetőséget tartalmaznak, hogy részletes bemutatásuk újabb tankönyvet igényel. Lent balra a "CSS Tutorial" linkre kattintva letölthető egy angol nyelvű ismertető a stílusokkal kapcsolatban; ezek tanulmányozása által remélhetőleg válaszok születnek a további stílusbeli kérdésekre. Ha pedig esetleg még ennél is többre vagy kíváncsi a stíluslapokkal kapcsolatban — és feltehetőleg az vagy, mert ez még csak a kezdet kezdete volt —, meglátogathatod a következő címeket: http://www.w3.org/pub/WWW/Style/ http://www.w3.org/Style http://www.westciv.com/style_master/academy/css_tutorial/index.html http://www.htmhelp.com/reference/css http://hotwired.lycos.com/webmonkey/authoring/stylesheets |