Az egyes alakzatok formázásához eddig elemenként adtunk meg minden jellemzőt. A csoportosítás adott némi lehetőséget arra, hogy alakzatainknak egységes kinézetet biztosítsunk. A stíluslapok egy ennél sokkal hatékonyabb és szabadabb lehetőséget adnak arra, hogy dokumentumaink kinézetét egységessé tegyük. Többféle módszer kínálkozik a megvalósításra, ebben a fejezetben erről lesz szó. A stílusok megadásához eddig is CSS tulajdonságokat adtunk meg és alkalmaztunk egy-egy alakzatra. Tulajdonképpen a legegyedibb módszert már ismerjük: képesek vagyunk minden egyes alakzatot önállóan megformázni. Gyakran azonban ennél többre van szükség.
Mielőtt nekilátnánk a stíluslapok létrehozásának, egy fontos dolgot tisztázni kell, mégpedig azt, hogy a böngésző hogyan kezeli a stílusokat a megjelenítés során.
Tudnunk kell, hogy egy alakzat stílusát több helyen is megadhatjuk. A böngészőnek pedig tudnia kell, hogy ha egy alakzatra többféle formázási beállítás vonatkozik, akkor melyiket kell figyelembe vennie. Mielőtt ezt megnéznénk, lássuk, hol helyezhetők el a stílusok! Két formát már ismerünk, a másik kettő ismerős lehet azoknak, akik készítettek már stíluslappal ellátott weboldalt:
Ha egy alakzatra többféle stílust alkalmazunk, akkor a böngésző azt a megjelenítési formát választja, amelyik a "legközelebb" van az adott alakzathoz. Azaz ha egy tulajdonságot megadunk egy külső stíluslapon, akkor azt a belső stíluslap és a közvetlen stílusmegadás is felülírja. Ha egy tulajdonság a belső stíluslapon szerepel, akkor azon még mindig lehet változtatni a style elem segítségével.
Az attribútumokkal történő stílusmegadás egy kissé kilóg ebből a rendszerből: az itt megadott tulajdonságok mindegyike alacsonyabb szinten van, mint bármely másik megadási mód. Többek közt emiatt sem javasolt az önálló elemek használata a tulajdonságok megadására.
Mivel az 1. és 2. megadási módszert már ismerjük ebben a fejezetben a 3. és 4. lehetőséggel foglalkozunk csak.
Belső stíluslapot a dokumentumunkon belül tudunk készíteni, így az is szerves része lesz az elkészített képnek. Már korábban is volt szó arról, hogy hogyan épül fel egy CSS jellemző leírása. Annyit nagyon könnyen meg lehet állapítani, hogy semmiképpen sem felel meg az XML által felállított szabályoknak. Emiatt a stílusleírásokat egy megkülönböztetett részben kell elhelyezni, ami alkalmas szövegek tárolására. Ezt a részt az SVG megjelenítésekor a böngésző nem kíséreli meg alakzatok leírásaként értelmezni, így nem okoz majd problémát a másféle formátum. A stílusleírásokat egy <style> elemben kell elhelyezni az alábbi módon:
<style type= "text/css">
<![CDATA[
/* Itt helyezkednek el a CSS tulajdonsagok. */
]]>
</style>
Az elhelyezett leírások nagyon hasonlóak a <style>-ban megadottakhoz.
Általános formázási beállításokhoz először meg kell adni, hogy melyik elemtípust szeretnénk formázni, majd kapcsos zárójelek között el kell helyezni a rájuk jellemző tulajdonságokat.
12/1. feladat:
A stilus.svg fájlban találsz néhány téglalapot és kört. Készít el bennük egy olyan stíluslapot, ami az összes körhöz kék szegélyt rendel átlátszó kitöltéssel és az összes téglalapnak 3 vastagságú, narancssárga színű keretet rajzol.
Ha több dokumentumhoz szeretnénk használni az elkészített stílusokat, akkor egyszerűen el kell őket menteni egy css kiterjesztésű fájlba, majd egy feldolgozási utasítást megadni az XML dokumentum fejlécében, az alábbi módon:
<?xml-stylesheet href="stilusok.css" type="text/css"?>
Ezzel azt érjük el, hogy a stíluslap több fájlhoz is felhasználhatóvá válik. Ilyen megadáskor a <style> elemre nincs szükség és a css fájlban csak az elemeknek, és a hozzájuk tartozó stílusoknak kell szerepelniük.
12/2. feladat:
Az előző feladatban elkészített stílusokat készítsd el külső stíluslap segítségével is.
12/3. feladat:
A külső stíluslap mellé készíts el egy belsőt is, amely a téglalapokat sárga színnel keretezi.
A megoldásban megfigyelheted, hogy a külső stíluslap által meghatározott narancssárga szegélyt a belső stíluslap sárga színűre módosította. Ezzel a stílusok helyével kapcsolatos minden fontos dolgot tisztáztunk.
Legtöbbször nem arra van szükségünk, hogy egy alakzat összes előfordulása azonos stílusjellemzőkkel legyen ellátva. Sokkal inkább néhány elemnél szeretnénk alkalmazni egy közös stílust. Ilyenkor osztályokat kell definiálni. Ezt kétféle módon tehetjük meg. Rendelhetünk osztályt az elemek egy típusához, például a körökhöz, vagy általános osztályt is létrehozhatunk.
Ha bizonyos elemekhez szeretnénk stílust rendelni, akkor az elem neve után egy pontot kell tenni, majd megadni a stílusnak választott nevet. A stílus leírása ugyanúgy történik, mint eddig. Az így elkészített stílus csak a kijelölt elemhez használható.
Általános osztály létrehozásakor nem kell elemet meghatározni, csak egy nevet kell adnunk az osztálynak. Az osztály neve elé pontot kell tenni. A stílusmegadás itt is a megszokott módszerrel történik.
Mivel nem minden elemre érvényes stílust készítettünk, meg kell még adni azt is, hogy mely elemekre vonatkozzanak az elkészített stílusok. Ezt úgy tehetjük meg, hogy az elem attribútumai közé felveszünk egy class nevűt. Ennek értékeként pedig megadjuk a használni kívánt osztály nevét. Egy attribútumban több osztály is megadható.
12/4. feladat:
A 12/1. feladat megoldását egészítsd ki egy körökre vonatkozó osztály létrehozásával, ami a kitöltő színt zöldre állítja. Alkalmazd ezt a stílust a fájlban szereplő első körre és első téglalapra.
Ha helyesen jártál el, akkor - annak ellenére, hogy alkalmaztad rá a stílust - a téglalapok közül egyik sem lett zöld színű. Ennek oka, hogy a stílus a körökre volt kialakítva, ezért téglalapokra nem alkalmazható.
12/5. feladat:
Az eddig elkészített stílusok mellé helyezz el egy újabbat. Ez egy általános osztály legyen, ami az alakzat átlátszóságát 0.5-re állítja és a szegélynek 5 vastag sárga vonalat ad. Alkalmazd ezt a második körre és a második téglalapra. A harmadik körre ezt és az előbb létrehozott osztályt is alkalmazd.
