CSS Rétegek

CSS Rétegek

A CSS alapú megjelenítés kor minden abszolútként pozícionált elemnek van egy pozíciója a harmadik dimenzióban, a "z" tengely mentén (ide érthetjük a gyökér elemet is, ami a left:0, top:0 pozícióba van pozícionálva). Az "x" tengely a vízszintes, az "y" tengely a függőleges pozíciót jelöli, a "z" tengely pedig ebben az esetben a mélységet.

A mélységet akkor tudjuk értelmezni a monitor sík kijelzőjén, ha több ilyen elem egymásra kerül, egymást elfedi. Ekkor az fogja elfedni a másikat, mely előrébb, "közelebb" van a felhasználóhoz, vagy másként mondva, "feljebb" van a z tengelyen.

A z tengelyen való elhelyezkedést a z-index tulajdonság segítségével, egy egész számot használva adhatjuk meg. Az alapértelmezett érték 0. Ha két elem azonos mélységgel rendelkezik, akkor a HTML-ben a később leírt fog "feljebb" megjelenni. Ha más értéket adunk meg, a nagyobb számmal bíró elem kerül közelebb a felhasználóhoz. Például:

• #message { z-index: 1; }  

Nemzetköziség: szövegek iránya, kétirányúság

Sok nyelvben (például héber, arab, etc.) az írás nem balról-jobbra, hanem jobbról-balra folyik, sőt, szükség lehet arra is, hogy egy dokumentumon belül vegyesen jelenjenek meg a nyelvek. Ez utóbbit hívják bidirekcionális, kétirányú, röviden "bidi" megjelenítésnek.

A CSS nyelv ezek befolyásolására is kínál megoldást két tulajdonság segítségével: direction és unicode-bidi.

Szövegirány tulajdonság

A tulajdonság segítségével az határozható meg, hogy egy blokk elemen belül a szövegünk balról-jobbra, vagy jobbról-balra folyjon. Ezekhez járul a két érték is, amit felvehet: ltr és rtl (azaz left-to-right és right-to-left). A tulajdonságot egy blokk elemre és beágyazott elemekre (lásd mindjárt a kétirányú tulajdonságot) használhatjuk. A szöveg irányán kívül befolyásolja még a táblázat oszlopainak sorrendjét, a vízszintes túlcsordulás irányát és a justify értékű szöveg utolsó sorának igazítását. Használata:

• p.hebrew { direction: rtl; }  

Kétirányúság tulajdonság

A szövegirány tulajdonságot alapesetben egy blokk elem (például paragrafus) szövegének az irányítására használhatjuk, azonban előfordulhat az is, hogy egy blokkelemen belül szeretnénk, ha több irányú szövegünk is lenne (mondjuk egy idézet miatt). Erre szolgál a kétirányúság tulajdonság, mellyel egy beágyazott elemet jelölhetünk ki arra, hogy hasson rá a szövegirány tulajdonság (alapesetben a blokk elem tulajdonsága a mérvadó). A unicode-bidi jelöli a tulajdonságot, melynek három értéke lehet: normal, embed, bidi-override. A normal érték esetén a beágyazott elemekre nem lehet megadni kétirányúságot, embed és bidi-override esetén az adott elemre lehet megadni, és az elemen belül kerül értelmezésre a szövegirány tulajdonság. Az embed érték esetén az újrarendezése a betűknek implicit módon, míg a bidi-override esetén a direction-nek megfelelően történik. Használata:

• .hebrewquote { direction: rtl; unicode-bidi: embed; }  

Dinamikus tartalmak

A CSS 2 magával hozta a dinamikusan generált tartalom lehetőségét, melyet a before és after látszólagos elemek esetén tudunk felhasználni (be is lett ott mutatva egy példa). A dinamikus tartalmak eléggé változatosak lehetnek, lehetőségünk van vegyesen karakterláncok, külső objektumok, számlálók, idézőjelek és az adott elem attribútumainak beszúrására. Ha több elemet szeretnénk beszúrni, szóközzel kell elválasztanunk az értékeket.

Sztringek beszúrása

Az említett, a látszólagos elemeknél bemutatott példában már be lett mutatva egy ilyen. Álljon itt egy másik példa, mely minden paragrafus elé beszúrja a [para] szöveget (a szöveg nem kerül értelmezésre a böngésző által, egy az egyben fog megjelenni a tartalmától függetlenül):

• p:before { content: '[para]'; }  

Külső objektumok

Külső objektum bármi lehet, amit a böngésző értelmezni tud. A következő példa egy képet jelenít meg minden paragrafus előtt:

• p:before { content: url(/images/para-start.gif); }  

