StyleSheet használata

Az Internet manapság egyre inkább arrafelé hajlik, hogy minél nagyobb hangsúlyt fektessen az úgynevezett Cascading StyleSheet-ek használatára. Ezek szép magyar neve Lépcsőzetes stílusdefiníciók. Ha megpróbáljuk értelmezni e két szót, hamar kiderül, mire is jók a StyleSheetek. Ezek az előre definiált formázások globálissá tehetik egyes formátumainkat, és hihetetlenül leegyszerűsítik, meggyorsítják munkánkat, sőt, megszépítik weblapjainkat!
A nyelv szintaktikája igen egyszerű, már amennyiben nem nagyképűség külön nyelvnek nevezni (annak ellenére, hogy megérdemli). A HTML-hez igen szorosan kötődik, tulajdonképpen függ tőle. Adott HTML utasítások formázását végeztethetjük el vele az egész dokumentumban, sőt külön fájlba rakva a formázási utasításokat több dokumentumba is betölthetjük.
A StyleSheetek szöveges azonosítókra (pointerekre) épülnek, ezek HTML forrásbeli helye mutatja meg a formázandó részt. Bámulatos lehetőségeket nyújt, kedvünkre csinosítgathatjuk segítségével az eddig elérhetetlen HTML form elemeket (gombokat, jelölőnégyzeteket, adatmezőket), a böngésző görgetősávját, az aktuális egérmutatót, és akkor még csak a legizgalmasabbakat említettük. Természetesen megoldható egy helyen a linkek, táblázatok, bekezdések formázása, ahol lehet, egéreseményhez kötve.
A Cascading StyleSheeteknek (röviden CSS) kiemelkedő szerepük van az egyre inkább népszerűsödő DHTML "nyelvben" a JavaScript 1.2-s és 1.3-as verziójával együtt. (A DHTML - Dynamic HTML sem nevezhető külön nyelvnek; nagyon leegyszerűsítve a LAYER és DIV használó honlapok összefoglaló neve. Bővebben a  Néhány szó a DHTML-ről  című részben!)
Egyetlen hátránya van csupán ezeknek a rendkívüli lehetőségeket rejtő StyleSheeteknek: csak kevés böngésző támogatja (a Microsoft Internet Explorer a 4.0-tól és a Netscape Navigator részben a 4.5-ös verzióktól). Mégis, mint azt majd látni fogjuk, mindenképpen érdemes használatunkba venni.
Honlapunk CSS parancsait többféleképpen is elhelyezhetjük. Először is minden HTML elem rendelkezik a STYLE opcióval, mely után egy egyenlőségjellel kezdve megadhatók a formázó utasítások, pl:

Emellett lehetséges a JavaScripthez hasonlatos HEAD tagben történő megadás, továbbá a külön fájlban való elhelyezés is. Az előbbi esetben a következő szintaxist kövessük:

Ha a CSS parancsokat külön fájlban szeretnénk elhelyezni (a legtöbb esetben ez a célravezetőbb), akkor a következőképpen járjunk el:

Ezen módok valamelyikével sikeresen CSS utasítások köthetők HTML dokumentumunkhoz. A két utóbbi esetben azonban böngészőnk még nem tudja, hogy a megadott formázási utasításokat az oldal mely részén is végezze el. Az első esetben nyilvánvaló, hiszen ott az adott HTML parancsba illesztettük StyleSheet-ünket. A második és harmadik esetben szöveges mutatókra (pointerekre) lesz szükségünk. Ezeket meg kell adnunk a HTML tagen belül, így oldva meg a problémát. A szintaxis:

Hasonlítsuk össze a fenti sort a korábbi példával! Attól ez abban különbözik, hogy itt a CLASS (=osztály) szót használtuk. Ezen utasítás alkalmas arra, hogy megadja a CSS felhasználási helyét: itt tehát csak egy azonosító (mutató, pointer) szerepel, és nem pedig StyleSheet parancsok.
De hogyan is építhető fel egy StyleSheet utasításcsoport?
Kimondottan egyszerű, a hangsúly itt is azokon a bizonyos azonosítókon van (a következő példákban helykímélés végett közvetlenül egymás alatt adjuk meg a CSS és HTML parancsokat):

Itt mindjárt két példát is láthattunk. Figyeljük meg, hogy a fenti magyarázatok alapján most duplán formáztunk egy szövegrészt! A Formázott félkövér link részre ugyanis egyaránt hat a link parancsában megadott, valamint a félkövér formátumhoz társított StyleSheet is. Ezt a duplázást csak a példa kedvéért követtük el, hiszen sokkal egyszerűbb a félkövér betű (<B>) utasítást a .MUTATO osztályán (CLASS) elvégezni. (Az említetteken felül létezik még néhány CSS megadási mód, ugyanakkor ezek a leggyakrabban használatosak.)
Mielőtt rátérnénk a StyleSheet parancsainak tényleges bemutatására, meg kell még ismerkednünk a következőkkel:

  1. A CSS színmegadási módja: angol név, hexadecimális színkód, RGB kód
  2. Hosszúság megadása: pixel (képpont), hüvelyk, cm, mm, pont (1/72 hüvelyk), pica (12 pont)
  3. Értékadás egy utasításnak: utasítás_neve: adott_érték; másik_utasítás: adott_érték

