A stíluslapok a HTML szabvány 4.0-ás verziója óta használhatók. Ettől kezdve igaz az, hogy a HTML-nyelv valójában csak a dokumentum szerkezetét hivatott leírni, a megjelenését nem. Ez utóbbi egy teljesen külön részben adható meg.
A dokumentumok megjelenését a hozzájuk rendelt tipográfiai szabályokkal lehet befolyásolni. Ezeket a szabályokat gyűjtik össze a stíluslapok. Az egyes bekezdések formai megjelenésétől a dokumentumban alkalmazott színeken át a táblázatok és a képek formájáig és megjelenési helyéig mindent a stíluslapban lehet megadni. Amilyen tulajdonságot itt nem definiálunk, arra a megjelenítésre használt böngésző a saját alapértelmezett tulajdonságait használja.
Miért jó a stíluslap? Elsősorban azért, mert egy önálló állományban található, amelyet a böngészőnek külön le kell töltenie. Ettől kezdve azokban a dokumentumokban, amelyben a stíluslapban előírt megjelenést szeretnénk viszontlátni, elég egy rövid utasítást elhelyezni a böngésző számára, hogy alkalmazza a dokumentum megjelenítésére a stíluslapban megadott szabályokat.
Az előny abból származik, hogy egy adott stíluslapot akárhány weboldalnál használhatunk. Ezek megjelenése garantáltan egységes lesz, mivel mind a színek, mind a szöveg kinézete egységes lesz valamennyi oldalon. Amennyiben pedig változtatni szeretnénk a kinézeten (például mert nem tetszenek az oldal színei), csak egyetlen állományt kell módosítani – a stíluslapot –, és attól kezdve valamennyi oldalra érvényes lesz a változás. Régen, amikor a színeket is a HTML-dokumentumban kellett megadni, ilyenkor az összes oldalon át kellett írni a színeket egyenként, ami hosszadalmas lehet, és fennál a veszélye, hogy valamelyik oldalt kihagyjuk. Ezzel összehasonlítva valóban sokkal kényelmesebb helyzet állt elő.
Másik előnye a stíluslapoknak, hogy a dokumentum tartalma és a tipográfiai szabályok teljesen különválnak, nem keverednek egymással, így könnyebb egyiket a másiktól függetlenül megváltoztatni.
Stíluslapokat háromféleképpen lehet alkalmazni:
Különböző stílusleíró nyelvek használhatók, de a leginkább elterjedt a CSS (Cascading StyleSheet), így a továbbiakban ezt fogjuk tárgyalni. Ennek nevében a cascading szó éppen arra utal, hogy az egyes stílusdefiníciók felülbírálhatják egymást. Általános szabály, hogy a később szereplő szabály elnyomja a régebbit, ezért először mindig a legáltalánosabb szabályokat kell megadni, majd az ehhez képesti eltéréseket adjuk meg a későbbi szabályokkal. Ugyanakkor az általános szabályt a speciálisabb esetekre vonatkozó szabályok általában felülbírálják, ami az előzőnek részben ellentmond. A szabályok érvényesülési sorrendjéről még a későbbiekben ejtünk szót.
Ennek alapján is látható, hogy a három szabály megadási mód hogyan használható: A külön állományban elhelyezzük az általános, minden ezzel a stíluslappal megjelenő dokumentumban érvényes tipográfiai szabályokat a legáltalánosabbtól a legegyedibb felé haladva.
Erre a stíluslapra azután a LINK elemmel hivatkozunk a HEAD elemen belül, amelynek három paramétere a következőképpen néz ki:
rel="stylesheet": ez a paraméter ezzel az értékkel jelzi a
böngészőnek, hogy az elemben a használandó stíluslap adatait kívánjuk megadni.
type: a stíluslap típusa. A CSS esetén az értéke:
"text/css" legyen.
href: a stíluslap helye a szokásos módon
megadva.
Egy dokumentumhoz több stíluslap is alkalmazható, melyek vagy egymást egészítik ki – ekkor a sorrendjüktől függ a szabályok alkalmazása –, vagy lehet különböző megjelenítési módokhoz tartozó szabályokat leíró stíluslap, esetleg a felhasználó által választható alternatívák is megadhatók.
Ezután ha az adott oldalon egyedi, csak ezen az oldalon alkalmazandó
szabályokat is akarunk alkalmazni, akkor azt – még mindig a
HEAD elemen belül – a
STYLE elemen belül tehetjük meg. Ennek az
elemnek a type paraméteren keresztül
szintén tartalmaznia kell a stílusleíráshoz használt nyelv megnevezését.
Amennyiben egy adott elemnél speciális, csak arra az egy elemre alkalmazandó szabályokat akarunk alkalmazni, akkor arra két módszert használhatunk.
Az egyik módszer, ha az elem paraméterei között szerepeltetjük a
style paramétert, amelynek értékül
azt a szöveget adjuk, amely megadja az alkalmazandó szabályokat. Például:
A másik lehetőség, hogy a dokumentumra érvényes szabályok között
szerepeltetjük ezeket a szabályokat úgy, hogy kifejezetten egy elemre érvényes
szabályként adjuk meg. (Erre lehet használni az
id paramétert).
A stíluslapok megadására íme egy összetett példa, amelyben elsődlegesen a main.css nevű, a dokumentummal azonos könyvtárban található stíluslap szabályait alkalmazzuk, de a listaelemek szövegszínét kékre állítjuk:
A továbbiakban a Cascading StyleSheet nyelvi elemeiről lesz szó.
Példákat a további fejezetekben lehet majd találni, ahol együtt fognak már
szerepelni a HTML elemek, és a hozzájuk stíluslapok segítségével megadható
szabályok. Bár stíluslap segítségével nem csak a képernyőn megjelenő dokumentum
tipográfiáját lehet megadni, hanem a nyomtatásra vonatkozó szabályokat, vagy
akár a dokumentum hanggal történő megjelenítésére
vonatkozó szabályokat
is, mi azonban a továbbiakban csak a képernyőn való megjelenítéssel fogunk
foglalkozni. A többi szabályt a CSS szabványában meg lehet találni (a
tartalomjegyzék alatti hivatkozások között mellékletként megtalálható).
Minden szabály először egy
szelektorral kezdődik, amely
megadja, hogy mely elemek megjelenítésekor kell az adott szabályt alkalmazni.
Ezután kapcsos zárójelek ({ és }) között kell
pontosvesszővel elválasztva megadni a tulajdonságokat és értéküket.
A tulajdonság megnevezését egy kettőspont követi, és ezután következik a tulajdonság értéke, amely többféle is lehet.
Amennyiben valahol hibás szabályt alkalmazunk, akkor azt a böngésző
egyszerűen kihagyja, és nem alkalmazza. Ha már a szelektor hibás, akkor az egész
szabályt, különben lehet, hogy csak a hibás tulajdonság megadását, és ami még
utána következik a szabályban, azt hagyja figyelmen kívül.
A tulajdonságok lehetséges értékei
Ahhoz, hogy tudjuk, hogyan befolyásolja a stíluslap a weboldalon levő elemek megjelenését, tudnunk kell, hogy milyen módon jeleníti meg a böngésző azokat.
Először is a HTML-elemek kétfélék lehetnek a megjelenítés szempontjából:
Erről lásd még bővebben a doboz-modellt bemutató oldalt.
Következő: A doboz-modell