12. Rövid bevezetés a stíluslapok használatába
A stíluslapok (CSS) használatával külön segédletek szoktak foglalkozni. Nem vállalkozhatunk arra, hogy ezeket pótoljuk. Mivel azonban vannak olyan funkciók, amelyeket ma már a stíluslapok átvettek a HTML-től, és egy szabványos HTML-forrásban is illik stíluslappal megoldani, mindenképpen szólnunk kell a stíluslapokról.
Mi az a stíluslap?
A stíluslap segtségével megadhatjuk, hogy mely HTML-elem milyen formában jelenjen meg. Karakterszintű HTML-elemeknél megadhatjuk, hogy milyen színű legyen a szöveg és a háttér, szövegszintűeknél azt is, mekkora legyen a margó stb. A stíluslap szabályos sorában először a HTML-elem neve következik, majd kapcsos zárójelben, pontosvesszővel elválasztva a paraméterek. A paraméterek neve és értéke közé kettőspontot kell helyezni. Ha például azt szeretnénk, hogy a félkövér betűk ne csak félkövérek legyenek, de sárga háttér előtt piros betűkkel is jelenjenek meg (erre HTML-ben nincs is lehetőségünk!), a stíluslapba a következő sort kell írnunk:
b {color: red; background-color: yellow;}
A szabályos HTML-ben ma már az oldal alapszíneit is illik stíluslapon megadni, például:
body {color: white; background-color: black;}
A stíluslapok beillesztése
A stíluslapok legnagyobb előnye, hogy egy stíluslapot annyi oldalhoz rendelünk, ahányhoz csak akarunk. A stíluslapot olyan sorokból írjuk meg, mint a fent bemutatottak, majd úgy mentjük el, hogy a neve .css-re végződjön (azaz Windowsban css legyen a kiterjesztése). Ha oldalunkon az adott stíluslapot szeretnénk hasznalni, akkor az oldal fejébe a
<link rel=StyleSheet href="stiluslap.css" type="text/css">
sort kell elhelyeznünk. (Ezek az oldalak pl. a tutor.css stíluslapot használják: erről bárki meggyőződhet, ha megnézi az oldal forrását.)
A módszer hatalmas előnye, hogy lapunk arculatát nagyon könnyen meg tudjuk változtatni. Ha lapunk korábban fehér háttéren fekete betűkkel jelent meg, de egy hirtelen ötlettől vezérelve elhatározzuk, hogy ezentúl rózsaszín háttér előtt sötétkék betűkkel szeretnénk látni, nem kell lapunk mind az ötszáz oldalát átírni, elég, ha az egyetlen stíluslapon megváltoztatjuk az értékeket.
Előfordulhat azonban, hogy a stíluslapot csak egy oldalon szeretnénk használni. Ilyenkor nem kell külön fájlba tenni, elég, ha a HTML-forrásban helyezzük el. Ilyenkor is a fejbe kell elhelyeznünk, a következő módon:
<style>
<!--
body {color: white; background-color: black;}
-->
</style>
A <!-- és --> jelek még külön magyarázatra szorulnak. Az ilyen jelek közé megjegyzéseket lehet tenni, a böngésző átugorja őket, mintha ott sem lennének. Erre azért van szükség, hogy a régi böngészők, melyek még nem tudják kezelni a stíluslapokat, ezt a szakaszt átugorják. (Az újabb böngészők a <style> elem hatására ezt a szakaszt stíluslapként, és nem HTML-ként értelmezik, ezért nem ugorják át.) A megjegyzés-elemet (figyeljük meg, olyan ez, mint egy nagy elem, mely < jellel kezdődik és > jellel végződik!) máshol is használhatjuk, bár nem mindig célszerű. A HTML-forrás ugyanis általában nem olyan bonyolult, hogy ne tudjuk megjegyzések nélkül is követni, viszont oldalunk látogatójának azt is le kell töltenie, ami sok megjegyzés esetén sok időt is jelent. A megjegyzés viszont nagyon jól használható, ha oldalunkról valamit el szeretnénkl távolítani, de tudjuk, hogy később vissza szeretnénk tenni. Ilyenkor az adott szakaszt megjegyzésbe tehetjük, így az eltávolított részt majd nem kell visszatennünk, elég a megjegyzés-jeleket törölni.
A háttérszín és a háttérkép
A háttér színe a stíluslapon a background-color paraméterrel állítható. Ebben ugyanúgy használhatjuk a HTML-ben használt angol kifejezéseket, mint a kettőskereszttel ellátott tizenhatos számrendszerbeli kódolást. Jelentős különbség, hogy míg a HTML-ben csak a teljes oldal háttérszínét határozhatjuk meg, addig a stíluslapon gyakorlatilag minden elemnek saját háttérszínt adhatunk. Természetesen itt is óvakodni kell a túlzásoktól, de jól mutathat, ha bizonyos információkat eltérő háttérszínnel is kiemelünk. Különösen jól mitathat a táblázatok háttérszínének megváltoztatása (ezt a td és ath elemben kell beállítani.
A háttérképet a background-image paraméterben jelölhetjük ki. Ennek értéke url("konyvtar/filenev.gif"), azaz az url érték mögött (mintha függvényről lenne szó) zárójelben kell megadni az elérési útvonalat. A másik lehetőség, ha az egyetlen background paraméterben egymás után (csupán szóközzel elválasztva) megadjuk egymás után a háttérszínt, ill. a háttérkép elérési útvonalát.
A betűk színe, mérete, típusa
A betűk színét a color paraméterben adhatjuk meg, ugyanolyan módon, mint a háttérét. A betűk méretét a font-size paraméterrel állíthatjuk. A betű méretét megadhatjuk képpontban (pt) vagy százalékban (%). Ez utóbbi esetben a betű aránya a HTML-fájlban hierarchikusan felette elhelyezkedő elemhez képest fog változni. Ezen kívül megadhatunk olyan értékeket, mint az xx-small, x-small, small, medium, large, x-large, xx-large (nagyságrendi fokozatok növekvő sorrendben), illetve larger (nagyobb) és smaller (kisebb). A font-style paraméterrben meghatározhatjuk, hogy dőlt (italic) vagy nem dőlt (normal) betűket használunk-e, a font-weight paraméterben pedig azt, hogy félkövér (bold) vagy nem félkövér (normal) betűket. (A stíluslapok elvileg több kövérségi árnyalatot is lehetővé tesznek, de ezeket a böngészők különbözőképpen használják, éppen ezért célszerű megmaradni ennél a két értéknél.) A betűkészletet a font-family paraméterrel választhatjuk ki, ennek értéke vagy az általános betűtípusok neve (serif, sans-serif, cursive, fantasy, monospace ), vagy egy konkrét betűkészlet neve idézőjelben. Vesszővel elválasztva több értéket is megadhatunk, a hátsókat a böngésző akkor vezsi figyelembe, ha az elsők valamiért nem elérhetők (pl. ha a betűkészlet nincs telepítve). A font paraméterben egyszerre adhatjuk meg a jellemzőket dőlés, kövérség, méret és típus sorrendben.
A szöveg aláhúzását a text-decoration paraméterrel állíthatjuk be. Ennek értéke none, underline, overline, line-through és blink (semmi, aláhúzás, föléhúzás, áthúzás, villogás) lehet. Emlékezzünk a hivatkozásoknál ajánlot sorra:
a {text-decoration: none;}
Ez a sor volt az, amely megtiltotta a hivatkozások aláhúzását.
A szöveg igazítása
A stíluslapon azt is megadhatjuk, hogy miként igazítsa a böngésző a szöveget az adott elemen belül. Erre szolgál a text-align paraméter, melynek értéke left, right, center és justify (balra, jobbra, középre, sorkiegyenlítés) lehet.
A margók
A stíluslapok lehetővé teszik, hogy beállítsuk a margókat. Erre szolgál a margin paraméter. A mértékegységet általában a használt betűkészlet magasságánban (em) szokás megadni. Ha egy értéket adunk meg, akkor az az összes oldalra vonatkozni fog; ha kettőt, akkor az első az alsó és a felső, a második a jobb és a bal margót jelzi; ha pedig négyet, akkor azok sorban a felső, a jobb, az alsó és a bal margó értéke lesz (tehát sorban, az óramutató járásának megfelelően). Ugyanezeket az értékeket egyenként a margin-top, margin-right, margin-bottom illetve a margin-left paraméterekkel állíthatjuk be.
A hivatkozások stílusa
Bizonyára feltűnt, hogy a hivatkozásokhoz HTML-ben több színt is rendelhetünk, míg a stíluslapoknál nem esett szó még ilyen lehetőségről. Ilyen lehetőség van, mégpedig a kettőspont használatával. Az a:link néven azokat a stílusjegyeket adhatjuk meg, amelyek a meg nem látogatott oldalakra mutató hivatkozásokat jellemzik. A a:visited ezzel szemben azokra a hivatkozásokra lesz érvényes, amelyek már meglátogatot oldalakra mutatnak. Az a:active pedig az éppen kiválasztott hivatkozás „felvillanásának” stílusát szabja meg. Természetesen használhatjuk a puszta a-t is, ebben az esetben a hivatkozások mindig ugyanúgy fognak kinézni.
Az osztályok
Az eddig leírtak alapján úgy gondolhatjuk, hogy a stíluslapok ugyan nagyobb szabadságát adják a tulajdonságoknak, mint a HTML, de megvan az a kötöttségük, hogy minden elemnek ugyanúgy kell kinéznie a lapon. Nos, ez sem így van. Az elemeket osztályokba sorolhatjuk, így azonos elemek is nézhetnek ki másképp. Tegyük fel például, hogy bizonyos hivatkozások nagyon fontosak, ezért pirossal és nagyobb betűkkel szeretnénk szedni őket. Ekkor a szokásos a stílus meghatározása mellett felvehetünk egy a.fontos meghatározást. Az osztály nevét itt nem kettőspont, hanem egy pont választja el az elem nevétől. Lássunk egy példát:
a {color: blue; background-color: white; text-decoration: none;}
a.fontos {color: red; font-size: larger;}
(A háttérszínt a szabvány szerint mindig meg kell adni, ha a színt is megadjuk.) Természetesen a böngészőnek tudnia kell, hogy mely hivatkozásokat tartunk mi fontosnak. Ezt a class paraméterrel határozzuk meg, tehát egy fontos hivatkozást így adunk meg:
<a href="http://www.linux.org" target=new class=fontos>Egy fontos oldal</a>
Érdemes megjegyezni, hogy az osztályoknál nem kell minden paramétert újra definiálnunk: az elem minden paraméterét „öröklik” az osztályai is, kivéve természetesen azokat, amelyeket felülbírálunk. Éppen ezért nem kell a fontos hivatkozások osztályában újra megadnunk a háttérszínt, illetve az aláhúzás elhagyását.
Feladat
Vegyük elő korábban készített lapjainkat, és a színek beállítást végezzük el a HTML helyett a stíluslapon! Használjuk ki a stíluslap nyújtotta lehetőségeket, és változtassuk meg a lehető legtöbb paramétert! (A címeket emeljük ki más háttérrel is, a korábban készített árajánlatban emeljük ki az akciós termékeket stb.)