CSS hozzákapcsolása a HTML-hez A fentiekben egy példát láttunk, hogyan kapcsolhatjuk a CSS-t a HTML állományunkhoz, hogyan határozhatjuk meg ennek a megjelenését. Lássuk a lehetőségek listáját (melyeket szabadon, akár keverve is használni tudunk):
Beágyazott stíluslap Ezt láthattuk a fenti példában. A stílusleírást a HTML oldal fejlécében kell elhelyezni, style elembe ágyazva. A fenti példában HTML megjegyzésbe is tettük (), ezzel azt érjük el, hogy az olyan böngészők, amik nem ismerik a stíluslapokat, ne jelenítsék meg a stílus definíciónkat. Az így meghatározott stílus az egész dokumentumra érvényes lesz.
Külső stíluslap A stíluslapunkat elhelyezhetjük egy külső állományban is, így lehetővé téve, hogy az több HTML állományra is érvényes legyen, s központilag szerkeszthetővé váljon (ne kelljen minden egyes HTML állományt megváltoztatnunk, ha a honlapunk ezentúl másképp jelenne meg). A külső stíluslapokra az oldal fejlécében tudunk hivatkozni, egy link elem segítségével: 1. 2. 3. A stíluslapot tartalmazó állományban (a példában kulso.css a neve) csak a stíluslapjaink definícióját kell elhelyeznünk, pl: 1. h1 { font-size: 20px; color: #a00000; } 2. p { font-size: 12px; color: #00a000; } A beágyazott stíluslapokhoz hasonlóan az így meghatározott stílus az egész dokumentumra érvényes.
Elemhez rendelt stíluslap Bár kevés alkalommal van rá szükség, de akkor jól jön, hogy az egyes HTML elemekhez helyben is tudunk stílust meghatározni. Ez nagyon hasonlít ahhoz, mintha font elemekkel határoznánk meg az adott elem megjelenését, bár nagyságrendekkel több formázási lehetőségünk van. Egy elem stílusának a meghatározásához egy style attribútumot kell hozzá felvennünk: 1.
Bevezetés
Mint láthattuk, itt csak magát a megjelenést kellett leírnunk, nem kellett meghatározni, hogy mire vonatkozik: az így definiált stílus csak az adott elemre, illetve az adott elemen belül lesz érvényes.
Importált stíluslap
További lehetőségünk, hogy egy stílus meghatározáson belül egy másik, külső stílus meghatározásra hivatkozzunk (erre értelem szerint a beágyazott és a külső stíluslap meghatározásoknál van módunk). Ez a következőképpen történhet: 1. <style type="text/css"> A cím megadásakor hasonlóképpen járhatunk el, mint a linkeknél általában, azaz akár formában is írhatjuk, amennyiben ugyanabban a könyvtárban található mint a HTML állományunk. A külső stílus hivatkozásnak meg kell előznie minden más definíciót, amennyiben már szerepel előtte más, figyelmen kívül lesz hagyva!
url(masik.css)
Stílusok formátuma Egy önálló stílus definíciós állomány, vagy egy beágyazott stílus több meghatározást tartalmazhat. Egy-egy meghatározás két részből áll, egy kiválasztó és egy tulajdonság részből. A kiválasztó rész azt határozza meg, hogy mely HTML elemekre vonatkozzon a definíció, míg a tulajdonság rész a megjelenést befolyásolja. Amikor elemhez rendelünk stílust, akkor csak a tulajdonság részt kell meghatároznunk. A következőképpen épül fel tehát egy stílusdefiníció: 1. kiválasztó { tulajdonság } 2. kiválasztó { tulajdonság } 3. kiválasztó { tulajdonság } Az egyes definícióknak, de még a kiválasztónak és a tulajdonságnak sem szükséges új sorban lenniük, gyakorlatilag szabadon ránk van bízva, hogy a fenti tartalmat milyen elrendezésben valósítjuk meg. A következő formátumok mind helyesek: 1. kiválasztó { tulajdonság } kiválasztó { tulajdonság } 2. kiválasztó 3. 4. { 5. tulajdonság 6. } Az előző példákban láthattuk, hogy egy-egy kiválasztóhoz több tulajdonságot is megadhatunk, ekkor a tulajdonságokat pontosvesszővel elválasztva kell felsorolnunk. Több kiválasztót is meghatározhatunk, a kiválasztókat vesszővel kell elválasztani: 1. kiválasztó, kiválasztó { tulajdonság; tulajdonság; }
Kiválasztók A kiválasztók nagyon rugalmasan használhatóak, mint azt a továbbiakban látni fogjuk egyszerű és mégis összetett módon tudjuk meghatározni, hogy mely elemekre vonatkozzanak a tulajdonságaink. Ebben a cikkben még nem mutatjuk be az összes lehetőséget, de megpróbáljuk bemutatni, hogy milyen széleskörűen tudjuk szabályozni a kiválasztást.
Elem kiválasztás A legegyszerűbb kiválasztási lehetőséget nyújtja a számunkra, egy HTML elemet határozhatunk meg vele, amihez hozzá szeretnénk rendelni a különböző tulajdonságokat. Az eddigiekben ilyenre láthattunk példát: 1. h1, h2, h3 { color: #a00000; } Itt az első három szintű címsornak határoztuk meg a színbeli megjelenését.
Osztály alapú kiválasztás A HTML elemeket lehetőségünk van osztályokba sorolni. Ekkor az adott osztályba sorolni kívánt elemhez egy class tulajdonságot rendelünk hozzá, amelynek az értéke az osztálynevünk lesz. A stíluslapban ehhez az osztályhoz határozhatunk meg megjelenést. Ha szeretnénk kiemelni egyes fejezeteket a szövegünkből, pirossal megjelenítve azokat, akkor a következőképpen járhatunk el: 1. 2. 3. CSS példa 4. <style type="text/css"> 9. 10. 11.
A cserebogarak halhatatlanságáról
12.
A cserebogárnak vannak lábai. Ebből...
13.
Minden cserebogárnak van lába...
14.
A cserebogárnak vannak szárnyai is...
15.
A szárnyaival repülni tud...
16.
A halhatatlanság azt jelenti, hogy...
17.
FONTOS!
18.
A cserebogarak halhatatlansága tehát...
19. 20. A példában három fejezetet és egy címsort soroltunk a fontos osztályba, a stíluslapban pedig a kiválasztónk ponttal kezdődött, ami azt jelezte, hogy ennek az osztálynak határozzuk meg a megjelenését. A példából még valami kiderül: az egyes stílusdefiníciók felül tudják bírálni egymást, illetve egy osztály bármelyik elemhez tartozhat. A fontos osztálynak mást színt adtunk meg, mint a bekezdéseknek, illetve a címsornak (itt ez a szín fog érvényesülni), míg a betűméretet tekintve a bekezdésben, illetve a címsorban meghatározott méretet öröklik a fontosnak besorolt bekezdések is. Az egyes kiválasztókat keverhetjük is, például a következő példában a fontos címsoroknak definiálunk egy háttérszínt is:
Azonosító alapú kiválasztás Az azonosító alapú kiválasztás nagyon hasonló az osztály alapúhoz, egy lényeges különbség van: csak és kizárólag egy elemet tudunk egy bizonyos azonosítóval megjelölni egy HTML dokumentumon belül. 1. 2. 3. CSS példa 4. <style type="text/css"> 9. 10. 11.
A cserebogarak halhatatlanságáról
12.
A cserebogárnak vannak lábai. Ebből...
13.
Minden cserebogárnak van lába...
14.
A cserebogárnak vannak szárnyai is...
15.
A szárnyaival repülni tud...
16.
A halhatatlanság azt jelenti, hogy...
17.
A cserebogarak halhatatlansága tehát...
18. 19.
A stíluslapban a kettőskeresztet használtuk az azonosításhoz, a HTML forrásban pedig az id tulajdonságot. A kiválasztókat itt is keverhetjük (bár mivel egy azonosító csak egy konkrét elemre vonatkozhat, ezért nincs rá szükség), a p#halhatatlan egy szabályos kiválasztó.
Helyzetérzékeny kiválasztás A stíluslapban lehetőségünk van a HTML fában betöltött helye alapján meghatározni egy elemről, hogy hogyan nézzen ki. Kevésbé bonyolultan megfogalmazva: a helyzetérzékeny kiválasztásnál a fában egy adott elem alatt levő elemhez rendelhetünk stílust, például megmondhatjuk, hogy a táblázatokon belül levő félkövér betűk sötétkékek legyenek, miközben a normál bekezdésekben levőknek nem fog megváltozni a színe. 1. 2. 3. CSS példa 4. <style type="text/css"> 7. 8. 9.
10.
11.
A cserebogarak halhatatlanságáról
12.
13.
14.
A cserebogárnak vannak lábai. Ebből...
15.
Minden cserebogárnak van lába...
16.
17.
18.
Minden cserebogár bogár...
19. 20. Mint a stílusdefinícióban láthatjuk, ilyenkor először azt az elemet kell leírnunk, amin belül (table), majd egy szóközt követően azt, amire (b) szeretnénk megadni a stílust. Több szintet is felölelhet a kiválasztónk, pl. használhatunk table tr b formát is, illetve keverhetjük a korábbiakban megismert kiválasztokat kedvünkre: table.fontos tr#egyedi b.
Szülő-gyermek kiválasztás A szülő-gyermek kiválasztás abban különbözik a helyzetérzékeny kiválasztástól, hogy az elemeknek a fában betöltött helye szerinti közvetlen szülő-gyermek kapcsolata esetén tudjuk megadni a stílusmeghatározását. Az előző példánál maradva itt külön meg kell mondanunk azt, hogy a td és a th elemeken belüli b elemek esetén szeretnénk a színt megadni: 1. 2. 3. CSS példa 4. <style type="text/css">b, td>b { color: #0000a0; }
6. --> 7. 8. 9.
10.
11.
A cserebogarak halhatatlanságáról
12.
13.
14.
A cserebogárnak vannak lábai. Ebből...
15.
Minden cserebogárnak van lába...
16.
17.
18.
Minden cserebogár bogár...
19. 20. Az egyes elemeket itt most nem szóközzel, hanem nagyobb jellel választottuk el. Itt is lehet több szinten keresztüli kiválasztást leírni, például tr>th>b, amennyiben ez számunkra a megfelelőbb, illetve keverni a korábban megismert lehetőségeket. A szülő-gyermek kiválasztást a CSS szabvány újabb, második verziója, ezáltal az újabb böngészők támogatják csak!
Tulajdonság alapú kiválasztás Előfordulhat, hogy egy adott paraméterének megléte, vagy annak az értéke szerint szeretnénk egy HTML elemhez kiválasztást rendelni, például szeretnénk csak a jelszó beviteli mezőkben a csillagok színét megváltoztatni: 1. 2. 3. CSS példa 4. <style type="text/css"> 7. 8. 9. 13. 14. A fenti példában látható, hogy a HTML elem neve után szögletes zárójelben a paraméter neve, majd az értéke következik. Lehetőségünk van a paraméter meglétére, a paraméter értékére, illetve a paraméter értékében szereplő jelsorozatra keresni: 1. input[type] { ... } 2. input[type="password"] { ... } 3. input[type~="pass"] { ... }
A tulajdonság alapú kiválasztást a CSS szabvány újabb, második verziója, ezáltal az újabb böngészők támogatják csak!
Összefoglalás Egyelőre még csak elkezdtünk ismerkedni a CSS-sel, a megadásuk lehetőségeit, illetve az egyszerűbb kiválasztók használatát tanultuk meg. A kiválasztók bármilyen formában keverhetőek (ahogyan fentebb is láttunk pár példát rá), ezáltal nagyon rugalmasan használhatóak. A következő lépés annak bemutatása lesz, hogy milyen lehetőségeink vannak egy elem megjelenésének a befolyásolására, azután, hogy kiválasztottuk a most megismert kiválasztók valamelyikének segítségével. Ennek a cikksorozatnak a keretében a tervek szerint nem fogunk rá kitérni, de jó azt is tudni, hogy nem csak HTML, hanem például XML dokumentumok, interfészek (pl. XUL) megjelenésének a befolyásolására is használható eszközzel ismerkedünk éppen meg.
Bekezdések megjelenése Betűkészletek Adott elemeken állítani tudjuk a betűkészletet, a stílust, módosítást, súlyozást méretet.
Betűtípus 1. body { font-family: Arial, Helvetica, sans-serif; } A példában az egész dokumentumra beállítjuk, hogy milyen betűkészlet legyen az alapértelmezett. Érdemes több, hasonló betűkészletet is felsorolni, illetve a lista végére egy általános betűkészletet is elhelyezni az adott családból. Az általános betűkészletek a következők lehetnek: serif, sans-serif, cursive, fantasy, monospace.
Stílus Egy font dőltségét befolyásolhatjuk, példánkban az egész dokumentumra adtuk meg, hogy dőltek legyenek a betűk. További lehetőségeink: normal, italic, oblique. 1. body { font-style: italic; }
Súlyosság A példában félkövér betűkészletet állítunk be a HTML dokumentumra. Lehetőségeink: lighter, normal, bold, bolder, illetve 100-tól 900-ig a számok 100-asával (egyre vastagabb betűkészletet választva). 1. body { font-weight: bold; }
Méret A HTML dokumentum alapértelmezett betűtípusának a méretét határoztuk meg a példában. A konkrét méretmegadásnál több lehetőségünk is van, lehetséges pixelben (mint a példában), pontban (pt-t kell írni), százalékban, szövegesen (xx-small, x-small, small, medium,
a méretet. A lehetséges mértékegységekre egy következő cikkben még részletesebben is ki fogunk térni. 1. body { font-size: 14px; }
Csoportos megadás Lehetőségünk van a fentieket egy paraméterként is átadni: 1. body { font: italic bold 14px Arial, Helvetica, sans-serif; }
Szöveg paraméterek A szöveg színét, sűrűségét, igazítását, aláhúzását, behúzását állíthatjuk, továbbá konvertálhatjuk a szöveget különböző formára (kisbetűs, nagybetűs, stb.). Pár példa: 1. h1 { color: black; } A 1. szintű címsor színét feketére állítjuk. Lehetőségünk van #ffffff hexadecimális formában is megadni a színt (a mértékegységek mellett a lehetséges színmegadási módokat is be fogjuk mutatni még). 1. h1 { letter-spacing: 10px; } A címsor betűi közötti távolságot növeltük meg 10 képponttal. Lehetőségünk van növelni és csökkenteni a távolságot. 1. h1 { text-align: center; } A címsor igazítását adjuk meg, lehetőségünk van balra, középre és jobbra igazítani, valamint sorkizártra beállítani a stílust (left, center, right és justify rendre a megfelelő értékek). 1. a { text-decoration: none; } A példában a link dekorációjaként nem adtunk meg semmit, azaz felülbíráltuk az alapértelmezett aláhúzást. A lehetséges értékek: none, underline, overline, line-through, blink lehetnek, melyek rendre díszítetlen, aláhúzott, felülhúzott, áthúzott és villogó értékeket állítanak be. 1. p { text-indent: 40px; } A bekezdések első sorának behúzását állíthatjuk ennek a paraméternek a segítségével. 1. h1 { text-transform: uppercase; } A stíluslap hatására az 1. szintű címsorunk végig nagybetűvel fog megjelenni. Lehetséges értékek: none, capitalize, uppercase és lowercase, melyek rendre: módosítatlan, első betű nagy, összes betű nagy és összes betű kicsi jelentésűek. 1. h1 { text-shadow: 5px 5px 3px #000000; }
A tulajdonság hatására egy árnyékot rajzol a böngészőnk a szöveg köré. A pozíciók megadása nem kötelező, a sziné igen. Az egyes értékek jelentése rendre: lefele való távolság, jobbra való távolság, elmosottság sugara, szín. A távolságok negatív értéket is felvehetnek. 1. p { whitewhite-space: nowrap; } A szóközök, tabulátorok kezelését állíthatjuk a white-space attribútummal. A normal a sorvégeken tördeli a szöveget, a nowrap nem enged sortörést, míg a harmadik lehetséges érték, a pre megtartja egy az egyben a sortöréseket, szóközöket, tabulátorokat (mint a pre HTML elemnél). 1. p { word-spacing: 10px; } A szavak közötti távolságot vezérelhetjük ennek a paraméternek a segítségével. Lehetőségünk van negatív értékek megadására is. 1. p { line-height: 20px; } A sormagasságot állíthatjuk vele egy paragrafuson belül. Célszerű a betűink méreténél nagyobb sormagasságot beállítani, különben összecsúsznak a sorok. 1. .super { vertical-align: super; } A tulajdonsággal az elem függőleges pozícióját tudjuk szabályozni. Egy cellán belül a HTML nyelv td elemének valign tulajdonságához hasonlít, azonban szöveg környezetben (például egy div-en belül) a betűkhöz, és nem a befoglaló blokk méreteihez viszonyított igazítást állítja. Az értékei lehetnek: sub, super, baseline, text-top, text-bottom, middle, top, bottom. A példában egy felső index pozíció beállítását láthatjuk.
Dobozok megjelenése A legtöbb HTML elem egy dobozba foglalható, és ezzel kapcsolatosan különböző tulajdonságai állíthatóak. Az alábbi ábra egy általános HTML elem megjelenését mutatja be.
Doboz modell Négy oldala van, a felső, az alsó, a bal oldali és a jobb oldali. Mindegyik oldalnak van
margója (1), kerete (2) és kitöltése (3). A margó a befoglaló doboz legszéle és a keret közötti távolságot állítja be. A keret a margó és a kitöltés között található. Végül a kitöltés a keret és a tartalom között helyezkedik el. Mindegyik lehet akár 0 pixel szélességű is, ekkor egyszerűen nem jelennek meg. A tartalom és a kitöltés által meghatározott terület hátterének színe állítható, illetve képet is el lehet helyezni rajta. Az elemeknek van magasság (4) és szélesség (5) tulajdonsága is. Ezek a szabvány szerint az adott keret külső részétől az átellenes keret külső részéig értendőek. Erről sajnos a jelenleg domináns böngésző valamiért nem tud (kivéve 6-os verziójának kompatibilis módját), és a teljes dobozszélességet, illetve dobozmagasságot érti ezen tulajdonságok alatt. Egy soron belüli elemnek is megadhatjuk a fenti értékeket, viszont előfordulhat, hogy több sorban jelenik meg. Ekkor az alábbi jelenséget figyelhetjük meg:
Doboz modell soron belül Ahogy a képen látható, a piros keretű doboz középen (az elválasztásnál) kettétörik, és a keret (illetve a másik két tulajdonság) mindkét sorban hat, viszont a törésnél, azaz a sorok megfelelő szélénél nem. Ha több sorba kerül az elemünk aminek ezeket a tulajdonságokat megadtuk, akkor több helyen is kettétörik a doboz.
Háttér A háttér színét vezérelhetjük segítségével, továbbá elhelyezhetünk képet háttérként, s annak tulajdonságait (elhelyezkedését, ismétlődését, mozgását) állíthatjuk be. A betűkhöz hasonlóan egy definícióban is, és külön-külön is szabályozhatjuk az tulajdonságokat. 1. body { background-color: white; } Fehérre állítja a háttér színét. Természetesen a színt hexadecimális formában (#ffffff) is megadhatjuk. 1. body { 2. background-image: url(hatter.gif); 3. background-position: top left; 4. background-attachment: scroll; 5. background-repeat: repeat; 6. } A példa a háttérnek megadja a hatter.gif-et (lehetne még none is megadva, ekkor csak a színezés maradna), a bal felső sarokhoz igazítja, beállítja, hogy amikor görgetjük az oldalt,
akkor a háttér is mozogjon, s végül még azt, hogy ismétlődjön a háttérkép. A backgroundposition (elhelyezkedés) értékei lehetnek szövegesek: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, illetve százalékosak (pl. 12% 34%) és pixelben megadottak (pl. 12px 34px). A background-attachement (a rögzízettséget szabályozza) értéke lehet fixed és scroll, az előbbinél nem mozdul a háttér, az utóbbinál pedig a görgetéssel együtt mozog. Az ismétlődést befolyásoló background-repeat négy értéket vehet fel: repeat, repeat-x, repeat-y, norepeat, melyekkel mindkét, csak az egyik, vagy egyik irányban sem történő ismétlődést érhetünk el. A háttér paraméterek egy összevonó background paraméterrel: 1. body { background: white url(hatter.gif) no-repeat fixed center center; } Ebben az esetben mivel a képnek no-repeat értéket adtunk ismétlésül, a fennmaradó területen a háttér fehér színű lesz.
Keretek A stíluslapok segítségével lehetőségünk van különböző stílusú keretet adni a kiválasztott HTML elemeinknek. 1. p { border: 2px solid blue; } A fenti példában 2 képpont széles, sima és kék keretet adtunk minden bekezdésnek. Az első fenti paraméter a keret szélességét, a második a keret stílusát (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), a harmadik pedig a színét adja meg. Az egyes paraméterek elhagyhatóak, de általában szükséges mind. Lehetőségünk van a keretek mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció: 1. p { 2. border-left: 1px solid red; 3. border-top: 3px double blue; 4. border-right: 3px dotted green; 5. border-bottom: 3px dashed black; 6. } Bal oldalt egy képpont széles piros, felül 3 képpontnyi két vonalas (vonalanként 1-1 képpontos) kék, jobb oldalt 3 képpontos pontozott zöld és végül alul 3 képpontos szaggatott vonalas fekete keretet kap minden bekezdés.
Körvonalak A körvonalak a keretekhez nagyon hasonlóan működnek, ellenben az elem méretét nem befolyásolják, mindig körülötte és felette (előtte, azaz eltakarják mindenképpen a doboz tartalmát) jelennek meg, helyet nem foglalnak. A legegyszerűbb talán a fókusz példáját felhozni, mely ehhez nagyon hasonló: mikor egy beviteli elem (például gomb) aktív, akkor körülötte az operációs rendszer egy körvonallal jelzi, hogy fogadja a felhasználói bevitelt.
A körvonalak és a keretek további különbsége, hogy nem lehet a négy oldalon külön-külön megadni és hogy nem csak négyzetes alakú lehet. De lássuk azokat a tulajdonságokat, melyekkel befolyásolni tudjuk a körvonal megjelenését! 1. p { outline-width: 2px; } 2. p { outline-style: solid; } 3. p { outline-color: #000000; } Az outline-width tulajdonság segítségével a körvonal szélessége adható meg, az outlinestyle a stílust definiálja, míg az outline-color a körvonal színét állítja be. A stílusnál a kereteknél bemutatott stílusok használhatóak. Lehetőség van egy tulajdonság segítségével beállítani a három tulajdonságot, ekkor opcionálisan és bármilyen sorrendben megadhatjuk az outline után ezeket: 1. p { outline: 2px solid #000000; }
Margók Az egyes elemek a kereten (legyen az akár 0 képpontnyi) kívüli helyfoglalását szabályozhatjuk a margók segítségével. 1. p { margin: 0px 1px 2px 3px; } A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi margót állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk: 1. body { margin: 0px; } Ha csak két értéket adunk meg paraméterként, akkor az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú margókra fog vonatkozni: 1. body { margin: 10px 0px; } Lehetőségünk van a margók mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció: 1. p { 2. margin-left: 3px; 3. margin-top: 0px; 4. margin-right: 1px; 5. margin-bottom: 2px; 6. } Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső margós példánál bemutatottal.
Kitöltés Az egyes elemek a kereten (legyen az akár 0 képpontnyi) belüli helyfoglalását szabályozhatjuk a kitöltések segítségével. 1. p { padding: 0px 1px 2px 3px; } A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi kitöltést állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk: 1. body { padding: 5px; } Ahogy a margóknál, itt is lehet csak két értéket megadni paraméterként, ahol az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú kitöltést szabályozza: 1. body { padding: 10px 0px; } Lehetőségünk van a kitöltések mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció: 1. p { 2. padding-left: 3px; 3. padding-top: 0px; 4. padding-right: 1px; 5. padding-bottom: 2px; 6. } Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső kitöltéses példánál bemutatottal.
Listák megjelenése A listák két különböző HTML elemek egymásba ágyazásából állnak össze. A külső elem lehet ul, ol és dd elem, melyben li, illetve dt elemek kapnak helyet. Mind a külső, mind a belső elemek saját margóval, kerettel és kitöltéssel rendelkeznek. A belső listaelemek listajelölő grafikájának megjelenítésekor a különböző böngészők kicsit eltérően viselkednek, egy részük a külső elem bal felének megfelelő szélességű margót, másik részük pedig megfelelő szélességű kitöltést ad, majd ezen a területen jeleníti meg a grafikát (a dd-dt páros esetén alapértelmezett esetben nem jelenik meg grafika, de a megfelelő margókkal rendelkezik). A grafika megjelenítése a belső listaelemeken kívülről áthelyezhető belülre egy tulajdonság segítségével.
Listaelemek A listák megjelenését tudjuk szabályozni a következőkben bemutatott paraméterekkel. Lehetőségünk van képet rendelni a listaelemekhez, vagy egy előre meghatározott listából választani, továbbá befolyásolhatjuk az egyes listaelemek előtt álló jelek helyzetét. Lehetőségünk van mindezt egy paraméterrel, illetve külön-külön is állítani:
1. 2. 3. 4.
ul { list-style: square inside url(pont.gif) } ul { list-style-position: inside } ul { list-style-type: disc } ul { list-style-image: url(pont.gif) }
Az első sor az egy paraméterként megadott szabályozást mutatja be. Egy kép fog megjelenni minden listaelem előtt, s a képet a szöveggel együtt fogja behúzni. Ha azt szeretnénk, hogy a kép ne legyen behúzva, akkor outside paramétert kell megadnunk. A fenti példában, mivel a kép meg van adva, s bár azt is meghatároztuk, hogy négyzet (square) legyen a jel, ezt felül fogja bírálni a kép. Mindazonáltal a jelet is meg kell adnunk, enélkül ugyanis nem jelenik meg a kép... A második sorban a jel behúzásának szabályozó paramétert mutatjuk be, ahogy az előbb is említettük, itt állhat értékül inside és outside. A harmadik sor a jelet szabályozza. Itt széles választási lehetőségünk van: none, disc, circle, square, decimal, decimal-leadingzero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lowerlatin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha - persze nem mindegyik böngésző támogatja az összes jelet. Végül az utolsó sorban a képre cserélését láthatjuk a lista jelének - mégegyszer kihangsúlyozzuk, ha szeretnénk, hogy a kép megjelenjen, meg kell adnunk a jel típusát is. A következő két ábra a list-style-position tulajdonság hatását mutatja be, az elsőn az outside, alapértelmezett érték esetén történő megjelenítés látható, míg a másodikon az inside érték beállításával.
Lista pozíció - kívül
Lista pozíció - belül
Összefoglalás Nos, még korántsem értünk a végére a cikksorozatnak, de talán már az eddig bemutatott ismeretanyagból is látszik, hogy rengeteg lehetőségünk van, ha a HTML állományunk megjelenését szeretnénk befolyásolni. A cikksorozat következő részeiben megismerkedünk a CSS mértékegységekkel (távolságok,
színek, stb.), további kiválasztási lehetőségekkel, pár további paraméterrel, továbbá számos tippel és trükkel, melyek segítségével felfedezhetjük a CSS technológia szépségeit.
További kiválasztók A korábbiakban megismerkedtünk az elem, osztály, azonosító és tulajdonság alapú, továbbá a helyzetérzékeny és szülő-gyermek kapcsolatú kiválasztókkal. Ezek azok a kiválasztók, melyek kézzelfogható blokkokat jelölnek ki: egy-egy elemet annak paraméterként rögzített tulajdonságaitól függően. Ezeken túl azonban léteznek az úgynevezett látszólagos (virtuális) kiválasztók is, melyek vagy az adott elem egy részére illenek (látszólagos elemek), vagy az adott elem állapotától teszik függővé a kiválasztást (látszólagos osztályok). Ebben a részben ezeket fogjuk áttekinteni.
Linkekkel kapcsolatos látszólagos kiválasztók Aki már egy kicsit is foglalkozott HTML-lel, készített, vagy egyszerűen csak látogatott már weboldalakat, biztosan tudja, hogy a linkek más-más színnel jelennek meg, ha már voltunk az általuk mutatott oldalon, illetve ha még nem. Ezekre a színekre a HTML-ből, a body elem tulajdonságainak (link, vlink) állításával is hatással lehetünk, azonban CSS-t használva, sokkal több lehetőségünk lesz. Látszólagos kiválasztókkal ugyanis külön-külön meghatározhatjuk a megjelenésüket! Ezeket a kiválasztókat a következőképpen használhatjuk: 1. a { color: #0000FF; text-decoration: underline; } 2. a:link { text-decoration: none; } 3. a:visited { font-style: italic; } Az első sor semmi különöset nem tartalmaz, egy link elemnek határozzuk meg a stílusát. A második sorban azokat a linkeket választjuk ki, melyeket még nem látogattunk meg, a harmadik sorban pedig azokat, melyeket már meglátogattunk (nemrég). A két tulajdonság értelemszerűen kizárja egymást.
Dinamikus látszólagos kiválasztók A HTML dokumentumokat az ember nem szokta egy ültő helyében elolvasni, majd otthagyni. Az egész lényege valahol a dinamizmus: linkekre kattingatunk, adott esetben form elemeket használunk, stb. Az internet már interaktív média, és erre a CSS-t is felkészítették. No, nem kell bonyolult dolgokra gondolni, az eszköztárunk a következő lehetőségeket tartalmazza: az egérkurzor az adott elem felett van, az adott elem éppen aktív, továbbá ha az adott elem éppen fókuszban van. 1. 2. 3. 4.
Az első sorban itt sem tettünk semmi különöset, a beviteli mezők tulajdonságait határoztuk meg. A második sorban levő :hover kiválasztó akkor fog működni, ha az adott mező felé
visszük az egérkurzort, ekkor kék színnel jelenik meg a kerete. A harmadik sorban azt határozzuk meg, miként jelenjenek meg az aktív elemek. Hogy mit értünk aktív elemen? Azt, amelyikkel éppen csinálunk valamit. Például "megragadjuk", azaz lenyomva tartjuk az egérkurzort, vagy éppen lenyomunk egy gombot, stb. Példánkban ilyenkor az elem betűi vastaggá válnak. Végül a negyedik sorban azt definiáljuk, mi történjen, mikor éppen ki van választva az elemünk, rajta van a fókusz, ebben az esetben éppen a kurzor villog az input mezőnkben. Ehhez a :focus kiválasztóhoz rendelt tulajdonságunkkal éppen azt határoztuk meg, hogy a háttérszíne legyen világosszürke. Fontos megjegyezni, hogy bár a példában éppen beviteli mezőt láttunk, de ez a tulajdonság például a linkekre ugyanúgy működik, mint a közönséges bekezdésekre, vagy más elemre!
Elemszerű látszólagos kiválasztók A CSS lehetőséget biztosít kiválasztanunk egy-egy elem tartalmának csak bizonyos részeit, mintha azok külön-külön definiált elemek lennének. Ezekkel a látszólagos kiválasztókkal az adott elem első karakterét, vagy akár az első sorát is kiválaszthatjuk. 1. p:first-letter { font-size: 300%; } 2. p:first-line { color: #000080; } Így az adott betű, vagy az adott sor teljesen úgy fog viselkedni, mintha osztály alapú kiválasztással, például egy div vagy egy span elemmel határoltuk volna. A példa első sora egy bekezdés első betűjének kiválasztását (3-szor nagyobb lesz, mint a bekezdés többi betűje), míg a második sor egy bekezdés első sorának (sötétkék színű lesz) kiválasztását mutatja be.
Első gyermek látszólagos kiválasztó További lehetőségünk egy adott gyermek elemről eldöntenünk, hogy első-e a sorban. Azaz például ha a body elemen belül szeretnénk, hogy az első (bevezető) bekezdésünk vastagon legyen szedve, a first-child látszólagos osztály kiválasztó ad nekünk lehetőséget erre: 1. body > p:first-child { font-weight: bold; } Fontos megjegyeznünk, hogy ha a body dokumentumunkban az első bekezdésünk előtt van egy másik elem (például h1), akkor ez a kiválasztás már nem működik. Azaz nem az első bekezdés elemet, hanem az első bekezdést, amennyiben az az első gyermek elem is, választja ki ez a kiválasztó. Természetesen a következő definíció is elégséges lett volna: 1. p:first-child { font-weight: bold; } A különbség a két kiválasztó között, hogy ez utóbbi egy táblázatban levő bekezdés elemekre is illeszkedik, míg az előző csak a közvetlenül a body-ban levőkre.
Nyelv szerinti látszólagos kiválasztó A HTML-ben, de más leíró nyelveknél is, lehetőségünk van meghatározni hogy milyen nyelven íródott az adott dokumentum (HTML-nél meta elem a fejlécben), vagy adott elemekre is külön definiálhatjuk ezeket. A CSS biztosít számunkra erre is kiválasztót. Hogy a
gyakorlatban mire jó ez (amellett, hogy az angol szavakat pirossal, a németeket kékkel, stb. írhatjuk), egyetlen épkézláb példát találtam, meg lehet határozni a segítségével, hogy milyen idézőjelek szerepeljenek a dokumentumban. Ehhez egy speciális tulajdonság elemet használatunk fel, a quote-ot. Íme: 1. :lang(hu) > q { quotes: '\201E' '\201D' } 2. :lang(en) > q { quotes: '"' '"' } Ha a dokumentumunk Content-Language értéke hu, azaz magyar nyelvű dokumentumról van szó, akkor az idézőjelek alul és felül jelennek meg, míg angol nyelvű dokumentumok esetén mind a kettő felül - ha q elemet használunk az idézésekhez.
Elem előtt és után... Végezetül lássuk a :before és :after kiválasztókat. Ezek segítségével az adott elem előtti és mögötti látszólagos részeket választjuk ki (fontos: nem az előtte levő elemeket, hanem az elem és az előtte levő elem közötti 0 hosszúságú részt). Több trükköt is meg lehet vele valósítani, egy egyszerű, de nagyszerű például: 1. b:before { content: ''; } 2. b:after { content: ''; } Ezzel a dokumentumunkban láthatóvá válnak a b elemeink, "mintha" a HTML forrást néznénk.
Összefoglalás Az eddigi részekben gyakorlatilag áttekintettük az összes kiválasztót, illetve azokat a tulajdonságokat, melyeket általában használni szokás a weblapok készítésekor. A következő részben befejezzük a gyakran használt tulajdonságok áttekintését is, hogy utána még izgalmasabb dolgokkal foglalkozhassunk.
További tulajdonságok Az alapszintű tulajdonságok áttekintésekor a korábbiakban már láthattuk, hogy számos módon befolyásolhatjuk dokumentumunk megjelenését, azonban ezeken kívül további eszközök is rendelkezésünkre állnak. A lehetőségek skálája annyira széles, hogy ezeket a tulajdonságokat is két cikkre bontottam, és ezeken belül is minden bizonnyal fognak még kimaradni tulajdonságok. Ezzel és a következő cikkel reményeim szerint ezek csak olyanok lesznek, melyekre viszonylag ritkábban van csak szükségünk.
A láthatóság tulajdonság A láthatóság tulajdonság segítségével egy elemről meghatározhatjuk, hogy a böngésző megjelenítse-e, vagy pedig ne? Három értéket vehet fel: • •
visible hidden
•
collapse
A visible érték esetén látható lesz a böngészőben, hidden esetén pedig el lesz rejtve. A collapse értéket táblázat elemeknél használhatjuk, egy oszlop, vagy egy sor elrejtésére való. Példa a tulajdonság használatára: 1. h1 { visibility: hidden; } Fontos megjegyezni, amennyiben nem jelenítjük meg az elemünket, a hely még fennmarad számára, azaz tényleg csak és kizárólag a megjelenése lesz kikapcsolva, attól függetlenül még marad egy "lyuk" a dokumentumban. Ha teljesen el szeretnénk rejteni egy elemet, a következőben bemutatandó megjelenítés tulajdonságot a none értékkel használhatjuk rá.
A megjelenítés tulajdonság A böngésző amikor megjeleníti a dokumentumunkat, előre meghatározott sémák segítségével építi fel a dokumentumunk megjelenését. Ilyen séma a dobozszerű megjelenítés, vagy a folyamatos, egy dobozon belüli megjelenítés, de a felsorolásokra, táblázatok megjelenésére is van egy-egy séma. Például a címsor elemek (h1-h6) és a paragrafus elem viszont ugyanazokat a blokk alapú sémákat használhatják. Ezek a sémák a következők: • • • • • • • • • • • • • • • • • •
Bár a böngészőknél minden egyes elemhez hozzá van rendelve egy alapértelmezett séma, ezeket felül tudjuk bírálni. Erre szolgál a display tulajdonság. Ennek a használata a következő: 1. h1 { display: run-in; } Vegyük sorra, hogy melyik séma hogyan jelenik meg!
Megjelenítés letiltása Ezen nincs mit bonyolítani, egyszerűen, ha display: none stílust adunk egy elemnek, akkor nem fog megjelenni. Ettől függetlenül a dokumentumunkban jelen lesz, elérhető, használható, de fókuszt már felhasználó által nem kaphat (pl. javascriptből viszont igen). A használata egyszerű: 1. .hidden { display: none; } Ha egy form elemet szeretnénk letiltani, megtehetjük akár így is. Az összes elem, ami az ilyen stílussal ellátott elemnek a gyermeke, szintén láthatatlan lesz.
Soron belüli megjelenítés Ennek segítségével az adott elemet egy soron belül lehet megjeleníteni. Jó példa erre a div és a span elem, a span elem ilyen, a div pedig blokként jelenik meg. Hasznát sok helyzetben vehetjük, de egy tipikus példa, mikor a form elemünk blokk típusú megjelenítését soron belülire szeretnénk változtatni, mert zavar, hogy a form határokon sortörést tapasztalunk: 1. form { display: inline; } Röviden összefoglalva: az elem előtt és után nem lesz sortörés.
Blokkban történő megjelenítés Ilyenek a div, a p és a címsor elemek. Egy téglalapot foglalnak el, és abban jelenítik meg tartalmukat. Felhasználására példa lehet, mikor egy felsorolás elemeit blokként szeretnénk megjeleníteni (például menünek használva): 1. ul, li { display: block; border: 1px solid #000000; } Összefoglalva: az elem előtt és után sortörés lesz beiktatva.
Befutó megjelenítés A szabvány szerint a befutó megjelenés segítségével "betolakodhatunk" a következő elembe, amennyiben az blokként jelenik meg. Más szavakkal, a befutó megjelenítéssel azt érjük el, hogy az elemünk az utána következő blokk elem első soron belüli eleme lesz. Abban az esetben, ha nem blokk elem következik a befutó tulajdonságú elem után, akkor blokként jelenik meg. Így például egy címsor elemet az utána következő bekezdés elején tudunk megjeleníteni: 1. h1 { display: run-in; }
Kompakt megjelenítés Itt a befutó megjelenítésnél egy fokkal bonyolultabb esetről van szó. A megjelenítő egy egy soros soron belüli blokként próbálja beilleszteni a következő blokk elembe - amennyiben a következő egy blokk elem és "befér" oda - a kompakt megjelenítés tulajdonságú elemet. Azt, hogy "befér"-e, a blokk elem bal vagy jobb margójának megvizsgálásával dönti el, ha az nagyobb, mint az elem szélessége, akkor a következő blokkon belül, különben pedig egy külön blokkban jelenik meg az elem. Az, hogy a bal, vagy a jobb margót vizsgálja-e meg a megjelenítő, a következő blokk elem irányától függ. Másként megfogalmazva, ha a következő
elem mellett (bal, illetve jobb oldalon) elfér az elem, akkor ott, különben pedig felette egy külön blokkban jelenik meg. Ezt is címek megjelenítésére lehet talán használni, "kompaktabbá" tehetjük vele a dokumentumunk megjelenését: 1. h1 { display: compact; }
Lista elemként történő megjelenítés Listaelemként történő megjelenítést okoz, persze tudom, hogy nem illik magával megmagyarázni valamit. A lista elemek két egymás mellett álló téglalapként jelennek meg, a bal oldali behúzásként is felfogható, a jobb oldaliban pedig a lista tartalma jelenik meg. A lista jelölő elem az a stílustól függően vagy a bal oldali, vagy a jobb oldali téglalapban fog megjelenni. 1. li { display: list-item; }
Jelölőként való megjelenítés Csak generált blokkban használhatjuk, ellenkező esetben soron belüli megjelenést állít be. A generált blokkra példát az elem előtt és után történő kiválasztásnál láthattunk a content használatakor. Lényeg a lényeg, az előzőleg a lista elemnél a jelölő megjelenéséhez hasonlóan fog megjelenni ebben az esetben a generált tartalom. 1. li:before { display: marker; content: "-"; width: 10px; }
Táblázatokkal kapcsolatos megjelenítések Ezek a tulajdonság értékek a táblázat elemekkel megegyező megjelenést biztosítanak. A lehetőségek a következők: table, inline-table, table-row, table-row-group, tablecolumn, table-column-group, table-header, table-header-group, table-footergroup, table-cell, table-caption.
A pozícionálás és kapcsolódó tulajdonságok Az egyes elemek helyzetét többféleképpen meg lehet adni. Szabályozható, hogy hol legyen a tetejük, aljuk, bal és jobb oldaluk, milyen széles és magas legyen a befoglaló méretük, hogy mihez képest viszonyuljon, stb. Ebben a részben ezeket a tulajdonságokat fogjuk megvizsgálni.
Pozícionálás tulajdonság Evvel a tulajdonsággal azt határozhatjuk meg, hogy mihez képest helyezze el az elemet a megjelenítő alkalmazás. Lehetőség van statikus, relatív, abszolút, fix és öröklött értékre. A statikus (static) érték (mely az alapértelmezett) ott jelenik meg az elem, ahol éppen tartunk a dokumentumban. Ennél az értéknél a bal és a fenti pozíció megadás (lásd mindjárt) figyelmen kívül lesz hagyva. 1. h1 { position: static; }
A relatív (relative) érték esetén a statikushoz hasonló helyre kerül az elem, de lehetőségünk van a bal és fenti pozíció megadással eltolnunk. A következő elem elhelyezése úgy lesz számítva, mintha ez az elem a helyén maradt volna. 1. #fejlec { position: relative; top: -15px; left: 10px; } Az abszolút (absolute) érték esetén szintén a statikushoz hasonló helyre kerül az elem, szintén lehetőségünk van eltolni, meghatározni az elhelyezkedését, ezen kívül a méreteit is. Itt már a jobb és lenti, illetve a szélesség, magasság megadásokat is használhatjuk, szintén lásd mindjárt. Ez az elem kikerül a megjelenítés folyamából, a következő elem oda kerül, ahova ez került volna. 1. #lablec { position: absolute; bottombottom: 10px; rightright: 10px; } A fix, rögzített (fixed) érték nagyon hasonló az abszolút pozícionáláshoz. Kiemelhetjük a dokumentumunkból az adott elemet, és rögzíthetjük, de most nem a dokumentumunkon, hanem a megjelenítőn (képernyőn) az adott pozícióban. Ennek eredménye, hogy ha lejjebb görgetjük a dokumentumot, az elemünk ugyanott marad. 1. #cimke { position: fixed; bottombottom: 10px; rightright: 10px; }
Elhelyezkedés és méret tulajdonságok A pozícionálások meghatározásánál láthattuk, hogy adott esetben meghatározhatjuk egy-egy elem pozícióját, befoglaló méretét. Ehhez a top, left, bottom, right és a width, illetve a height tulajdonságok állnak rendelkezésünkre. A top, left, bottom, right esetében a befoglaló elem határaihoz képest befele kell megadnunk a méreteket. A három lehetőség (top, bottom, height és left, right, width) közül ha kettőt megadunk, a harmadik kiszámításra fog értelem szerint kerülni. Ha megadjuk a harmadikat is, akkor felülbírálódik az elsőnek megadott az ütközés miatt. 1. #szoveg 2. { 3. position: absolute; 4. top: 10px; 5. left: 10px; 6. bottombottom: 10px; 7. rightright: 10px; 8. background: #eeeeee; 9. } Amikor egy elemnek szeretnénk "lefoglalni" egy adott helyet, vagy szeretnénk, hogy egy adott méreten ne nyúljon túl, akkor segítségünkre lehetnek a minimális és maximális magasságot és szélességet megadó tulajdonságok. Ezek a következők: min-height, maxheight, min-width, max-width. Használatuk hasonló az előzőekben bemutatottakhoz. Akkor van értelme használni ezeket, ha nem adjuk meg a doboznak, csak maximum egy kötöttségét, s ekkor a tartalma fogja eldönteni, hogy milyen méretet vesz fel. Használata: 1. #content { min-height: 500px; }
Túlcsordulás tulajdonság Az előzőekből következik, hogy előfordulhat, mikor egy adott doboz tartalma nagyobb, mint amekkora helyet neki szánunk, azaz a tartalmunk "túlcsordul", például a szélesség és magasság tulajdonságok megadásának következményeként. Az overflow tulajdonság segítségével tudjuk szabályozni a böngésző erre a helyzetre adott válaszát. Az overflow lehetséges értékei: visible, hidden, scroll, auto. Ha a visible értéket adjuk meg, akkor a blokk határain túl fog futni a tartalmunk, ha van például keretünk megadva, akkor a tartalom ezen is túl fog folyni, erre is rákerül. A hidden megadásakor a tartalomnak csak az a része fog látszani, mely a blokk határain belül van. Ha scroll-t adunk meg értékül, akkor megjelenik egy görgetősáv, és azzal tudjuk fel-le mozgatni a tartalmat. Végül ha auto-ra állítjuk a tulajdonságot, akkor hasonlóan a scroll értékhez, görgetősáv jelenik meg, de csak akkor, ha valóban túlcsordul a tartalmunk. Példa: 1. .box { width: 200px; height: 200px; overflow: auto; }
A vágás tulajdonság A vágás tulajdonság egy elem alakjának meghatározására szolgál. Segítségével kijelölhetjük láthatósági határait, így az elem le lesz vágva a megadott formára. Jelenleg egyetlen forma adható meg, a négyzet, melynek rendre a tetejének, jobb oldalának, aljának és bal oldalának a pozícióját kell megadnunk. Használata: 1. img { clip: rect(2px,2px,2px,2px); }
A lebegés és törlése tulajdonságok Aki megismerkedett a HTML nyelvben a képek lehetőségeivel, biztosan ismeri azt a tördelési technikát, mikor egy képet, idézetet, vagy bármi mást úgy helyezünk el a szövegben, hogy az adott paragrafus(ok) szövege "körbefolyik" körülötte. Az img elemnek van ugye egy erre szolgáló tulajdonsága, az align, mellyel balra és jobbra igazíthatjuk úgy, hogy az utána következő szöveg mellette maradjon. A CSS is kínál nagyon hasonlóan egy ugyanilyen lehetőséget a float tulajdonságon keresztül, de nincs lekorlátozva a tulajdonság a kép elemekre, "bárminek" megadhatjuk, hogy balra, vagy jobbra illeszkedjen. Például: 1. .left { float: left; } Előfordul azonban, hogy nem szeretnénk, ha például egy adott paragrafus mellett ilyen lebegő elemünk legyen, ezt törölhetjük a clear tulajdonság segítségével. Ekkor a lebegő elem alá "tolódik" le a clear tulajdonsággal bíró elem. A clear tulajdonság none, left, right és both értékeket vehet fel, tehát megadható, hogy csak bal, vagy csak jobb, vagy mindkét oldalon lebegő elemeket letiltsuk. Használata: 1. h1 { clear: both; }
Összefoglalás Ezen cikk folyamán megismerkedtünk pár tovább tulajdonsággal, melyek az eddigiek során kimaradtak, de több esetben is igazán jó szolgálatot tehetnek számunkra. Sajnos viszonylag nagy részüket még a legújabb böngészők sem nagyon támogatják, ajánlott az Opera (főleg
ezzel) és a Firefox legújabb verzióival próbálkozni. Emiatt volt pár tulajdonság, melyet igazán nem tudtam tesztelni, így csak a szabványban és különböző helyeken levő értelmezések alapján próbálhattam meg kibogozni, hogy vajon hogyan működhetnek. Bízom benne, hogy sikerrel.
További tulajdonságok még mindig Folytatjuk tehát ahol abbahagytuk, az érdekesebb, használhatóbb tulajdonságok következnek az alábbiakban, hogy tényleg csak azok maradjanak ki, melyekre nem lesz gyakran szükségünk.
Rétegek A CSS alapú megjelenítéskor 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: 1. #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: 1. 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 unicodebidi 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: 1. .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): 1. 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: 1. p:before { content: url(/images/para-start.gif); }
Számlálók A számlálókat később fogjuk bemutatni, röviden arról van szó, hogy egy folyamatosan növekvő értéket fogunk beszúrni az adott elem elé. Például: 1. h1:before { content: counter(headermains); }
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: 1. 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: 1. 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: 1. 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: 1. 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: 1. 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: 1. 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: 1. a { cursor: move; } 2. .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ű: 1. li:before { display: marker; markermarker-offset: 3em; content: "*"; }
Összefoglalás Az előző és a jelenlegi cikk folyamán megismerkedtünk azokkal a tulajdonságokkal, melyeket az eddigiek során nem mutattam be, mégis adott esetben felhasználhatjuk ezeket. Mint folyamatosan jelzem nagy részüket a legújabb böngészők sem nagyon támogatják, ajánlott legeslegújabbakkal próbálkozni. Az itt bemutatottak között is volt pár tulajdonság, melyet igazán nem tudtam tesztelni, így csak a specifikációra hagyatkozhattam bemutatásuk során. Aki kipróbálta ezeket a tulajdonságokat, ezeket maga is tapasztalhatta. Valószínűleg felmerült benne az a kérdés is: akkor miért a bemutatás, vagy miért a szabvány maga, ha nem is kerül megvalósításra, vagy ha igen, akkor csak pár böngészőben? Két válasz jut eszembe hirtelen: az egyik, hogy ezek megvalósítása nem mindig egyszerű, a böngészők lassacskán tudják csak megvalósítani ezeket, míg a másik, hogy ettől függetlenül egy-egy speciális környezetben (böngésző programozás, intranet, stb.) kiválóan alkalmazhatóak, úgy, hogy közben
szabványosak maradtunk, és biztosak lehetünk benne, hogy egyre bővülni fog azon böngészők köre, amelyekkel működni fog az oldalunk. A kiválasztók és tulajdonságok megismerésével még nem értünk a CSS megismerésének végére, a következő részben a mértékegységek áttekintését tervezem.
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: • • • • •
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:
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: • • • • •
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: • • • • •
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: 1. table, tr, td, th { 2. font-size: inherit; 3. color: inherit; 4. } 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: 1. 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: 1. 2. 3. 4. 5. 6. 7.
/* -- 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. 1. p { 2. font-size: 0.8em; 3. }
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.
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.
Wish CSS Debugger - munka közben 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 A megjelenített CSS-ek szerkeszthetőek, s a változtatások egyből érvényre is jutnak a dokumentumban. Nagyon gyors fejlesztést tesz lehetővé, hiszen nincs szükség a mentés, oldal letöltés (esetleg cache törlés) lépésekre, amint megváltoztatunk valamit, máris láthatjuk az eredményét.
Összefoglalás Mint láthattuk, van merre hibáznunk, és van mivel keresnünk ezeket a hibákat CSS esetében is. Egy kicsit eltér a többi nyelvtől a CSS hibakeresés, de a listában sok olyan tippet is találhatunk, mely általában jól jöhet a programozás és oldalkészítés során. A két bemutatott eszközt csak ajánlani tudom, nekem nagyon beválltak a napi munkák során, gyorsan lehet velük kipróbálni dolgokat, illetve megtudni, mi merre van. Egyszerre történő használatuk bár egy kicsit furcsa, de lehetséges.
A mostani cikkel a cikksorozat kapcsán egy mérföldkőhöz érkeztünk, ami egyelőre a sorozat végét is jelenti. Ez nem jelenti a CSS téma lezárását, de egy ideig szüneteltetni fogjuk azt. Mivel sok megismernivaló van még a CSS háza táján (gyakorlat, CSS 3, tippek és trükkök minden mennyiségben), ezért biztos vagyok benne, hogy vagy egy másik sorozatban, vagy pedig ebben visszatérünk még a témára a Weblabor hasábjain. Remélem, hogy a cikkek elnyerték mindenki tetszését, és sikerült mindenkinek legalább egy kis újdonságot nyújtani a témával kapcsolatban.
