Weblabor

A CSS alapjai cikksorozatomat folytatva, ezen írásomban a használható mértékegységeket (méretek, színek és URL-ek megadását), az öröklődések működését (jelentését, erősségének meghatározását) vesszük sorra. Szó lesz arról, hogy mitől erősebb egy definíció, mint egy másik, illetve milyen lehetőségeink vannak felülbírálni egyik definícióval a másikat. Sort kerítünk a megjegyzések használatának módjára is. Az alábbiakban ismertetésre kerülő lehetőségek minden valamirevaló CSS-t támogató böngészőben működni fognak, és talán a leggyakrabban használt lehetőségeket mutatják be.

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.



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: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:

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:

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.

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 - de az már egy másik cikk.

Összefoglalás

Ebben a cikkben megismerkedhettünk a CSS-ben használható mértékegységekkel, az öröklődéssel és a definíciók egymásba ágyazásakor használható preferenciasorrend működésével, továbbá a megjegyzések alkalmazásával. A sorozatnak hamarosan vége szakad, a következő, utolsónak tervezett részben a CSS hibakereséssel fogunk megismerkedni.