2017. december 4., hétfő

CSS alapismeretek 9B osztály

Nézzünk meg néhány egyszerű példát a css használatára.Szeretnénk, formázni az oldalt, hogyan kezdjünk hozzá?

egy egyszerű példa:

  1. <html>  
  2. <head>  
  3.   <title>CSS példa</title>  
  4. </head>  
  5. <body>  
  6. <h1><font size="4" color="#a00000">Alma</font></h1>  
  7. <p><font size="2" color="#00a000">Korte</font></p>  
  8. <h1><font size="4" color="#a00000">Dio</font></h1>  
  9. <p><font size="2" color="#00a000">Szilva</font></p>  
  10. <h1><font size="4" color="#a00000">Barack</font></h1>  
  11. <p><font size="2" color="#00a000">Meggy</font></p>  
  12. </body>  
  13. </html>  
Minden szöveg (h1) és bekezdés (p) esetén meg kellett határoznunk a megjelenést (font), ráadásul ezáltal sokkal kevésbé lett áttekinthető a HTML forrásunk. További probléma, hogy a betűk méretének meghatározására nincs más lehetőségünk (a szabvány szerint), csak az előre definiált (1-től 7-ig meghatározott) méretek közül kiválasztani a nekünk megfelelőt. Amennyiben egy bonyolultabb oldalról van szó, még áttekinthetetlenebbé válhat a forrás, bonyolultabbá téve az utólagos szerkesztést. Nem lehetne ezt a formázást egyszerűbben elérni? 

Stíluslapok használatával:
  1. <html>  
  2. <head>  
  3.   <title>CSS példa</title>  
  4.   <style type="text/css"><!--  
  5.   h1 { font-size: 20px; color: #a00000; }  
  6.   p { font-size: 12px; color: #00a000; }  
  7.   --></style>  
  8. </head>  
  9. <body>  
  10. <h1>Bevezetés</h1>  
  11. <p>A vers...</p>  
  12. <h1>Tárgyalás</h1>  
  13. <p>A költő...</p>  
  14. <h1>Összefoglalás</h1>  
  15. <p>Végezetül</p>  
  16. </body>  
  17. </html>  

A trükk a fejlécben látható style elemeken belül van. Meghatározzuk, hogy a HTML állományban levő összes címsor (h1) elem és bekezdés (p) elem a fentiekben meghatározott kívánságainknak megfelelően jelenjen meg. Csak egyszer kellett ezt megtenni, továbbá a kódunk is sokkal átláthatóbb lett. A pontos méretet is meghatározhattuk, ezúttal pixelben megadva azt, de további mértékegységek is rendelkezésünkre állnak. Amennyiben valamiért utólag módosítanunk kell a megjelenést, egyből csak egy helyen kell ezt megtennünk, s mindenhol meg is változik. Az egyszerűbb szerkeszthetőségen és karbantarthatóságon kívül az így elkészített dokumentum sokkal kisebb méretű is lesz, gyorsabban letöltődik, kisebb adatforgalmat generál. Ha egy külső állományban helyezzük el a stílusdefiníciókat, akkor több dokumentum megjelenését is befolyásolni tudjuk egyszerre, továbbá ha a böngésző gyorsítótárazza a meghatározásokat, az adatforgalom tovább csökken. További előny, hogy az újabb böngészők egyre inkább támogatják a szabványokat, s ha mi is tartjuk hozzá magunkat, akkor egyre kisebb munkával egyre több látogató fogja pontosan ugyanúgy látni a honlapunkat (az eddigi "minden böngészőn megnézem, hogy jó-e" stílusú munkával szemben). Persze mint a korábbiakban is ki lett hangsúlyozva, csodát egyelőre a CSS-től se várjunk, de mindenképpen számíthatunk rá, hogy ez fogja meghatározni a jövő honlapjainak megjelenését. 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

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"><!-- 
  2. @import url(http://www.honlapunk.hu/stilusok/masik.css); 
  3. --></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ó  
  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. <html>  
  2. <head>  
  3.   <title>CSS példa</title>  
  4.   <style type="text/css"><!--  
  5.   h1 { font-size: 20px; color: #a00000; }  
  6.   p { font-size: 12px; color: #00a000; }  
  7.   .fontos { color: #ff0000; }  
  8.   --></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:
  1. <html>  
  2. <head>  
  3.   <title>CSS példa</title>  
  4.   <style type="text/css"><!--  
  5.   h1 { font-size: 20px; color: #a00000; }  
  6.   p { font-size: 12px; color: #00a000; }  
  7.   .fontos { color: #ff0000; }  
  8.   h1.fontos { background: #ffcccc; }  
  9.   --></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"><!--  
  5.   h1 { font-size: 20px; color: #a00000; }  
  6.   p { font-size: 12px; color: #00a000; }  
  7.   #halhatatlan { color: #ff0000; }  
  8.   --></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>  
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"><!-- 
  5.   table b { color: #0000a0; } 
  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>  
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.   --></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"><!-- 
  5.   input[type="password"] { color: #0000a0; } 
  6.   --></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"] { ... }  
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.
 http://weblabor.hu/cikkek/cssalapjai1

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, 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; }  
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 { white-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 background-position (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, no-repeat, 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 outline-style 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. 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-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, 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. 
http://weblabor.hu/cikkek/cssalapjai2

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é 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: '<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.  
Bejegyezte: dátum:

Nincsenek megjegyzések:

Megjegyzés küldése

Feliratkozás: Megjegyzések küldése (Atom)