Cascading StyleSheet utasítások

Minden StyleSheet parancsra igaz, hogy nevében őrzi a beállítás hierarchikus helyét, pl: font-family - betűformázás, azon belül betűtípus. Ez azt is jelenti, hogy több font kezdetű utasítás helyett egyetlen font is elég: font: arial, verdana 12px red italic; text: right uppercase. Amint az látszik, az ilyen parancsösszevonásoknál a különböző értékek közé szóközt kell tenni. Ez ugyanakkor nem nagyon szerencsés, hiszen pl. egy normal esetén a böngésző nem feltétlenül tudja, hogy a font-variant, esetleg a font-weight utasítás értékéről van-e szó.
A stíluslapok segítségével gyakorlatilag minden HTML elemet átszínezhetünk. Az új színek megadására négy alternatíva kínálkozik:

Valamely HTML elem hátterének színét a background-color: szín utasítással, háttérképét a background-image: url(eleresi_ut/fajlnev) paranccsal adhatjuk meg. Ez utóbbi használatakor szükségünk lehet az ilyenkor jól megszokott tapéta effektus kiküszöbölésére: a background-repeat: repeat, repeat-x, repeat-y, no-repeat sor nekünk megfelelő értékét beállítva mozaik, vízszintes (x tengely menti) tapéta, függőleges (y tengely menti) tapéta és középre helyezett (nincs mozaik) formát érhetünk el. Másik hasznos formázás lehet a background-attachment: scroll, fixed sorral elérhető, melynek hatására az oldal háttere görgethető (scroll) vagy rögzített (fixed). A hatás megegyezik az Internet Explorer <BODY BGPROPERTIES="FIXED"> HTML parancsával, de a CSS kóddal elvileg minden StyleSheet-támogató böngészőnek boldogulnia kell.
A stíluslapokkal bevezették a szegélyrajzolás lehetőségét minden HTML objektum köré. Használatuk főképpen a form elemek és a táblázatok esetén ajánlott. Ennek színét a border-color: szín, vastagságát a border-width: vastagság mértékegységgel, formáját a border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset utasításokkal adhatjuk meg. Utóbbi esetben a forma lehet: pontozott, szaggatott, normál, dupla, groove, ridge, bemélyülő, kiugró. Tovább alakítható a keret a border-[HELY]-[TULAJDONSÁG] sor segítségével, ahol a [HELY] helyére a top, bottom, left, right értékek kerülhetnek (fenti, lenti, bal, jobb). Ezzel mind a négy szegély darab egymástól függetlenül beállítható. A [TULAJDONSÁG] helyére bármilyen fent tárgyalt utasítás kerülhet.
Nem esett még szó a Cascading StyleSheetek eseménykezeléséről. Ezeket legjobban a linkek, hivatkozások esetében használhatjuk. Így az onMouseOver JavaScript eseménynek az A:hover, az onClick eseménynek az A:active parancs felel meg. Létezik még az A:visited utasítás is, mely a már meglátogatott linkekre vonatkozó formázási utasításokat tartalmazza. (Magyarázatképpen lásd a lenti példát!)
Ez a rövid ismertető mutatja, mindenképpen érdemes behatóbban tanulmányozni, megismerni a StyleSheeteket. Ez az oldal ugyanis csak a legszükségesebbnek ítélt parancsokat taglalja. Ezeken túl még rengeteg lehetőséget rejtenek a stíluslapok. Utoljára még két "ínyencség", a görgetősáv és az egérmutatók formázása:


BODY
    {cursor: url(elérési_út/fájlnév), auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help;
    scrollbar-arrow-color: szín; scrollbar-highlight-color: szín; scrollbar-face-color: szín; scrollbar-3dlight-color: szín; scrollbar-darkshadow-color: szín; scrollbar-shadow-color: szín; scrollbar-track-color: szín}

A képen jól láthatók a görgetősáv különböző részei. Az egérmutató formázása azonban magyarázatra szorul. Balról jobbra haladva: url, automatikus, kereszt, alapértelmezett, nyíl, mozgatás (keresztnyíl), K-i, ÉK-i, ÉNy-i, É-i, DK-i, DNy-i, D-i, Ny-i méretezés, szöveg, homokóra, segítség. Az itt felsorolt értékek valamelyike állíthatja be a dokumentum (vagy csak egy adott pl. bekezdés) egérmutatóját. Akár minden linkhez másik kurzort rendelhetünk. Fontos azonban, hogy URL-es megadás esetén, ha a böngészőnk nem támogatja ezt a módot vagy nem találja a szükséges fájlt, attól vesszővel elválasztva megadjunk másodlagos (harmadlagos, negyedleges stb.) lehetőséget is. Így ilyen esetben arra ugrik a böngésző. Pl. {cursor: url(normal.cur), url(animalt.ani), auto} sornál, amennyiben a normal.cur fájl nem található az animalt.ani, ha az sem, akkor az automatikus (adott helyen alapértelmezett, pl. linknél mutató kéz, szövegnél kurzor) egérmutató kerül megjelenítésre. De ez már tényleg csak meggy a torta habján.