CSS hozzákapcsolása a HTML-hez

Átírás

1 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. <head> 2. <link rel="stylesheet" href="kulso.css" type="text/css"> 3. </head> 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. <h1 style="font-size: 20px; color: #a00000;">bevezetés</h1> 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

2 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"><!-- url( ></style> A cím megadásakor hasonlóképpen járhatunk el, mint a linkeknél általában, azaz akár url(masik.css) 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! 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ó { 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.

3 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. <html> 2. <head> 3. <title>css példa</title> 4. <style type="text/css"></style> 9. </head> 10. <body> 11. <h1>a cserebogarak halhatatlanságáról</h1> 12. <p class="fontos">a cserebogárnak vannak lábai. Ebből...</p> 13. <p>minden cserebogárnak van lába...</p> 14. <p class="fontos">a cserebogárnak vannak szárnyai is...</p> 15. <p>a szárnyaival repülni tud...</p> 16. <p>a halhatatlanság azt jelenti, hogy...</p> 17. <h1 class="fontos">fontos!</h1> 18. <p class="fontos">a cserebogarak halhatatlansága tehát...</p> 19. </body> 20. </html> 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:

4 1. <html> 2. <head> 3. <title>css példa</title> 4. <style type="text/css"></style> 10. </head> 11. <body> 12. <h1>a cserebogarak halhatatlanságáról</h1> 13. <p class="fontos">a cserebogárnak vannak lábai. Ebből...</p> 14. <p>minden cserebogárnak van lába...</p> 15. <p class="fontos">a cserebogárnak vannak szárnyai is...</p> 16. <p>a szárnyaival repülni tud...</p> 17. <p>a halhatatlanság azt jelenti, hogy...</p> 18. <h1 class="fontos">fontos!</h1> 19. <p class="fontos">a cserebogarak halhatatlansága tehát...</p> 20. </body> 21. </html> 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. <html> 2. <head> 3. <title>css példa</title> 4. <style type="text/css"></style> 9. </head> 10. <body> 11. <h1>a cserebogarak halhatatlanságáról</h1> 12. <p>a cserebogárnak vannak lábai. Ebből...</p> 13. <p>minden cserebogárnak van lába...</p> 14. <p>a cserebogárnak vannak szárnyai is...</p> 15. <p>a szárnyaival repülni tud...</p> 16. <p>a halhatatlanság azt jelenti, hogy...</p> 17. <p id="halhatatlan">a cserebogarak halhatatlansága tehát...</p> 18. </body> 19. </html>

5 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. <html> 2. <head> 3. <title>css példa</title> 4. <style type="text/css"></style> 7. </head> 8. <body> 9. <table border="1"> 10. <tr> 11. <th colspan="2">a <b>cserebogarak</b> halhatatlanságáról</th> 12. </tr> 13. <tr> 14. <td>a <b>cserebogárnak</b> vannak lábai. Ebből...</td> 15. <td>minden <b>cserebogárnak</b> van lába...</td> 16. </tr> 17. </table> 18. <p>minden <b>cserebogár</b> bogár...</p> 19. </body> 20. </html> 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. <html> 2. <head> 3. <title>css példa</title> 4. <style type="text/css"><!-- 5. th>b, td>b { color: #0000a0; }

6 6. --></style> 7. </head> 8. <body> 9. <table border="1"> 10. <tr> 11. <th colspan="2">a <b>cserebogarak</b> halhatatlanságáról</th> 12. </tr> 13. <tr> 14. <td>a <b>cserebogárnak</b> vannak lábai. Ebből...</td> 15. <td>minden <b>cserebogárnak</b> van lába...</td> 16. </tr> 17. </table> 18. <p>minden <b>cserebogár</b> bogár...</p> 19. </body> 20. </html> 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. <html> 2. <head> 3. <title>css példa</title> 4. <style type="text/css"></style> 7. </head> 8. <body> 9. <form> 10. Név: <input name="name"> 11. Jelszó: <input type="password" name="pwd"> 12. </form> 13. </body> 14. </html> 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"] {... }

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

8 large, x-large, xx-large, smaller, larger) megadni 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; }

9 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

10 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,

11 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.

12 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.

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

14 1. ul { list-style: square inside url(pont.gif) } 2. ul { list-style-position: inside } 3. ul { list-style-type: disc } 4. 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,

15 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. input { font-size: 12px; border: 1px solid #000000; background: #ffffff; } 2. input:hover { border: 1px solid #0000FF; } 3. input:active { font-weight: bold; } 4. input:focus { background: #dddddd; } 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é

16 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

17 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: '<b>'; } 2. b:after { content: '</b>'; } 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

18 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: inline block run-in compact list-item marker table inline-table table-row table-row-group table-column table-column-group table-header table-header-group table-footer-group table-cell table-caption none 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!

19 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ő

20 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; }

21 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; }

22 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

23 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; }

24 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)

Több megjelenítése