Idézőjelek
Idézőjelek beszúrását is megtehetjük. A látszólagos nyelvi elemek kiválasztónál már említettük, hogy hogyan befolyásolható ezeknek az idézőjeleknek a megjelenése (még ki fogunk rájuk térni), most azt láthatjuk, hogyan tudjuk beszúrni ezeket. Négy lehetőségünk van: open-quote, close-quote, no-open-quote, no-close-quote. Rendre: nyitó idézőjel, záró idézőjel, nyitó idézőjel (megjelenítés nélkül) és záró idézőjel (megjelenítés nélkül) lehetőségeink vannak. A megjelenítés nélkül azt jelenti, hogy számlálásra kerülnek, de nem jelennek meg. Példa:

• q:before { content: open-quote; }  

Attribútumok
Az adott elem tulajdonságának értékét is beszúrhatjuk szövegként az elem elé, vagy mögé. A példa egy link mögé szúrja be a href tulajdonságának értékét:

• a:after { content: " (" attr(href) ") "; }  

Számlálók
A számlálókat paragrafusok, vagy akár bármilyen más elem sorszámozására használhatjuk. Indíthatunk több számlálót, törölhetjük és növelhetjük az értéküket. A számlálókat a nevük azonosítja.
Számlálók megjelenítése
Két lehetőségünk van, a counter() és a counters() "függvény" használata. Az előbbinél egy nevet, illetve egy nevet és egy típust, míg az utóbbinál egy nevet és egy sztringet, illetve egy nevet, egy sztringet és egy típust kell megadnunk. A típus a felsorolásoknál használt lehetőségeket használhatja, ha nem adjuk meg, akkor decimális lesz. A counters() annyiban különbözik a counter()-től, hogy megjeleníti az összes felmenő számlálót is, összefűzve azok értékét a sajátjával. A megadandó név szolgál arra, hogy azonosítsa az összetartozó számlálókat. Példa:

• h1:before { content: counter(headermains) '.'; }  

Számlálók újraindítása
Ha egy adott elem után szeretnénk, hogy a számlálónk újrainduljon, vagy egy adott értékre visszaálljon, akkor használhatjuk ezt a "tulajdonságot". Egyszerre több számlálót is felsorolhatunk, mindegyik után írhatunk egy egész számot is, amire szeretnénk, hogy visszaálljon a számláló értéke. Ez a szám, ha nem írjuk ki, 0 lesz. Használata:

• h2 { countercounter-reset: headermains 0; }  

Számlálók növekedésének beállítása
A számláló újraindításához hasonlóan a számláló növekedését is beállíthatjuk. Az adott elem megjelenéseikor azonban nem beállni fognak az adott értékre a számlálók, hanem a megadott értékkel nőnek. Szintén több számlálót felsorolhatunk, ha akarjuk megadhatunk egész számot is növekménynek, ha nem adunk meg, az alapértelmezett érték 1 lesz. Megadhatunk negatív számot, vagy akár nullát is. Például:

• h1 { countercounter-increment: headermains 1; }  

További tulajdonságok
Végül azokat a tulajdonságokat gyűjtöttem össze, melyek valamennyire kapcsolódnak az eddigiekhez, és melyeket fontosnak tartok itt még ebben a cikkben megemlíteni. Lássuk ezeket!
Zárójelek beállítása tulajdonság
A zárójelekről már a nyelv szerinti kiválasztóknál és a dinamikusan generált tartalomnál is esett szó. Röviden összefoglalva: lehetőségünk van globálisan a zárójel karakterek definiálására, majd beszúrására. A beszúrást már áttekintettük - a zárójelek tulajdonság a beállítást végzi el. Például:

• q { quotes: '\201E' '\201D' }  

A példában a kezdő idézőjelet alsó idézőjelnek, a záró idézőjelet pedig felső idézőjelnek állítjuk be. Lehetőségünk van további karakterek, sztringek megadására is, ha egy zárójelen belül további zárójelet nyitunk meg, akkor a harmadik, ha még egy újabbat, akkor a negyedik megadott jel kerül használatra, míg a bezárásukkor a páros helyen levők.

Kurzor beállítása tulajdonság
Egy adott elem felett lehetőségünk van befolyásolni az egérkurzor megjelenését, válogathatunk az operációs rendszer által biztosított kurzorok közül, vagy pedig megadhatunk egy saját képet is. A rendelkezésre álló értékek: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, továbbá az url(xxx.gif) formájú értéket is használhatjuk. Példák:

• a { cursor: move; }   
• .area { cursor: url(/images/eger.gif); }  

Jelölő eltolás tulajdonság
A megjelenítés tulajdonság segítségével megadható egy elemre, hogy marker, azaz jelölő stílusú legyen. A különböző tulajdonságai a jelölő elem tartalmának módosítható az eddig megismert tulajdonságok segítségével, azonban van egy, mely nem: ez a függőleges eltolása a szöveg vonalához képest. Ez a tulajdonság ennek megadására szolgál. Használata egyszerű:

• li:before { display: marker; markermarker-offset: 3em; content: "*"; }  

.

Mértékegységek

