CSS
alapok




CSS
CSS

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. <h1>Minden cserebogárnak van lába...</h1>
  14. <p class="fontos">A cserebogárnak vannak szárnyai is...</p>
  15. <h1>A szárnyaival repülni tud...</h1>
  16. <h1>A halhatatlanság azt jelenti, hogy...</h1>
  17. <h1 class="fontos">FONTOS!</h1>
  18. <p class="fontos">A cserebogarak halhatatlasá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. <h1>Minden cserebogárnak van lába...</h1>
  15. <p class="fontos">A cserebogárnak vannak szárnyai is...</p>
  16. <h1>A szárnyaival repülni tud...</h1>
  17. <h1>A halhatatlanság azt jelenti, hogy...</h1>
  18. <h1 class="fontos">FONTOS!</h1>
  19. <p class="fontos">A cserebogarak halhatatlasága tehát...</p>
  20. </body>
  21. </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ó.

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!




W3C CSS