A HTML-nyelv elsõsorban szövegek egyszerû leírására szolgál, formátumára és megjelenítésére szinte semmilyen instrukcióval sem szolgál. Sokszor elõfordul, hogy a megjelenítõk nem képesek pontosan a szerzõ által megálmodott formátumban megjeleníteni a tartalmat. Ezért kell használni a stíluslapokat, amely elõször a Internet Explorer 3.0-ban, illetve a Netscape Navigator 4.0-ban jelent meg. Még egy indok a CSS-ek használata mellett: ha egyszerre párhuzamosan kell formázni sok lapot, akkor elegendõ a stíluslapot átírni és máris egyszerre átformálódik az összes weblap.
A stílus leírását többféleképpen is bele lehet ágyazni a lapokba.
A -LINK- tag segítségével
Teljes alakban: -LINK REL="stylesheet" HREF="styles.css" TYPE="text/css"- A TITLE paraméterbe bele lehet írni egy tetszõleges címet a CSS fájlból, amelyet a böngészõk felhasználnak az éppen aktuális lap megjelenítésére. Ha több ilyen is fel van sorolva, akkor a böngészõ felajánlja a választást. Javaslat: az alapértelmezett stíluslap legyen az utolsó, mivel az Explorer 3.0-ás nem ajánlja fel a választást, hanem a legutolsót jeleníti meg. Még egy tanács: a felhasználók lusták. Nem hajlandóak választani, így nem érdemes több stílust felhasználni, csak egyet, de az legyen mesterien kidolgozva. További paraméter még a HREF, ahová a stíluslap URL-je kerüljön! Az egész utalást érdemes a -HEAD-szekcióba tenni.
A -LINK- paraméterei - az említetteken kívül - nem túl bonyolultak. Az említett REL paramétere stíluslapok használatánál érthetõen kötelezõ: "stylesheet". Szintén kötelezõ a TYPE="text/css" is, mivel ez a link típusára utal. A TITLE és a HREF használatáról már szó esett. Lehet használni a DISABLED elemet is, amikor - például az oldal kipróbálásakor - semlegesíteni kell az elemet. Szintén használható a MEDIA paraméter, mely értékei szerint lehet SCREEN, PRINT vagy ALL is. (képernyõs kimenet, csak nyomtató, mindkettõ - alapértelmezés)
A -HEAD- tagen belül, közvetlenül a -STYLE- tag segítségével
A módszer az elõzõhöz képest annyival más, hogy itt nem külön file-ban kell kiírni az egyes formázási kívánalmakat, hanem közvetlenül a -HEAD- és a -/HEAD- között. Sajnos ezzel a módszerrel éppen a stíluslapok azon elõnye veszik el, hogy egyszerre lehet sok fájl formázását megváltoztatni, de akkor hasznos lehet, ha csak néhány kisebb file-t kell megváltoztatni.
A -STYLE- lehetséges paraméterei, mint a fentiekben is látható, egyszerûek. A TYPE="TEXT/CSS" kötelezõ. Használható a TITLE is a stílus címének megadásához, de ez itt igen csekély jelentõségû. Ugyancsak használhatóak az elõzõben (is) ismertetett DISABLED és MEDIA paraméterek.
Az egyes tageken belül
Harmadik lehetõség a stílus megadására a legkisebb jelentõségû, mivel ez csupán az egyes tageken belül érvényes. Lényege, hogy a stílus hatóköre pontosan addig terjed ki, amíg a tag lezárásra nem kerül. Ez is jó módszer a HTML-nyelvû lapok "megnyit-bezár" stílusú megadása miatt. Példaként közlöm a fentiekben már kétszer is megírt file egy harmadik verzióját.
Véleményem szerint a három lehetséges módszer szerint a legjobban a legelsõt lehet kihasználni, de ez is, mint oly' sok minden a HTML-nyelvben, ízlés kérdése.
Írjunk stíluslapot!
Az eddigiekben csak használtuk a stíluslapokat, de nem tudtunk írni egyet. Nos, éppen itt az ideje!
A parancsok és a lehetséges értékek használhatósága nem nehéz. Aki már használta valaha az OOP-ot (objektum-orientált programozást), már érteni fogja az öröklõdési mechanizmust, de a többieknek kicsit nehezebb dolguk lesz ezúttal.
A lényeg: ha egy tagnak megadjuk a kinézetét, akkor azon belül az összes tag ezt örökölni fogja, hacsak felül nem írjuk ezt!
Például ha a BODY taget kékre állítjuk és a B taget döntöttre, akkor mivel a B
a BODY-n belül van, ezért a -B- és a -/B- közötti rész kéken és döntötten jelenik meg. Ezt természetesen tovább lehet kutyulni össze-vissza öröklõdõ tulajdonságokkal, de nem feltétlenül érdemes. Véleményem szerint a fenti példában emlegetett B taget nem érdemes átdefiniálni "csak a hecc" kedvéért, mivel késõbbiekben nem tudunk kiigazodni az össze-vissza kutyult tulajdonságokon. Amit én személy szerint igen hasznosnak tartok, az a fejezetcímek (Hn) megvariálása.
A stíluslapok bejegyzései egyébként az alábbi formátumban jelennek meg:
Szülõk.Név (Paraméter1: Érték1, Érték2, Érték3; Paraméter2: Érték1, Érték2, Érték3)A fenti sorban 1 paraméterhez mindig 3 érték tartozik, de ez természetesen bármennyi lehet. (De azért minimum 1 legyen!) A 2 paraméter sem kötelezõ, mivel abból is csupán annyi a kikötés, hogy minimum 1 legyen. Ha a szülõt nem adjuk meg, akkor a beállított értékek a szülõtõl függetlenül jelennek meg. Ha azt szeretnénk, hogy csak a H1-es fejlécben aláhúzott szövegek jelenjelek meg kéken, akkor a következõ sort kell kiadnunk:
H1.U {color="blue"}Saját magunk is definiálhatunk alosztályokat. Ez ugyanolyan értékû része lesz a szülõosztálynak, mint bármi más része. Adjuk ki például a következõ parancsot egy CSS-file-ban:
.alairas {Font-family="Arial, Times Nem Roman CE"; Font-size=15pt; color="red"; text-decoration="blink"}Használata is egyszerû. Ha például a B
tagben szeretnénk egy imént definiált stílust használni, akkor a következõ részt kell betenni a HTML-file-ba:
-B class="alairas"- Ez már aláírás-stílus -/b-Érdemes kipróbálni a CLASS paramétert, mivel a HTML-tagek döntõ többségében használhatók!
A lehetséges stílusdefiníciók listája nem rövid, de hasznos lehet:
Még valami: a HTML-kódban egy adott paraméter értéke beállítható, ha objektum=paraméter_érték sor segítségével, ám ha simán az objektum kerül a forráskódba, akkor visszaadja a paraméter_értéket. Javaslat: sokszor nézze meg a forráskódot!
A hozzászólás csak a regisztrált és bejelentkezett tagok számára engedélyezett!