A CSS nyelv használata során több tulajdonságnál is megadhatunk számszerű értékeket (ide értve például a színeket is, vagy bármely más értéket, mely nem egy kötött halmazból való választási lehetőséget jelent). Ezeknél az értékeknél a megadás módját mi választhatjuk meg, több alternatíva is rendelkezésünkre áll. A következőkben a különböző méretek megadását, a színeket és az URL-ek leírását fogjuk megismerni.

Speciális stíluslapok esetén (melyek a hangzásokat vezérlik), szögeket, időtartamokat, frekvenciákat is megadhatunk. Ezekre most nem fogunk kitérni, ezek nem túl gyakori használata, és támogatottságuk hiánya miatt.

Méretek

Méretek megadásakor számos mértékegység áll rendelkezésünkre, beszélhetünk abszolút és relatív értékekről, bár ezek az elnevezések nem mindig szerencsések. A lehetséges mértékegységeket mégis eszerint, a szabványban találhatóhoz hasonló csoportosítás szerint fogjuk vizsgálni. Itt jegyezném meg, hogy a mértékegység megadása egy esetben elhagyható, ha az érték, amiről beszélünk, a 0, ugyanis ilyenkor mindegy, hogy melyik mértékegységre gondolunk: mindegyikben ugyanazt jelenti.

Az adott tulajdonságtól függően megadhatunk negatív és pozitív értékeket is. Ezek jelzésére a + és a - jeleket használhatjuk (ha nem írunk semmit, pozitív az alapértelmezett, ahogyan ezt más területeken már megszokhattuk). A mértékegységet mindig közvetlenül a szám után kell írnunk, minden elválasztó nélkül. Ha nem egész számot szeretnénk használni, akkor tizedespontot (és nem a magyar helyesírás szerint tizedesvesszőt) kell használnunk.

A megadott méretekből nem mindig következik az ahhoz hű megjelenés az egyes böngészőkben. Általában minden böngészőben megadható egy alapértelmezett betűnagyság, ami a kizárólag relatívan megadott méretek alapjául szolgál. Az Internet Explorer nem engedi átméretezni a képpontokban megadott méreteket, a Mozilla család átméretezi, az Opera pedig zoom-olni képes, azaz még a képeket is átméretezi. Szabványos viselkedés ebből a szempontból nincsen meghatározva, pontosabban a szabványos viselkedés talán az lenne, ha semmi sem lenne átméretezhető. Az átméretezés lehetőségével szerencsére nem csorbul a szabványosság, a felhasználók számára azonban egy hasznos eszközt adnak ezzel a böngészők.

Relatív mértékegységek

Ide a px, em, ex és a százalékban megadott értékek sorolhatóak.

A pixelben, azaz képpontban megadott értékek a megjelenítő egységtől függenek, általában egy konkrét képpont méretét jelölik, bár előfordulhat, hogy több pontot is magába foglal egy adott pixelnyi érték (például lézernyomtatóknál a beállított felbontástól függően, vagy egy folyadékkristályos kijelzőn, ha kisebb felbontásra van állítva, mint amennyit meg tud jeleníteni). A pixelek jele a px, egy lehetséges érték például az 5px.
Pixel értelmezés (forrás: W3C)

Az em egy relatív értéket jelöl, tipikus tipográfiai mértékegység. Az 1em az adott környezet betűméretét jelöli: a font-size aktuális értéke, illetve ha konkrétan egy font-size definíción belül használjuk, akkor a szülő elem betűmérete. Alapértelmezett esetben, ha a dokumentum gyökerében használjuk ezt a méretet, 16 pixelt szokott jelenteni (böngésző beállításoktól függően). Egy lehetséges érték például az 1.2em.

Az ex szintén egy relatív értéket jelöl, és hasonlít az em-hez, azzal a kivétellel, hogy ez nem az adott betűkészlet magasságához viszonyított méretet, hanem a betűkészlet kis x betű magasságát jelöli (bár azoknál a betűkészleteknél is definiálva van, ahol nem létezik x betű). Általában a böngészők az értékét egyszerűen az em felének veszik, így alapesetben általában 8 pixelnyi méretet jelöl. Egy lehetséges érték például az 5ex.

A százalékos értékek egy kicsit bonyolultabbak. Mindig relatív értéket képeznek valamely más értékhez viszonyítva, a kérdés csak az, hogy éppen milyen értéket vesznek alapul. Ez általában a leglogikusabb érték, de hogy egyértelmű legyen, minden tulajdonságnál, ahol használhatunk százalékos megadást, definiálva van, hogy mihez képest értendő. Egy lehetséges értéke az 50%.

Az ex, em és a százalékos megadások egy érdekes tulajdonsága, hogy öröklődés esetén (például egymásba ágyazott listáknál) a hatásuk az lehet, hogy egyre kisebb értéket vesznek fel, hiszen itt a szülő értékéhez viszonyítja a százalékot (ha éppen a szülőhöz történik a viszonyítás, és a szülőnek is már százalékos érték volt adva, akkor a két százalékos érték eredője lesz az új érték, stb.).

