Legutóbb épp ott tartottunk, hogy már majdnem összeállítottuk leendő oldalunk, a híres Lorem Ipsum konferencia weboldalának XHTML-kódját. Emlékeztetőül: függőlegesen három részre osztottuk az oldalt (fejlec, kozep, lablec), ezt követően elkezdtük kidolgozni a főbb részeket, el is készültünk a fejléccel, és a középső részben a menüvel, amelyet egy rendezetlen listával (vagy felsorolással) oldottunk meg. Ezzel kapcsolatban van még egy adósságunk: egyelőre csak a felsorolást készítettük el, de az egyes menüpontok még csak egyszerű szövegek, nem pedig az aloldalakra mutató hivatkozások. Épp ezért gyorsan kibővítjük őket ‹a›...‹/a› tagekkel, ám mivel az aloldalak pontos címét most még nem tudjuk, ezek href attribútumainak értékeként egy kettős keresztet (#) adunk meg. Ez teljesen szabályos, amolyan „helykitöltő" funkciót lát el; ha ilyen hivatkozásra kattintunk, a böngésző az oldal tetejére ugrik, ami nekünk most tökéletesen megfelel.
Az előző leckében elkészült menüt hivatkozásokkal egészítettük ki
HÍREKET MONDUNK
Most, hogy a menüt befejezettnek tekinthetjük, már csak két dolog van hátra: a középső rész jobb oldala (‹div id="jobb_oldal"›...‹/div›) - mellesleg a legfontosabb tartalmi rész az egész weboldalon -, valamint a lezárásként megjelenő lábléc (‹div id="lablec"›...‹/div›).
Az oldal lábléce most „alibi" tartalmat kapott, majd cifrázzuk ezt is a későbbiekben
Ha vissza tudunk emlékezni az eredeti tervekre, a jobb oldali rész tetején szerettünk volna egy állandó elemet, egy beköszöntőt elhelyezni. Ezt nagyon egyszerűen megoldjuk: a jobb_panel azonosítóval ellátott ‹div›-be egyszerűen beteszünk egy ‹p› taget koszonto azonosítóval, tehát egy sima bekezdésszöveg lesz, amely tartalmazza majd egymondatos köszöntésünket (a két főszervező nevét ‹em›...‹/em› címkékkkel kiemeltté tesszük), és a végére berakunk egy Tudjon meg többet rólunk hivatkozást, amely majd később a Konferencia aloldalra fog mutatni. A jelenlegi elképzelések szerint nem éreztük szükségét annak, hogy a köszöntő bekezdésszöveget még külön beágyazzuk egy ‹div›-be, ahogy tettük ezt az eddigi oldalrészekkel. Előfordulhat, hogy később - a dizájn miatt - erre mégis szükség lesz, akkor majd pótoljuk a mulasztást.
Az oldal tetején megjelenő köszöntőt egyetlen koszonto azonosítójú bekezdésben írjuk le
Ezután, még mindig a jobb_oldal ‹div›-en belül létrehozunk egy hirek azonosítójú ‹div› blokkot, majd ezen belül elkezdjük kidolgozni, hogy fog felépülni egy hír. A címhez a harmadik szintű címsort, a ‹h3›-at fogjuk használni (az első és a második szintűt használtuk a fejlécben), utána a hír szövege ismét ‹p› és ‹/p› tagek közé kerül, illetve jeleznünk kell a hír dátumát is, amelyet szintén bekezdésszövegként definiálunk, de megkülönböztetjük az előző (és minden más) bekezdéstől egy datum osztályazonosítóval. Az egészet pedig ismét beágyazzuk egy ‹div›...‹/div› blokkba, amelynek a hir osztályazonosítót adjuk. Most hogy ezt ilyen jól kitaláltuk, másolás-beillesztés módszerrel máris igény szerint sokszorosítani tudjuk a hírblokkokat.
A hírek már egy kicsit bonyolultabban épülnek fel, ezért előbb létrehozunk egy hírblokkot megjegyzések között, majd azt másolva alakítjuk ki a tényleges híreket
A láblécet nem visszük túlzásba, egyelőre csak egy sima bekezdésszövegben tudatjuk a világgal, hogy a Lorem Ipsum konferencia jogtulajdonosai a két főszervező cég. Később esetleg bővítjük a láblécet a szervezők logójával, sőt szokás ebben az oldalrészben megismételni a főbb navigációs pontokat, hogy ha valaki már ilyen mélyre tévedt, ne kelljen visszamásznia az oldal tetejére a menükhöz, hanem innen is könnyen el tudjon jutni az aloldalakra. Ezeket a változtatásokat később végezzük majd el az oldalon. Most tekintsünk az elkészült műre mint 1.0-s változatra, és gyorsan szaladjunk el a validator.w3.org weboldalra ellenőrizni, hogy mindent jól csináltunk-e, oldalunk tiszteletben tartja-e az XHTML szabványt. Naná!
Az oldal első változatának elkészülte után azonnal ellenőrizzük, hogy mindent a szabványoknak megfelelően végeztünk-e
Fontos apróságok – Osztály, vigyázz!
Még nem sok szó esett az osztályokról, noha kedvenc példaoldalunk, a CSS Zen Garden forráskódjának elemzésekor már találkozhattunk vele. Azt már megtanultuk, hogy az id attribútum egy olyan egyedi azonosító, amely egyértelműen megjelöl egy oldalrészt - abból az adott oldalban csak az az egy darab lehet, több nem. Készülő weboldalunkban ilyen egyértelmű, csak egyszer előforduló azonosító a teljes_oldal, a fejlec, a kozep stb.
Ha azonban olyan elemeket szeretnénk használni, amelyek egy oldalon belül többször is elfordulnak, de mindig ugyanúgy néznek ki, a class attribútumot használjuk ezek jelölésére. Példánkban a főoldalon megjelenő hírek egymás után pontosan ugyanúgy fognak megjelenni - mindegyiknek lesz egy címe, valami szöveges része és egy dátuma, és ezek dizájnja hírről hírre teljesen azonos lesz -, ezért egy olyan ‹div›-be ágyazzuk őket, amely a hir osztályazonosítót vagy osztályjelölőt kapja. Ily módon ezeket a ‹div›-eket megkülönböztetjük az összes többitől, ugyanakkor azt is jelezzük, hogy összetartoznak, egy osztály részei, ezért azonos módon fognak megjelenni.
Látni fogjuk, hogy stíluslapokon nagyon egyszerűen hivatkozhatunk mind az id azonosítókra, mind a class osztályjelölőkre, így könnyedén tudunk majd stílust rendelni az így megjelölt oldalelemekhez.
Egy egyedi azonosító csak egyszer szerepelhet az oldal kódjában, míg az osztályokkal jelölt oldalelemek ismétlődhetnek
JÖJJÖN A CSS!
Stíluslapokról már rengetegszer esett szó az előző leckék során. Többek között azt is megtanultuk már velük kapcsolatban, hogy ezek képezik a jól felépített weboldal második rétegét - az első, ugye, az oldal tartalmát leíró XHTML réteg volt -, amely azt írja le, hogy az egyes szerkezeti és tartalmi részek miként jelennek meg, hogyan néznek majd ki a böngészőben vagy valamilyen más megjelenítő eszközön.
Miért kell ehhez stíluslap - teheti fel a kérdést az egyszeri weboldalkészítő -, amikor rendelkezésre állnak olyan tagek a HTML nyelvben, mint például a ‹font›, amellyel beállíthatjuk a használni kívánt betűk típusát, színét stb.? Miért kellene szétválasztani a tartalmat és a formát? Micsoda hülyeség ez, hogy a weboldal HTML-állományán kívül még egy külön CSS-fájlt is kezelni kelljen?
Nos, jól van, kedves egyszeri weboldalkészítő, nézzünk egy egyszerű esetet: van, mondjuk, egy öt aloldalból álló weboldalunk, amelyen a megrendelő annak rendje és módja szerint jó sok szöveget szeretne elhelyezni, és az aktuális divatnak megfelelően mindenhol az Arial betűtípus különböző méretű változatait akarja látni. El is készítjük az oldalt, telis-tele rakva ‹font› címkékkel, hogy alig látunk ki belőle, amikor egy szép napon a megrendelő megrendülve értesül arról, hogy az Arial már rég kiment a divatból, és manapság a Verdana a menő. Ki kell tehát cserélni mindenhol - mind az öt aloldal kódjában, sorban az összes helyen - a betűtípust. Ha szerencsénk van, egy jobb szövegszerkesztő Keresés/Csere funkciójával még úgy-ahogy elboldogulnánk, de ha kézzel kell végigmennünk az összes ‹font› tagen, nos, az már elég kellemetlen volna. Rögtön nem tartanánk annyira jó ötletnek összemosni a tartalmat a formával. Ha viszont stíluslapot használunk - egyetlen stíluslapot, amely leírja valamennyi aloldal megjelenését -, abban körülbelül 10 másodperc alatt átírható, hogy Arial helyett mostantól Verdana betűtípussal jelenjenek meg a szövegek - és kész is vagyunk. Azzal, hogy leválasztottuk a megjelenést a tartalomról - és eszünkbe sem jut olyan címkéket használni, mint a ‹font› - nem nehezebbé tettük, hanem éppenhogy megkönnyítettük a dolgunkat: egy apró beavatkozással mind az öt aloldalon megoldottuk a megrendelő kérését. Ebben rejlik a stíluslapok ereje, ezért hozták létre őket, és ezért érdemes nekünk is megtanulni a használatukat.
A 90-es évek elején készült oldalaink hemzsegtek a ‹font› tagektől - ma már magunkkal szúrunk ki, ha kőkorszaki módszereket használunk
STÍLUSANATÓMIA
Sokat beszéltünk már a stílusokról, de valójában még soha nem láttunk egyet sem - nézzük meg tehát végre, hogyan is fest egy ilyen stílusdefiníció. Az alábbi példában egy fiktív weboldal bekezdésszövegeinek megjelenését állítjuk be, mégpedig a betűtípus, a betűméret, a sortávolság és a szín definiálásával.
Egy stílusdefiníció (CSS-szabály) felépítése jelölővel, attribútumokkal és értékekkel
Mint látható, egy stílusdefiníció, amelyet a szaknyelvben gyakran CSS-szabályként is emlegetünk, alapvetően két fő részből áll. Az első az úgynevezett jelölő (idegen szóval: selector), amely meghatározza, hogy az adott stílus az XHTML-dokumentum mely részére fog vonatkozni, a második pedig az úgynevezett definíciós vagy deklarációs blokk, amelyet kapcsos zárójelek közé teszünk. Maguk a deklarációk szintén két fő részből állnak össze: a tulajdonságból (más szóval attribútumból), valamint annak értékéből.
A fenti példában a jelölő a p, amely nem más, mint az (X)HTML nyelv boncolásánál már megismert ‹p› tag, ezúttal megfosztva a kisebb-nagyobb jelektől. Ezt rögtön jegyezzük is meg alapszabályként, hogy amikor a stíluslapon tagekre hivatkozunk, akkor csak a „nevüket" használjuk a kisebb-nagyobb jelek elhagyásával. Az ezt követő definíciós blokkban a font-family attribútum határozza meg a betűtípust, amellyel a szöveget meg fogjuk jeleníteni, a font-size a betűméretet, a line-height a bekezdésen belüli sortávolságot, a color pedig a betűk színét.
A font-family igen különleges tulajdonság: látható ugyanis, hogy itt több értéket is megadtunk. Úgy működik, hogy megnézi, elérhető-e az adott környezetben az általunk első helyen definiált Verdana betűtípus (Windows-környezet), és ha igen, azt fogja használni. Ha nem, akkor utánanéz annak, hogy van-e esetleg Helvetica (Apple Macintosh-környezet). Ha ilyen sincs, akkor a harmadik, sans-serif értéket fogja használni, amely azt jelenti, hogy az adott környezetben alapértelmezettként beállított talpatlan betűtípussal kell dolgoznia. A font-size beállításnál 12 pontos betűméretet definiáltunk. A betűméretet meg lehet adni a saját natív mértékegységükben, a szövegszerkesztőkből, grafikus szoftverekből is ismerős pontban (pt), de használhatunk pixelt (px), azaz képpontot is, mi több, még relatív méretek beállítására is van lehetőség - ezekre és a sortávolságra is visszatérünk még később, egy webes tipográfiát boncolgató leckében. Ami még érdekes lehet, az a color, hiszen sokaknak valószínűleg megfejthetetlen rejtélyt jelent a #88ccff érték. Ez a színmegadás egyik lehetséges módja a CSS-ben (van még másik kettő), és valójában roppant „egyszerű": a kettős kereszt után a kívánt szín RGB-összetevőit kell megadnunk hexadecimális (16-os számrendszerbeli) számokkal. Az első két szám a piros (R = Red), a második a zöld (G = Green), a harmadik a kék (B = blue) összetevőt állítja be. Mint ismeretes, ezek értéke 0 (00) és 255 (FF) között mozoghat.
A stílusok leírásakor nagyon fontos, hogy betartsuk az alapvető formai szabályokat. Ilyen szabály például, hogy a tulajdonságot az értékétől egy kettőspont választja el, és hogy egy-egy definíciót (tulajdonság-érték párt) mindig pontosvesszővel zárunk le. Ne feledkezzünk meg a deklarációs blokkot körülvevő kapcsos zárójelekről sem! Ezekre azért kell nagyon odafigyelnünk, mert elég, ha csak egy apró hibát követünk el egy CSS-szabály leírásánál, és az érvénytelenné válik, és egyáltalán semmilyen hatása nem lesz az adott weboldalra.
Fontos apróságok –Stílusok stílusa
Az sem teljesen elhanyagolható, milyen formában írjuk le az egyes CSS-szabályokat. A cikkben szereplő első példánk egy nagyon elterjedt írásmódot mutat be, ahol a jelölő a sor elején található, ezt követi a nyitó kapcsos zárójel, majd új sorban, néhány szóköz (vagy egy tabulátor) karakterrel beljebb jönnek a definíciók, végül az egészet egy új sorban, a jelölővel egy oszlopba kerülő kapcsos zárójel zárja. Ha ily módon több CSS-szabályt írunk egymás alá (természetesen üres sorokat hagyva közöttük), nagyon jól áttekinthető dokumentumot kapunk, amelyben könnyen megtaláljuk az egyes kijelölőket, illetve a rájuk vonatkozó definíciókat. Ettől mindössze egyetlen apróságban különbözik egy másik elterjedt írásmód, amely az első kapcsos zárójelet a jelölő utáni új sorba helyezi. Egy harmadik írásmód, amikor a jelölő és a teljes definíciós blokk egy sorba kerül, sortörésekkel nem tördeljük szét a CSS-szabályt. Bár ez helytakarékos, és nagyobb stíluslapok esetén a fájlméret jelentős részét megspórolhatjuk vele - gondoljunk arra, hogy a CSS-fájlt ugyanúgy le kell tölteni az oldal megjelenítésekor, mint a HTML-t, nem mindegy tehát, hogy mekkora -, de kezdőknek nem ajánljuk, mert áttekinthetetlenné teszi a stílusdefiníciókat, és sokkal nehezebb benne hibát keresni.
Az első két változat könnyen olvasható, jól áttekinthető, de némileg helypazarló, míg a harmadik helytakarékos, viszont nehezebb benne hibát keresni
A BÖNGÉSZŐ STÍLUSLAPJA
Erről is volt már szó korábban, de érdemes átismételni, mert a későbbiekben rengeteg probléma okozója lehet: amikor betöltünk egy olyan (X)HTML-oldalt, amelyhez nincs stíluslap rendelve, vagy letiltjuk a hozzá rendelt CSS-fájlt - erre is láttunk példát korábban a Firefoxban, a Web Developer kiegészítő használatával -, a böngésző saját stíluslapját felhasználva jeleníti meg az oldalt. A példa kedvéért nézzük meg, hogyan mutat eddig a Lorem Ipsum oldala ebben az állapotban, általunk készített stíluslap nélkül.
Így néz ki frissen elkészült oldalunk: egyelőre saját stílusok nélkül, a Firefox saját CSS-ével megjelenítve
Annak ellenére, hogy a küllemét semmi sem írja elő, mégis jól meg tudjuk különböztetni a címsorokat a bekezdésszövegektől, egyértelműen azonosíthatjuk a felsorolással létrehozott menüt, továbbá a hivatkozások kék színe és aláhúzott mivolta is alaposan kitűnik az amúgy fekete szövegből. Mindezt azért látjuk így, mert a Firefox a saját stíluslapjában definiált szabályok alapján jeleníti meg az általunk használt (X)HTML-elemeket. Ha valaki kíváncsi ezekre a szabályokra, ássa elő a merevlemezén azt a mappát, ahova a Firefoxot telepítette (leggyakrabban ez a C:Program FilesMozilla Firefox), majd azon belül, a res nevű alkönyvtárban kukkantson bele a html.css nevű állományba. Bár első látásra mindenféle értelmetlen dologgal fog találkozni, előbb-utóbb felfedezheti az itt jelzőként szereplő, korábban már megtanult tageket. Például a 107. sor környékén találjuk a címsorok (‹h1›, ‹h2› stb.) stílusdefinícióit, ahol megfigyelhetjük, ahogy az egyes szinteknek megfelelően mindegyiknek más-más betűméretet állítottak be a fejlesztők.
HOGY KERÜL A STÍLUSLAP A WEBOLDALBA?
Ahhoz, hogy megértsük, miért fontos az, hogy a böngészőknek saját stíluslapjuk van, meg kell fejtenünk, mit jelent a CCS (Cascading Style Sheets) kifejezésben az első szó, azaz a kaszkád. Na de ahhoz, hogy ezt megfejthessük, előbb tudnunk kell, hogyan kerülhet kapcsolatba a CSS-szabály weboldalunk (X)HTML-kódjával. Erre egészen pontosan háromféle lehetőség kínálkozik.
1. Közvetlen (inline)
Az úgynevezett közvetlen (idegen szóval: inline) módszer lényege, hogy az (X)HTML-dokumentumban az adott címke attribútumaihoz hozzáadunk egy új, style nevű attribútumot, amelynek értéke egy komplett CSS-szabály lehet, amely így meghatározza annak az oldalelemnek - és kizárólag annak az oldalelemnek! - a megjelenését. E módszer erősen kerülendő, hiszen éppen azt teszi, amit legjobban szeretnénk elkerülni: összeolvasztja a tartalmi részeket a megjelenítéssel, így épp csak egy fokkal jobb, mint ha ‹font› és hasonló borzasztó tagekkel írnánk le az oldalt. Esetleg a fejlesztés korai szakaszában használható a gyorsabb eredmény elérése érdekében, de a végleges weboldalból igyekezzünk az írmagját is eltávolítani.
Közvetlenül az (X)HTML-címkékhez rendelhetünk stílust a style tag használatával
2. Beágyazott (embedded)
Az úgynevezett beágyazott (idegen szóval embedded) módszer használatakor a stílusdefiníciók szintén az (X)HTML-oldal kódjába kerülnek, tehát ez sem számít a legjobb megoldásnak. Igaz, egy fokkal azért jobb, mint az előzőleg bemutatott inline módszer, ugyanis míg abban az (X)HTML és a CSS szinte követhetetlenül összekeveredik, ebben az esetben a stílusok az oldal ‹head›...‹/head› részében, a ‹body›-ban levő kódtól elkülönülve lesznek meghatározva. A fejrészben a CSS-blokkot a ‹style› tag vezeti be (a képen is látható type attribútum használata kötelező!), és a ‹/style› zárja le, ezen belül a korábban megismert szabályoknak megfelelően hozhatunk létre, írhatunk le stílusokat. Ha egy mód van rá, ezt se használjuk túl gyakran, mert megint csak pont azt az előnyét veszti el így a CSS, hogy nem független teljesen a tartalmi résztől. Kisebb lélegzetvételű, rövid weboldalak készítésekor, ha nagyon nem akaródzik külső CSS-állományt használni, élhetünk ezzel a módszerrel.
A beágyazott módszerrel a stílusdefiníciók az (X)HTML oldal fejrészébe (‹head›) kerülnek, így valamennyire elkülönülnek a tartalmi kódtól
3. Csatolt (linked)
A két rossz példa után lássuk végre a jót! Ebben az esetben a stílusdefiníciók a már emlegetett külső CSS-fájlban üldögélnek, az (X)HTML-oldalba pedig csak egy hivatkozás kerül be, amely arra utasítja a böngészőt az oldal behívásakor, hogy töltse be a CSS-fájlban levő stílusokat, és azoknak megfelelően jelenítse meg az oldal tartalmát. Ilyenkor tehát szó szerint hozzácsatoljuk a CSS-t az (X)HTML-hez. Ezt a ‹link› taggel tehetjük meg, amelynek három nagyon fontos attribútuma van: a rel az angol relation (kapcsolat) szó rövidítése, és pontosan a kapcsolt fájl és az XHTML-dokumentum közötti kapcsolatot írja le, amely ebben az esetben a stylesheet, azaz stíluslap. A type-pal már találkoztunk az előbb; ez azt jelzi, hogy a fájl, amelyet kapcsolunk egy szövegállomány, tartalmát tekintve pedig CSS, míg végül a href attribútum régi ismerősként köszön vissza: ez tartalmazza a stíluslap elérési útját.
Ez a módszer biztosítja a legrugalmasabb megoldást, hiszen így a stílusok egy külső állományban vannak definiálva, amelyet tetszőleges számú (X)HTML-dokumentumhoz kapcsolhatunk hozzá. Ez természetesen a másik irányban is igaz: egy (X)HTML-dokumentumhoz több külső CSS-stíluslap csatolható ily módon.
A helyes módszer: csatoljuk a külső stíluslapot az (X)HTML-dokumentumhoz!
Fontos, hogy a három ismertetett módszer nem zárja ki egymást, sőt akár azt is megtehetjük, hogy az (X)HTML-oldal fejrészében előbb csatolunk néhány stíluslapot, majd beágyazunk egy újabb definíciót, végül - eléggé elítélhető módon - közvetlenül adjuk meg néhány tag megjelenéséhez a szükséges CSS-szabályt a style attribútum felhasználásával.
MITŐL KASZKÁD?
Ezzel tulajdonképpen rá is tértünk a mit jelent a kaszkád, és mitől kaszkád egy stíluslap kérdéskörre. Egyébként pontosan ezt jelenti a kaszkád: egyszerre több stíluslapot, stílusdefiníciót is használhatunk az egyes oldalelemek megjelenésének leírásához, amelyek ily módon átfedik egymást, és valamilyen módszer szerint „lejátsszák" egymás között, hogy végül melyik szabály jut érvényre. De hogy hogyan, az már csak a következő leckéből derül ki!
