A feszültség a tetőfokára hágott, amikor legutóbb „kicsengettek", ugyanis épp azt kezdtük el tárgyalni, hogy mit jelent a Cascading Style Sheets kifejezésben a Cascading, és hogy ennek mi köze a különböző módon megadott stíluslapok érvényesüléséhez. Előtte megértettük, mi a CSS szerepe a weboldalak életében, miért van rá szükség, és mit nyerünk a használatával. Láttuk, hogy épül fel egy stílusdefiníció, hogyan hivatkozunk a CSS-ben a HTML-elemekre (elhagyjuk a kisebb-nagyobb jeleket a tag nevéből), és hogyan adjuk meg a különböző formázási tulajdonságokat. Kicsit tanulmányoztuk a Firefox saját stíluslapját, végül áttekintettük azt a háromféle lehetőséget, ahogy a stíluslap kapcsolatba kerülhet a HTML-oldallal: közvetlen megadással a HTML-elemnél, beágyazással a HTML-oldal fejlécében vagy külső CSS-állomány csatolásával ugyanott.
Mindent összevetve tartalmas lecke volt, szóval, ha valakinek a fentiek közül bármi is kínaiul hangzik, jól teszi, ha pótolja a mulasztást, mert most aztán jól beleássuk magunkat a témába!
KASZKÁD! A TIED!
Valószínűleg nem véletlen, hogy a kaszkád stíluslapok kifejezés helyett egyszerűen csak stíluslapokat szoktunk emlegetni, jótékonyan megfeledkezve az előtagról, amelynek hallatán a felkészületlen hallgatóság azt hiheti, hogy épp valamelyik fura rokonát emlegetjük, vagy egy ízeset káromkodunk. Attól azonban, hogy a kaszkád nem fogja megnyerni a „legszebb magyar szó" díjat, még rendkívül fontos szerepe van a stíluslapok működésében, mondhatni alapvetően meghatározza, hogyan fog megjelenni a weboldalunk a böngészőben.
Egyszerű példaoldalunk (proba.html) lényegi részét három bekezdés alkotja (15-17. sorok), a fejlécben viszont csatolunk egy külső CSS fájlt (8. sor), beágyazunk egy stílusdefiníciót (10-12. sorok) és a harmadik bekezdésnek közvetlenül is adunk stílust
Átmenetileg elbúcsúzunk a kiváló Lorem Ipsum konferencia készülő weboldalától, helyette egy nagyon egyszerű HTML-oldallal fogunk dolgozni. A képen látható pelda.html állományt mindenki pillanatok alatt elkészítheti magának. Ugyanis mindössze három bekezdésből áll és remélhetőleg semmi olyat nem tartalmaz, amelyről ne volna már tudomásunk.
A külső CSS állomány (proba.css) a bekezdések megjelenését írja le: beállítjuk a betűkészletet, a betűméretet, a bekezdés sortávolságát és színét
Ami a CSS-t illeti, a 8. sorban csatolunk egy külső, pelda.css nevű stíluslapot a weboldalhoz. Ez mindössze egyetlen szabályt tartalmaz, amely azt határozza meg, hogy bekezdésszövegeket Verdana, Helvetica vagy valamilyen „talpatlan" (sans-serif) betűtípussal, 12 pont méretben, másfeles sortávolsággal és #0000ff színnel kell megjeleníteni. [A #0000ff kifejezésről már tudjuk, hogy ez az adott szín piros, zöld és kék (RGB) összetevőit határozza meg, mégpedig tizenhatos (hexadecimális) számrendszerbeli számokkal. Ebben az esetben 0 piros, 0 zöld és ff, azaz 255 kék komponenst tartalmaz majd a szín, tehát a bekezdés színét „teli kékre" állítjuk.
A HTML-oldal 10., 11. és 12. sorában beágyazunk egy másik CSS-szabályt, amely azt határozza meg, hogy a bekezdésszövegeket piros színnel kell megjeleníteni. Itt találkozhatunk a színmegadás egy sokak számára talán szimpatikusabb módjával; ha valaki netán ódzkodna a tizenhatos számrendszertől, használja inkább ezt nyugodtan. A módszer ugyanaz, mint a korábbiakban, tehát színösszetevőket adunk meg, csak az rgb kifejezés utáni zárójelben tízes számrendszerben írhatjuk be azok értékét. Végül vegyük észre, hogy a 17. sorban levő harmadik bekezdésünknek style attribútuma van, amellyel közvetlenül ahhoz a bekezdéshez rendelünk stílust. Ismét a színt határozzuk meg, mégpedig egy harmadik módon: a szín angol nevének (green, azaz zöld) megadásával.
KONFLIKTUSHELYZET
Nem elég, hogy három helyen háromféleképpen határoztuk meg a weboldal megjelenítéséről gondoskodó stílusokat, ezek egy pontban, a szín tekintetében teljesen ellentmondanak egymásnak. A külső stíluslap minden bekezdést kékre állít, a belső mindent pirosra, a közvetlenül megadott pedig zöldre. Tessék, lehet tippelni, milyen színűek lesznek azok a bekezdések! Nyissuk meg a Firefoxot, töltsük be a proba.html oldalt, és vegyük szemügyre a végeredményt. Azok nyertek, akik két piros és egy zöld bekezdésre tippeltek.
Az tudta jól, aki két piros és egy zöld bekezdésre tippelt végeredményként
Mi történt? Akcióba lépett a stíluslapok kaszkád jellege! A kaszkád - amely garantáltan nem lépcsős vízesés jelentésében fordul itt elő, bármit is mondjanak a különböző webes enciklopédiák és lexikonok - ugyanis azt jelenti, hogy a külső CSS -állományban, valamint a HTML-állományban meghatározott három stílusdefiníció nem helyettesíti, hanem átfedi egymást, és fontossági sorrendjük szerint jutnak érvényre az adott oldalelemek megjelenésében. A fontossági sorrendet az határozza meg, hogy az adott stílust hol definiáltuk. A sor végén kullog a böngésző saját beépített stíluslapja, előtte áll a sorban a csatolt külső CSS-állomány, ez előtt a HTML-oldal fejlécébe beágyazott stílus és végül a legnagyobb súllyal esik latba a közvetlenül a HTML-tagekbe beleírt, style attribútummal megadott stílus.
STÍLUSELEMZÉS
A kaszkádelv működésének ismeretében próbáljuk meg értelmezni, hogyan alakult ki a böngészőben látható végeredmény. Hogy pontosan megértsük, melyik stíluslap mikor és hogyan fejti ki hatását, egyik kedvenc Firefox-kiegészítőnket, a Web Developer eszköztárat hívjuk segítségül. A CSS --› Disable Styles menüben, sorban kapcsoljuk ki a következő stíluslapokat: Browser Default Styles (böngésző), Embedded Styles (beágyazott), Inline Styles (közvetlen), Linked Style Sheets (csatolt).
Három dologra kell ügyelnünk:
- 1. valamilyen megmagyarázhatatlan oknál fogva a menüpontok sorrendje véletlenül sem tükrözi az előbb említett fontossági sorrendet. Ez ne zavarjon meg senkit, főleg ne keverje össze a dolgokat!
- 2. semmiképpen ne használjuk az All Style menüpontot, mert az a böngésző stíluslapját nem kapcsolja ki! (Szintén elég nehezen megmagyarázható, de valószínűleg történelmi okai lehetnek.)
- 3. ha véletlenül újratöltenék az oldalt az ‹F5› billentyű megnyomásával, a Web Developer elfelejti a beállításainkat, tehát a stíluslapokat újra ki kell kapcsolni.
A böngésző stíluslapja
Vegyük akkor szemügyre a kiinduló állapotot. Jelenleg minden stíluslap valóban ki van kapcsolva, a három bekezdésünk tehát csenevész kis szövegként, szinte egymáshoz tapadva ücsörög a böngésző bal felső sarkában. Induljunk el a fontossági sorrend legvégéről. Először is kapcsoljuk be a böngésző saját stíluslapját, tehát vegyük ki a pipát a Browser Default Styles menüpont elől.
Minden stíluslapot kikapcsolva a bekezdések teljesen átlagosan kinéző, kisbetűs szöveggé töpörödnek össze
A Firefox saját stíluslapja - amely a Program Files alatti Mozilla Firefox mappa res nevű alkönyvtárában található html.css néven - úgy rendelkezik a bekezdésszövegről (65. sor), hogy az blokk szintű elem és 1em méretű felső és alsó margója van.
Ha megnézzük a Firefox stíluslapját, választ kapunk arra, miért kerültek a bekezdések távolabb egymástól
A blokk szintű elemmel most ne foglalkozzunk, ami figyelemre tarthat számot, az a felső-alsó margó, ez okozza ugyanis az üres sorokat a bekezdések között, ettől szűnik meg az előbb látott összetapadás. (Későbbi leckében megtanuljuk majd, hogy minden blokk szintű elemet négy oldalról külső margó, keret és belső margó határolhat. Ezt most még nem annyira lényeges tudnunk, csak próbáljuk követni az eseményeket.)
Visszakapcsolva a Firefox saját stíluslapját máris megváltozik a betűtípus, a betűméret és a bekezdések távolabb kerülnek egymástól
Az em egyébként nagyon érdekes mértékegység, jelentése ugyanis a következő: az éppen beállított betűméret. Ha az éppen beállított betűméret 10 pont, akkor az em is 10 pont. Ha 18 képpont, akkor a 4em kifejezés pontosan 72 képpontot jelent. A stílusok kialakítása során nem mindig tudjuk pontosan, hogy egy adott CSS-szabály milyen betűméretű elemre fog vonatkozni - ezért kapóra jön egy olyan mértékegység, amely nem abszolút mértékben határozza meg a méretet, hanem az éppen aktuális betűmérethez viszonyítva relatív módon. Tehát az 1em méretű felső-alsó margó magyarra lefordítva azt jelenti, hogy amekkora a bekezdésszöveg, annyi üres helyet hagyj ki a bekezdés felett és alatt - így jön létre az üres sor a bekezdések között. Szemfülesek kiszúrhatják, hogy a dolog nem stimmel. Hiszen ha felül is, alul is van üres sor, akkor két bekezdés között kétszer akkora üres helynek kéne lennie - a felső bekezdés alsó margója, plusz az alsó bekezdés felső margója. A margó azonban nem úgy működik, ahogy azt Móricka elképzeli: az egymással szemben álló margópárok „egyesülnek", ezért van csak egy üres sor minden bekezdés között.
A böngésző beállításai között pedig megtaláljuk az alapértelmezett betűtípus-, betűméret- és színbeállítást
Na jó, de mekkora is a bekezdésszöveg mérete? Nyissuk meg a Firefox Eszközök -› Beállítások paneljét, kattintsunk a Tartalom ikonra, és vegyük szemügyre középen a Betűk és színek részt. Akkora, mint ami ott be van állítva alapértelmezettként, és mellesleg azzal a betűtípussal is jelenik meg: esetünkben ez 16 képpont méretű, Times New Roman betűtípus, tehát az 1em 16 képpontot jelent. Még egy érdekesség: a Beállítások panelen a Színek gombra kattintva tudjuk átállítani az alapértelmezett színeket. Mint látható, a szöveg esetén ez fekete, ezért látjuk most is feketében a bekezdéseinket.
Csatolt külső CSS fájl
A böngésző stílusát kiveséztük, lépjünk előre a fontossági sorrendben, és érvényesítsük a kapcsolt stíluslapot, azaz vegyük ki a pipát a Web Developer eszköztár CSS --› Disable Style menüjében a Linked Style Sheets menüpont elől. Látható, hogy azonnal érvénybe lépett mindaz, amit a proba.css fájlban a bekezdésszövegekkel kapcsolatban meghatároztunk: megváltozott a betűtípus (Verdana), a betűméret (12pt), a sortávolság és a betűszín - minden bekezdés kék lett.
A külső CSS fájlban definiált formázási szabályok bekapcsolásakor megváltozik az oldal kinézete; a bekezdések közötti üres sorokat a Firefox stíluslapjáról örököljük
Keresztkérdés: mi az a formázás, amit nem állítottunk be a külső CSS fájlban, mégis jól láthatóan érvényben van? A jó válasz: a felső-alsó margók! Mivel ezzel kapcsolatban a mi stíluslapunk semmilyen szabályt nem tartalmaz, a böngésző saját stíluslapjának beállítása továbbra is érvényben marad.
A bal alsó ablakrészben az egyik bekezdésre mutatva a Firebug kiegészítő fent színezéssel, jobbra lent számadatokkal mutatja meg a bekezdés szerkezetét (a sárga csíkok a margók)
Hogyan győződhetünk meg erről? Használjuk a másik nagyon hasznos Firefox kiegészítőnket, a Firebugot. Kattintsunk a jobb egérgombbal valamelyik bekezdésszövegre! Amennyiben a kiegészítő fel van már telepítve, a megjelenő menü alján látnunk kell egy Inspect Element menüpontot. Kattintsunk rá, mire a Firebug jól láthatóan beköltözik a böngésző ablakának aljába. (Innen később a saját paneljének jobb felső sarkában látható kis piros X-szel tudjuk eltüntetni.) A vízszintesen kettéosztott ablakrész bal oldalán weboldalunk HTML-kódját, jobb oldalán az éppen kijelölt oldalelem kinézetét befolyásoló, ott érvényben levő CSS-szabályokat látjuk. A margó ugyan nincs köztük, de ha a bal oldali ablakrészben az egérmutatót a kijelölt szöveg fölé mozgatjuk, felül a Firebug kiszínezi a bekezdésünket, hogy láthatóvá tegye a szerkezetét: világoskékkel jelöli magát a bekezdést, a felül és alul látható sárga csík pedig a margót jelöli, amit a Firefox stíluslapjától örököltek bekezdéseink. (Valószínűleg annak is történelmi okai vannak, hogy a böngésző saját stíluslapját gyakran úgy kezelik, mintha nem is létezne, noha a hatása folyamatosan érvényesül.)
A Firebug nagy trükkje, hogy dinamikusan szerkeszthetjük vele a CSS-t, például eltüntethetjük a böngésző stíluslapjától „örökölt" margókat
Próbáljuk ki a következő trükköt: a bal oldali ablakrész menüjében kattintsunk a CSS menüpontra, majd a felette látható világosabb csíkon az Edit feliratra. Ezzel a módszerrel az érvényben levő stíluslapot tudjuk szerkeszteni, méghozzá dinamikusan: bármit be- vagy átírunk, a változás azonnal látható a böngészőben. Menjünk az utolsó sorba, és a zárókapcsos zárójel elé írjuk be, hogy margin: 0; - ezzel tulajdonképpen kikapcsoljuk a margókat. Ezzel felülbíráljuk a böngésző stíluslapjának beállítását. Látható, hogy a bekezdések máris „összeugrottak", eltűnt közülük az üres sor. A szerkesztés nincs hatással magára a CSS fájlunkra, a változások csak a böngészőben jelentkeznek. Erről meggyőződhetünk, ha az ‹F5› billentyű megnyomásával újratöltjük az oldalt.
A Firebug több szempontból is zseniális kiegészítő, minél jobban elmerülünk majd a weboldalak világában, annál nagyobb segítségünkre lesz, mint azt látjuk majd a későbbiekben is.
Beágyazott stílusdefiníció
Lépjünk ismét előre a fontossági so rrendben, és kapcsoljuk be a HTML-állomány fejlécébe (‹head›...‹/head›) beágyazott stílusdefiníciót (‹style›...‹/style›). A Web Developer eszköztár Disable CSS almenüjében tehát most már csak az Inline Styles van kipipálva.
A beágyazott stílusdefiníció betűszín-beállítása felülbírálja a csatolt CSS fájlban lévőt, így a bekezdések bepirosodnak
Reméljük, senki nem számított másra, mint ami történik: bekezdéseink bepirosodnak a megadott szabálynak köszönhetően. Itt azonban ismét érdemes figyelni a Firebugra (ha becsuktuk volna, most nyissuk meg újra), amely a jobb oldali ablakrészében máris szemlélteti számunkra a történteket! Alul láthatók a pelda.css állományból beolvasott formázások, köztük azonban az első sorban a color ki van húzva. Azt is láthatjuk, hogy mi ennek az oka: a pelda.html állományban levő definíciónk ezt felülbírálta. Ugyanakkor a betűkészlet, betűméret és sortávolság beállításaink szépen átöröklődtek a külső CSS fájlból, mint ahogy a margóbeállítások is a böngésző saját stíluslapjáról.
A Firebug a jobb oldali ablakrészében „levetíti" nekünk, a két ütköző stílusleírás közötti konfliktus kimenetelét
Közvetlen stílusmegadás
Utolsó lépésként kapcsoljuk vissza a közvetlen stílusdefiníciót is, így a harmadik bekezdésünk - ahol ezt a csúnyaságot alkalmaztuk - bezöldül. (Ugye emlékszünk az előző leckéből, hogy a közvetlen stílusmegadás a gyengék fegyvere, épp csak egy fokkal jobb, mintha ósdi ‹font› tagekkel és egyéb szörnyűségekkel tömnénk tele a HTML-kódunkat, épp ezért ehhez a módszerhez csak a legvégső esetben folyamodunk!) Érdemes ismét a Firebugra pillantani, ahol jól látható, hogy mind a külső CSS fájlt, mind a beágyazott stílus színbeállítását felülbíráltuk. A közvetlen stílusmegadásra az element.style (elemstílus) kifejezéssel hivatkozik a kiegészítő. Kattintsunk a bal oldali ablakrészben a többi bekezdésre is, és figyeljük meg, hogy azokra természetesen nem vonatkozott ez a formázás.
Ezúttal már minden stílusbeállításunk működik: a harmadik bekezdésnek közvetlenül megadott formázás természetesen csak rá vonatkozik, ezért egyedül ő lesz zöld
NEM ESZIK OLYAN FORRÓN...
Amennyiben a stíluslapok kaszkád jellege, az átfedések, öröklések működése nem teljesen világos, nehogy feladjuk itt! Bár kétségkívül hasznos, ha legalább rálátás szintjén tisztában vagyunk a dologgal, a jó hír az, hogy a későbbiekben nem fogunk nagyon elveszni ennek részleteiben. A legcélravezetőbb módszer, ha az ember külső, csatolt stíluslapon vagy lapokon keresztül írja le weboldalának küllemét, és ha egy mód van rá, nem keveri ezeket a lehetőségeket. Közvetlen stílusmegadáshoz csak a legeslegvégső esetben nyúlunk, míg a beágyazott módszert az adott oldal fejlesztése során szokás használni, hogy később onnan külső CSS fájlba költöztessük a már véglegessé váló stílusdefiníciókat. Kísérletezzünk bátran, használjuk a Firebug kiváló képességeit a CSS működésének jobb megértéséhez.
*
Legközelebb elkezdünk ismerkedni a különböző stíluselemekkel, és ha minden jól megy, egy életre leszámolunk a böngésző saját stílusával.