Abszolút mértékegységek
Az abszolút mértékegységek neve onnan ered, hogy elvileg minden esetben a szemlélő számára ugyanakkora méretet jelentenek. Például 1cm az mind a kijelzőn, mind nyomtatásban egy centiméter (kellene, hogy legyen). Egy gond van ezzel: az operációs rendszer nem mindig tudja a megjelenítőről (főleg a kijelzők esetén) hogy mekkora a pontos felbontása, és így egy általános, vagy becsült értékkel dolgozik.

Az mm a milliméter rövidítése, egy példa a használatára: 10mm.

Az in az inch (=col, =hüvelyk) méretet jelöli, azaz 25.4 millimétert. Egy lehetséges megadása: 2in.

A cm a centimétert takarja, mely mint köztudott, 10 mm-ert takar. A megadása nem tér el a korábbiaktól: 1cm.

Most jönnek az érdekesebb mértékegységek, ezek közül az egyik a pt, mely a "pont" rövidítése. A pont tipográfiai mértékegység, egy pont 1/72 hüvelyket jelöl. Gyakran keverik össze a pixellel, pedig nem sok közük van egymáshoz. Egy példa a használatára: 16pt.

Végül a pc-t kell megemlítenünk, mely a "pica" rövidítése, és 12 pont méretű. Egy megadása: 2pc.

Színek
Több helyen is megadhatunk színeket tulajdonságként (háttérszín, szöveg színe, stb.). Alapvetően kétféleképpen: vagy a szín nevével, vagy pedig a 3 komponensével RGB (vörös, zöld, kék) formában.

A használható 16 kulcsszó (a Windows VGA 16 színei közül): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, és yellow.

Az RGB megadás négyféleképpen is történhet, ebből az első két lehetőség hexadecimális, míg a továbbiak decimális és százalékos módok.

Az #rrggbb megadásnál az rr, gg és bb értékek hexadecimálisan, 00 és FF között adják meg az adott szín erősségét. A 00 a legsötétebb, a FF pedig a legvilágosabb. A hexadecimális számoknál a 9 feletti értékeket jelképező betűket mind kisbetűvel, mind nagybetűvel megadhatjuk. Pár példa:

• fekete: #000000
• piros: #FF0000
• zöld: #00FF00
• kék: #0000FF
• fehér: #FFFFFF

Az #rgb megadásnál az előzőhöz hasonlóan, de csak egy számjegyes hexadecimális számokkal adhatjuk meg a színt. Az #123 megfelel az #112233 színnek. Az előző példák ezzel a megadási móddal:

• fekete: #000
• piros: #F00
• zöld: #0F0
• kék: #00F
• fehér: #FFF

Az első megadáshoz hasonlóan, de decimális számokkal is meghatározhatjuk a komponensek értékeit, szintén 0 és 255 közötti értékekkel. Ekkor az rgb(r,g,b) formátumot használhatjuk. Maradva a példáknál:

• fekete: rgb(0,0,0)
• piros: rgb(255,0,0)
• zöld: rgb(0,255,0)
• kék: rgb(0,0,255)
• fehér: rgb(255,255,255)

Amennyiben százalékosan ismerjük a szín komponenseit, erre is lehetőségünk van. Ekkor a 0% éppen nullát, a 100% pedig 255-öt jelent. A százalék jelet közvetlenül a szám után kell írni. A használandó formátum az előzőhöz hasonló: rgb(r%,g%,b%). Maradva a példáknál:

• fekete: rgb(0%,0%,0%)
• piros: rgb(100%,0%,0%)
• zöld: rgb(0%,100%,0%)
• kék: rgb(0%,0%,100%)
• fehér: rgb(100%,100%,100%)

Douglas R. Jacobson elég jól használható formában alakította ki színreferenciáját. Biztosan hasznosnak találja majd mindenki, aki most ismerkedik a színek ilyen módon történő megadásával.

URL-ek
URL-eket több helyen, de elsősorban hátterek, illetve generált tartalmak esetén adhatunk meg. Megadási módja a következő: url(cím). A cím egy URL, amit tetszésünk szerint írhatunk aposztrófok, idézőjelek között, de akár el is hagyhatjuk ezeket. A formázás kedvéért használhatunk a cím előtt és mögött szóközöket, tabulátorokat, vagy akár sortörést is. Amennyiben az URL zárójelet, vesszőt, szóközt, aposztrófot, vagy idézőjelet tartalmaz, egy visszaper (backslash) karakterrel ki kell emelnünk.

Ha relatív URL-t használunk, akkor azok a CSS könyvtárához, és nem az oldalhoz képest számítódnak. Ha Netscape 4.x-re fejlesztünk, használjunk teljes URL-eket (vagy legalább a gyökérhez képest relatívakat), mert rosszul értelmezi (a HTML-hez képest).

Öröklődés
Az öröklődés az egyik fontos tulajdonsága a stíluslapoknak. HTML elemtől függően egyes tulajdonságok öröklődnek, míg más tulajdonságok nem. Például egy bekezdésben szereplő link megjelenése nagyrészt öröklődik, a bekezdésben levő szöveg megjelenéséhez fog hasonlítani a link is: a karakterkészlete, mérete, stb. öröklődik. Nem öröklődik azonban a színe és a díszítése, alapértelmezett állapotban kék és aláhúzott lesz. Ez tulajdonságonként és HTML elemenként külön-külön mindenhol más, a szabvány részletesen megadja ezeket.

Azon tulajdonságok öröklődnek, melyeknél az érték inherit. Például:

• table, tr, td, th {   
•   font-size: inherit;   
•   color: inherit;   
• }  

Ez a kód beállítja, hogy a betűméret és betűszín egy táblázat cellájában megegyezzen a körülötte levő befoglaló elem ilyen paramétereivel.
Lépcsőzetes egymásra épülés
Tükörfordításban nevezhetnánk kaszkádolásnak is. A CSS "C" betűjéről, azaz az egymásba ágyazhatóságról lesz szó. A stíluslap definíciók három forrásból jöhetnek, a leginkább ismert stíluslap forrás a dokumentum szerzője (azaz a HTML-ben, és a hozzá kapcsolt állományokban levő stílusok), de ugyanilyen fontos a másik két forrás is: a böngésző és a felhasználó. A böngészők - mint a korábbiakban több helyen is bemutattam -, minden elemre előre meghatározott stílusértékeket definiálnak az elemekhez. A végfelhasználók pedig mind az oldal szerzője, mind a böngészőben szereplő értéket felülbírálhatják saját stíluslapjaikkal (ahol erre a böngésző lehetőséget kínál).

A stíluslapok ebből a három forrásból összegeződnek, és a lépcsőzetesség szabályai szerint hatnak egymásra (az egyik felülbírálja a másikat). Egy érték erőssége több dologtól függ, ezeket vesszük sorra.

Sorrend
Az egyik fontos tulajdonság a forrás, azaz hogy a stílus honnan jön. Fontossági (növekvő) sorrendben először a böngésző, majd a felhasználó "normál" stílusai, a szerző "normál" stílusai kerülnek értelmezésre, végül pedig szerző "fontos" stílusai, illetve a legerősebbként a felhasználói "fontos" stílusok következnek. Egy böngészőnek eszerint (vagy ezzel egyenértékűen) kell beolvasnia és feldolgoznia a stílusokat.

Fontos stílusok
Mint láthattuk, a sorrendet egy kiválasztó-érték párnál az is meghatározta, hogy "fontos"-e az adott szabály. Egy szabályt fontossá úgy tudunk tenni, hogy mögé írjuk: !important, például:

• p.rightright { align: rightright !important; }  

Specifikusság
A böngészőnek minden elemre ki kell számítania egy bizonyos specifikussági értéket is. Ez négy tényezőből áll, melyet a szabvány "a", "b", "c", "d" értékeknek jelöl. Ezeket a következőképpen kell kiszámolnunk:

• ha a kiválasztó egy HTML stílus attribútum, azaz helyben adjuk meg egy elem stílusát, akkor "a" értéke legyen 1, ellenkező esetben 0.
• ahány azonosító szerepel a kiválasztóban, annyi legyen "b" értéke.
• ahány további tulajdonság, osztály és álosztály szerepel a kiválasztóban, annyi legyen "c" értéke.
• ahány további elemnév és álelem (virtuális elem kiválasztó) szerepel a kiválasztóban, annyi legyen "d" értéke.

A specifikusság végül ezek alapján számítódik ki. Néhány forrásban a fenti értékek összegzését tízes számrendszerben magyarázzák, úgy, hogy az "a" 1000-et, a "b" 100-at, a "c" 10-et, és a "d" egyet ér. Bár ez elég jól használható a gyakorlatban, a szabvány szerint "elég nagy számoknak", és nem a tíz hatványainak kellene ezeknek a számoknak lenniük. Mivel azonban tíz kiválasztót, azonosítót, stb. nem szoktunk írni, ezért általában a tíz is elég nagy szám.

Kiértékelés
Ha megtörtént a fontosság, sorrend és specifikusság meghatározása, akkor a böngésző végül kiértékeli ezeket, és ez alapján dönt, hogyan jár el. Az elsődleges a sorrend (a fontosság figyelembevételével), a másodlagos pedig a specifikusság. Amennyiben ezek mind megegyeznek, azaz két stílusdefiníció helye azonos és specifikusságuk is egyenlő, akkor az az erősebb, amelyik később fordul elő.

Ezek a szabályok csak elsőre tűnhetek bonyolultnak, a valóságban jóval kézenfekvőbb a használatuk, mint azt gondolnánk. Ez abból adódik, hogy logikusak. Ettől függetlenül előfordulat párszor, hogy nem értjük, mi történik, ekkor nem árt ismerni ezeket.

Megjegyzések
A HTML, vagy bármely más nyelvhez hasonlóan a CSS esetén is lehetőségünk van megjegyzések elhelyezésére a definíciók között, melyek sokszor nagyon jó szolgálatot tehetnek, ha bonyolultabb CSS megoldásokat használunk. A megjegyzések semmilyen hatással nincsenek a kód értelmezésére, viszont átláthatóbbá tehetik. Ha valaki másnak kell átnéznie, segíthet neki megérteni a koncepciónkat. A CSS-ben a megjegyzéseket bárhol elhelyezhetjük, de szavakat (kiválasztókat és tulajdonság neveket, értékeket) nem törhetünk meg velük. A C nyelvhez hasonló formában van lehetőségünk a használatukra több soros formában.

Több soros megjegyzések
A több soros megjegyzések elé /*, mögé pedig */ jeleket kell írnunk. A megjegyzésen belül az egy sorosokhoz hasonlóan ebben az esetben is bármilyen karaktert használhatunk, de itt is van kivétel, a megjegyzést lezáró */ karaktersort nem használhatjuk. Ebből következik, hogy két több soros megjegyzést nem tudunk egymásba ágyazni.

Egy példa a több soros megjegyzések használatára:

• /* -- Bekezdések -------------------------  
•     kisebb méret is elegendő a bekezdésekhez  
•    ---------------------------------------  
• */  
• p {   
•   font-size: 0.8em;   
• }  

HTML megjegyzések
A CSS támogatja az SGML (HTML-ből megismert) megjegyzés formátumot is, bár korlátozásokkal: nem határolhatnak CSS megjegyzéseket.

• p { <!-- kisebb betűk a bekezdésekben -->   
•   font-size: 0.8em;   
• }  

Hogyan használjuk?
A megjegyzéseket nem csak fejlesztői jegyzetek írására, hanem egyes kódrészletek átmeneti eltávolítására is használhatjuk, azaz ha meg szeretnénk nézni, hogy mi történne, ha eltávolítanánk egy részletet, azt megjegyzések közé helyezhetjük. Erre a célra a több soros megjegyzések használata talán a legcélszerűbb, a kérdéses kódrész elé és mögé szúrjuk be az ezeket a megjegyzéseket határoló jeleket (/* ... */), és a kódrészlet máris láthatatlanná válik az értelmező számára.

Ezzel a technikával két különböző kódrészlet között is váltogathatunk, egyszer az egyiket, másik alkalommal a másikat tesszük megjegyzésbe. Ez különösen a CSS készítésekor hasznos, így tudunk hibát keresni, alternatív megoldásokat kipróbálni.

Mivel több több soros megjegyzést nem ágyazhatunk egybe, ezért ez a technika csak akkor működőképes, ha általában nem használunk megjegyzéseket, vagy főként a HTML megjegyzésformát használjuk. Természetesen ennél hatékonyabb hibakeresési technikák is rendelkezésünkre állnak.

Ha probléma van...
...próbáljuk megtalálni, hogy hol van! Ez evidensen hangzik persze, de ez a legfontosabb. Lássuk, milyen lehetőségek lehetnek!

Magát a CSS definíciót hagyja figyelmen kívül teljesen a böngészőnk? Csak a változtatások nem akarnak megjelenni, vagy pedig csak bizonyos kiválasztók, tulajdonságok nem működnek? Lássuk, mi lehet a baj!

A böngésző megtalálja a CSS hivatkozást?
Ekkor semmilyen más stílus nem lesz hatással a megjelenésre. Ha így van, és a teljes CSS definícióinkat hagyja figyelmen kívül valamiért a böngészőprogram, továbbá külső CSS-t használunk, könnyen előfordulhat, hogy rosszul hivatkozunk rá.

Ellenőrizzük, hogy a CSS elérhető-e, a szerveren helyesen vannak-e beállítva a jogosultságok! Ha igen, és az adott címen elérhető a CSS-ünk, akkor ellenőrizzük le, hogy nem gépeltük-e el a nevét, illetve ha nem abszolút hivatkozással írtuk le a helyét, akkor hogy jól lépdeltünk-e a könyvtárak között! A relatív CSS hivatkozást mindig az oldal webcíméhez képest kell megadni. Írjuk be a böngészőnkbe a címet, és nézzük meg, bejön-e a CSS fájl (javasolt olyan böngésző, például Firefox vagy Opera használata, ami megjeleníti a CSS-t, és nem ajánlja fel lementésre, mint az Internet Explorer).

Támogatja a böngészőnk az általunk használt módszert?
Olyan hivatkozási módszert használtunk, amit ért a böngészőnk? Ha megadtunk média típust, jól adtuk meg? Esetleg nem tiltottuk le a CSS megjelenítést (Web Developer Toolbar, vagy hasonló eszközzel)? Ezeket sem árt ellenőrizni...

Jó HTML elemmel hivatkozunk a CSS-re, nem gépeltük el?
Előfordulhat az is, hogy a hivatkozásnál, magában a meghívásban ejtettünk szintaktikai hibát, elgépeltünk egy kódot. Ezt akár egy HTML validátorral is ellenőrizhetjük, gyorsan jelezni fogja nekünk a hibát!

Le van zárva rendesen az adott HTML elem, illetve környéke?
Szintén egy gyakori hiba lehet, hogy elfelejtünk lezárni egy elemet, és emiatt az oldalszerkezet egy kicsit megváltozik. Egy validátor ezen is gyorsan segíteni képes.

Nincsen véletlenül megjegyzésben a kérdéses részlet?
Ha nem használunk kódszínezést támogató szerkesztőt, akkor előfordulhat, hogy nem tűnik fel: a kérdéses CSS kódrészlet, vagy pedig a hivatkozó HTML kódrészlet megjegyzésben szerepel. Minden jó, csak éppen nem látszik. Használjunk kódszínezést támogató szerkesztőt...

Nem gyorsítótárazta be a böngésző a CSS-t?
Hacsak nem adjuk meg külön (a webszervert beállítva, vagy egy programmal kiszolgálva a CSS-t) hogy ne, akkor a böngészők a távoli állományok esetén általában eltárolják átmenetileg a CSS fájlunkat, ami problémát okozhat akkor, ha mi közben megváltoztattuk. A gyorsítótár törlése, vagy a Frissítés/Refresh gomb Shift billentyűvel történő megnyomása segíthet a dolgon. Ha ez sem segít, biztos ami biztos alapon nézzük meg, jó állományt módosítgatunk-e? Betölthetjük a CSS-t közvetlenül a böngészőbe, és megnézhetjük, hogy látszanak-e benne a változtatások.

Azt értjük az adott kiválasztó vagy tulajdonság alatt, amit a szabvány is?
Előfordulhat, hogy mi értünk félre valamit, rosszul próbálunk meg használni egy elemet (kiválasztót, tulajdonságot), a böngésző pedig teszi a szabványban meghatározott dolgát - helyesen. Ha egy olyan dologról van szó, amit már használtunk korábban is, vagy láttuk a használatát valahol - és ott ment -, nézzük meg, miben különbözik attól az éppen használt módszer!

Egy tipikus lehetőség a félreértésre például a vertical-align használata. Azt várnánk el tőle, hogy függőlegesen az adott blokk elemen belüli pozíciót állítja, pedig a szabvány szerint nem ez a feladata, hanem az adott sorban a függőleges elhelyezkedés állítása. Egy kivétel van ez alól, a táblázat cellában történő használata.

Vegyük elő a szabványt, és nézzük meg, hogy tényleg úgy kell-e viselkednie a böngészőnek, ahogy akarjuk!
Nem gépeltük el a kiválasztót, tulajdonságot?
Gyakori hiba, hogy (főleg a ritkábban használt) kiválasztót, tulajdonságot elgépeljük, vagy rosszul emlékszünk rá. Például a color helyett font-color-t írunk, vagy egy azonosítóval történő kiválasztáskor, például #twocols helyett #twocol írunk. Ilyenkor alaposabban nézzük át a kódunkat, s remélhetőleg megtaláljuk a hibát. A második hibánál, ahol a többesszámmal volt a probléma, segíthet, ha egységesek vagyunk, és kialakítunk valamilyen szabályrendszert magunknak (itt a többesszám használatot illetően), ezzel is csökkentve az elgépelési lehetőségeket.

Nincsenek hiányzó pontosvesszők?
Az egyes tulajdonságokat pontosvesszővel kell elválasztani, a soremelés nem elég. Előfordulhat, hogy kimarad egy pontosvessző az előző definíció elől, így pont az nem fog működni, amit szeretnénk. Egy kódszínezést használó, a tulajdonságok neveit ismerő szerkesztő segíthet könnyebben felfedni ezeket a problémákat.

Nincsenek megnyitott idézőjelek?
Az előzőhöz hasonló helyzet. Egy megnyitott, de be nem zárt idézőjel, aposztróf, zárójel problémát okozhat, előfordulhat, hogy érvénytelenné teszi egy adott ponttól a CSS-ünket. Ahogy az előzőnél is, itt is egy kódszínezős szerkesztő segíthet. Ha validáljuk a CSS-ünket, szintén kiszűrhetőek az ilyen jellegű hibák (és a pontosvessző hibák is).

Le van zárva kapcsoszárójellel a definíciós rész?
Szintén tipikus hiba, hogy egy definíciót elfelejtünk lezárni. Az előző két esetben hivatkozott módszerek: szerkesztő és validálás adhatnak külső segítséget.

Ha minden kötél szakad...
...akkor próbáljuk ki a következőket, a fapados és gyilkos módszerek biztosan segítenek meghatározni, hogy merre keressük a probléma gyökerét!

Töröljük a teljes CSS-t!
Ha mégsem jó helyen módosítjuk a CSS-t, ezzel egyből láthatóvá válik számunkra. Természetesen a törlés helyett választhatunk kíméletesebb módszert is, például átmozgathatjuk máshova, vagy átnevezhetjük az állományt.

Töröljük az adott szabályt, majd gépeljük be megint!
Ez segíthet, ha valamit nagyon elgépeltünk, és sehogy sem fedezzük fel a hibát, még huszadik olvasatra sem. Ha más nem, még egyszer átgondoljuk, hogy jó-e az úgy, ahogy írjuk éppen.

Próbáljuk ki egy másik böngészővel, operációs rendszerrel!
Lehet, hogy éppen nem működik az adott tulajdonság, rosszak az információink a böngészőnkről. Lehet, hogy a böngészőnk hibás, az éppen aktuális napi snapshotba (mert persze a legújabbnak kell meglennie...) hiba csúszott. Lehet, hogy úgy írtunk valamit a kérdéses részlet környezetében, hogy a böngészőnk nem bírja feldolgozni, és az adott részt eldobja. Vagy feltettünk valami újdonságot valahova, valamiért, és szimplán attól állt fejre.

Foglalkozzunk mással!
Ha már semmi sem jut eszünkbe, a legjobb megoldás, ha nem foglalkozunk egy ideig a problémával, továbblépünk, és később térünk vissza rá. Ez nem csak más esetben (vizsga során) hasznos, hanem itt is! Lehet, hogy ahogy elkezdünk mással foglalkozni, egyből be fog ugrani a megoldás.

Tartsunk szünetet!
Aludjunk egyet a dologra, vagy kicsit álljunk fel a gép mellől. A sok munka amúgy sem használ, egy kis pihenés nem árt. Ha kiürítjük a fejünket, utána sokkal hatékonyabban fogunk tudni dolgozni.

Próbáljunk ki egy másik megoldást!
Ha nincs más választásunk, kerüljük meg a problémát. Általában többféleképpen is meg lehet oldani a feladatokat, ha egyikkel meggyűlik a bajunk, próbálkozzunk a másikkal. Csak bejön.

Forduljunk egy levelezőlistához!
Egy másik lehetőség, hogy forduljunk egy levelezőlistához. A Weblabornak is van számos levelezőlistája, a CSS megvitatásához a wl-levlistát tudom ajánlani. Ha jól tesszük fel a kérdést, akkor magar meg szokott érkezni a segítség. Ajánlott a kérdésfetevéshez: a probléma részletes leírása, a konkrét hibajelenség bemutatása, egy webcím, ahol megtekinhető a probléma, egy kódrészlet, amivel pontosan bajunk van.

Használjunk segédeszközt!
Nem mindig a legegyszerűbb a fenti módszerekkel dolgozni, hiszen egy olyan egyszerű dolognál is, mint a CSS, számos apró probléma lehet, melyet nehéz kiküszöbölni. Több fejlesztői segédeszköz is napvilágot látott már, melyek megkönnyítik a CSS fejlesztést, hibakeresést, ezek közül mutatok be kettőt, melyet a napi munkám során használni szoktam.

Wish CSS Debugger
A Wish CSS Debugger segítségével egy oldal aktuális szerkezetét, az adott elemek osztályait, azonosítóit, illetve CSS definícióit vizsgálhatjuk meg. Egy Firefox (és Mozilla) alatt működő bookmarkletről van szó, melyet aktiválva oldalunkon egy kis információs doboz jelenik meg.

A bookmarkletet kiválasztva a problémás oldalon, jobb oldalt alul egy kis ablak fog megjelenni, melyben az éppen a kurzor elemünk alatt található elem típusát, osztályait és azonosítóját láthatjuk, illetve ugyanezt az összes szülő elemére. Itt megvizsgálhatjuk, hogy milyen az oldalszerkezetünk, milyen szülői vannak az elemnek, milyen CSS kiválasztót kell írni rá, hogy kiválasztásra kerüljön az elem.

Ha valamelyik elemre klikkelünk, akkor egy új ablak (div) nyílik meg (viszonylag lassan az oldal szerkezetétől függően), melyben az adott elem, és az összes szülő elem - számított - CSS tulajdonságait tekinthetjük meg. Egy tulajdonság akkor fog megjelenni, ha a szülő elem tulajdonságától különbözik (azaz ha nem találunk valamit, akkor nézzük a következő elemet).

Az eszköz eltüntetése az oldal újratöltésével lehetséges.

Web Developer Toolbar
A Web Developer Toolbar (Firefox/Mozilla kiegészítés) része egy "Edit CSS" nevű kis eszköz (ha a Toolbar-t telepítettünk, akkor a Tools/Web Developer/Css menüben találjuk), melynek segítségével lehetővé válik az aktuális oldal CSS-ének szerkesztése. Ha kiválasztjuk a menüpontot, vagy megnyomjuk a Ctrl-Shift-E gyorsbillentyűket, egy oldalsáv nyílik meg, amiben külön füleken (az újabb verziókban) láthatjuk az aktuális oldal CSS-eit.
Web Developer Toolbar - Edit CSS.