Kihagyás

3.2. fejezet

A fejezet anyaga

További CSS szelektorok

A 2. fejezetben megismerkedtünk a legalapvetőbb CSS szelektorokkal (elem szelektor, class szelektor, id szelektor, univerzális szelektor). Ebben a részben néhány további kijelölőtípusról fogunk tanulni.

Megjegyzés

A gyakorlaton csak a gyakrabban használt szelektorokat tárgyaljuk. Ezeken kívül vannak még további CSS szelektorok is, amelyeknek a részletes listáját megtalálhatjuk itt.

Szelektorok csoportosítása

Amikor több szelektorra is ugyanazok a formázások vonatkoznak, akkor a szelektorokat vesszővel elválasztva soroljuk fel egymás után.

Példa: Az összes <h1> és <h2> objektum, valamint a class="warning" attribútummal rendelkező elemek piros betűszínűvé tétele

1
2
3
h1, h2, .warning {
   color: red;
}

Kijelölés kapcsolat alapján

CSS-ben használunk olyan szelektorokat is, amelyek egymáshoz való viszonyaik, kapcsolataik alapján jelölnek ki elemeket:

  • E1 E2: minden olyan E2 elemet kijelöl, amely egy E1-ben található
  • E1 > E2 minden olyan E2-t kijelöl, amelynek szülője E1 (szülő-gyerek kapcsolat alatt továbbra is közvetlen tartalmazást értünk)
  • E1 ~ E2: minden olyan E2-t kijelöl, amely E1-nek testvére és E1 után következik a kódban
  • E1 + E2: minden olyan E2-t kijelöl, amely E1-nek testvére és közvetlenül E1 után következik a kódban.

Példa: A body p szelektor kijelöli az összes olyan bekezdést, amely a <body>-ban található. A body > p azokat a bekezdéseket jelöli ki, amelyek közvetlenül a <body>-ba vannak beágyazva

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</title>
      <meta charset="UTF-8"/>
      <style>
         body p { background-color: lightblue; }   /* világoskék háttér */
         body > p { border: 3px solid darkred; }   /* sötétvörös szegély */
      </style>
   </head>
   <body>
      <p>Első bekezdés</p>
      <div>
         <p>Második bekezdés</p>
      </div>
      <p>Harmadik bekezdés</p>
   </body>
</html>

A kód kimenete

Példa: A p ~ p szelektor kijelöl minden olyan bekezdést, amely egy másik bekezdés testvére és valahol a másik bekezdés után található a kódban. A p + p szelektornál még azt is megköveteljük, hogy közvetlenül (azaz rögtön) a másik bekezdés után szerepeljen az elem

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</title>
      <meta charset="UTF-8"/>
      <style>
         p ~ p { background-color: lightblue; }   /* világoskék háttér */
         p + p { border: 3px solid darkred; }    /* sötétvörös szegély */
      </style>
   </head>
   <body>
      <p>Első bekezdés</p>
      <div>
         <p>Második bekezdés</p>
      </div>
      <p>Harmadik bekezdés</p>
      <p>Negyedik bekezdés</p>
   </body>
</html>

A kód kimenete

A kapcsolat alapján történő kijelölésre használhatunk még úgynevezett pseudo-class-okat is, a szelektor:pseudoclass szintaxissal. Ez a szintaxis a szelektor által kijelölt elemek közül kiválaszt minden olyant, amelyre pseudoclass teljesül.

Nézzünk néhány példát pseudo-class-okra, a teljesség igénye nélkül!

  • E1:first-child: minden olyan E1-et kijelöl, ami a szülőjének legelső gyereke
  • E1:nth-child(n): minden olyan E1-et kijelöl, ami a szülőjének n-edik gyereke
  • E1:last-child: minden olyan E1-et kijelöl, ami a szülőjének az utolsó gyereke
  • E1:first-of-type: minden olyan E1-et kijelöl, ami az azonos (E1) típusú testvérei közül a legelső
  • E1:nth-of-type(n): minden olyan E1-et kijelöl, ami az azonos (E1) típusú testvérei közül az n-edik
  • E1:last-of-type: minden olyan E1-et kijelöl, ami az azonos (E1) típusú testvérei közül az utolsó

Példa: Egy táblázat formázása pseudo-class-ok használatával

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</title>
      <meta charset="UTF-8"/>
      <style>
         tr:first-of-type {
            /* Minden olyan <tr>, ami a <tr> típusú testvérei közül a legelső (azaz a táblázat első sora) */
            background-color: black;
            color: white;
         }

         tr:nth-child(even) {
            /* Minden olyan <tr>, ami a szülőjének párosadik (2., 4., 6., ...) gyereke (azaz minden második sor) */
            background-color: #eee;
         }

         td:last-of-type {
            /* Minden olyan <td>, ami a <td> típusú testvérei közül az utolsó (azaz minden sor utolsó adatcellája) */
            color: darkred;
         }

         th, td { padding: 5px; }
      </style>
   </head>
   <body>
      <table>
         <tr>
            <th>Pizza neve</th>
            <th>Ár</th>
         </tr>
         <tr>
            <td>Sonkás-kukoricás</td>
            <td>1800 Ft</td>
         </tr>
         <tr>
            <td>Kolbászos</td>
            <td>1800 Ft</td>
         </tr>
         <tr>
            <td>Négysajtos</td>
            <td>2000 Ft</td>
         </tr>
         <tr>
            <td>Vegetáriánus</td>
            <td>2200 Ft</td>
         </tr>
      </table>
   </body>
</html>

A kód kimenete

Kijelölés attribútum alapján

A HTML elemeket attribútumaik alapján is ki tudjuk jelölni CSS-ben. A két legalapvetőbb szelektortípus erre a célra:

  • E1[attr]: kijelöli az összes olyan E1-et, amely rendelkezik az attr attribútummal
  • E1[attr="val"]: kijelöli az összes olyan E1-et, amelynek attr attribútumának értéke val.

Példa: Az a[target] szelektor kijelöl minden olyan hivatkozást, amely rendelkezik a target attribútummal. Az a[target="_blank"] azokat a hivatkozásokat jelöli ki, amelyek target attribútumának értéke _blank.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</title>
      <meta charset="UTF-8"/>
      <style>
         a { margin-right: 10px; }
         a[target] { text-transform: uppercase; font-weight: bold; }  /* félkövér, nagybetűs */
         a[target="_blank"] { color: red; }                           /* piros betűszín */ 
      </style>
   </head>
   <body>
      <a href="https://youtu.be/NUYvbT6vTPs">Első link</a>
      <a href="https://youtu.be/yBLdQ1a4-JI" target="_blank">Második link</a>
      <a href="https://youtu.be/dQw4w9WgXcQ" target="_blank">Harmadik link</a>
      <a href="https://youtu.be/sAn7baRbhx4" target="_self">Negyedik link</a>
   </body>
</html>

A kód kimenete

Kijelölés állapot alapján

A CSS arra is biztosít lehetőséget, hogy állapotuk alapján jelöljünk ki HTML elemeket. Az ilyen kijelöléseket pseudo-class-ok segítségével fogjuk megvalósítani.

Az állapot alapján történő kijelölésre talán a legszemléletesebb példa a hivatkozások (linkek) állapotai. Egy hivatkozásnak összesen 4 állapota lehet, amelyekre a következőképpen hivatkozhatunk CSS-ben:

  • :link: még nem kerestük fel a hivatkozott célt
  • :visited: már felkerestük a hivatkozott célt
  • :hover: a kurzor a hivatkozás fölött áll
  • :active: a hivatkozás aktív (amikor rákattintunk).

Figyelem

Ahhoz, hogy a fenti szelektorok mindegyike hatásos legyen...

  • ...a :hover-nek a :link és :visited után kell szerepelnie
  • ...az :active-nak a :hover után kell szerepelnie a kódban.

Példa: Hivatkozások formázása állapot alapján (A kód működése kipróbálható itt)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>Hivatkozások formázása</title>
      <meta charset="UTF-8"/>
      <style>
         a:link { color: green; }
         a:visited { color: gray; }
         a:hover { color: orange; }
         a:active { color: red; }
      </style>
   </head>
   <body>
      <p>Ha még nem látogattuk meg korábban a hivatkozott weboldalt, akkor az alábbi hivatkozás zöld betűszínnel jelenik meg, egyébként pedig szürke színnel. Ha a hivatkozás fölé visszük a kurzort, akkor a szín narancssárgára vált, ha pedig a hivatkozásra kattintunk, akkor pirosra.</p>
      <p><a href="https://theuselessweb.com/">Ez egy hivatkozás</a></p>
   </body>
</html>

A fenti pseudo-class-ok közül a :hover és az :active nem csak hivatkozásokra, hanem minden HTML objektumra használható.

Egyéb CSS formázások

A text-decoration tulajdonság

Észrevehettük, hogy a hivatkozásokat (linkeket) a böngészők általában kék betűszínnel, aláhúzva jelenítik meg. Ezt persze bármikor ízlésünkre szabhatjuk: a színt átállíthatjuk, illetve a link dekorációját (az aláhúzást) is szabályozhatjuk a text-decoration CSS tulajdonsággal.

A text-decoration-nek rendre 3 paramétert adhatunk meg:

  • a szövegdekoráció fajtáját (kötelező megadni):
    • lehetséges értékek: underline (aláhúzott), overline (vonal az elem fölött), line-through (áthúzott), none (nincs vonal), initial (alapértelmezett érték)
  • a vonal stílusát (opcionális):
    • lehetséges értékek: solid (folytonos), dashed (szaggatott), dotted (pontozott), wavy (hullámos)
  • a vonal színét (opcionális).

A text-decoration tulajdonság egyébként nem csak hivatkozásokra, hanem tetszőleges szövegelemre is alkalmazható.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>A text-decoration tulajdonság</title>
      <meta charset="UTF-8"/>
      <style>
         a { text-decoration: none; }
         .decorated { text-decoration: underline dotted red; }
      </style>
   </head>
   <body>
      <p><a href="https://theuselessweb.com/">Hivatkozás, aláhúzás nélkül</a></p>
      <p class="decorated">Egy piros pontozott vonallal aláhúzott szöveg</p>
   </body>
</html>

A kód kimenete

Listák formázása

Az előző fejezetben megismerkedtünk a rendezetlen és rendezett listákkal. Az alábbi táblázatban összefoglaljuk a listákkal kapcsolatos fontosabb CSS formázásokat.

CSS tulajdonság neve Szerepe A tulajdonság értéke
list-style-type listajel módosítása - Rendezetlen listák esetén: disc (teli karika), circle (üres karika), square (teli négyzet), none (nincs listajel)
- Rendezett listák esetén: decimal (arab szám), lower-roman/upper-roman (római szám), lower-alpha/upper-alpha (kisbetű/nagybetű), none (nincs listajel)
list-style-image kép beállítása listajelként A kép elérési útvonalát az url('elérési_útvonal') segítségével adjuk meg
list-style-position felsorolásjelek pozíciójának beállítása - outside: a felsorolás függőleges vonalába a felsorolt tartalom kerül
- inside: a felsorolás függőleges vonalába a listajelek kerülnek

Táblázatok formázása

A HTML táblázatokra, azok soraira és celláira is használhatók a korábban tanult háttér- és szövegformázások, valamint a térközre, margóra és szegélyre vonatkozó utasítások.

A táblázatnak és annak celláinak a már jól ismert border tulajdonsággal adhatunk szegélyt. Alapértelmezett módon a táblázat szegélyei és a cellák szegélyei el vannak választva egymástól, ezért úgy tűnhet, mintha a táblázatban mindenhol dupla szegélyek lennének. A border-collapse: collapse utasítással ezek a szegélyek összevonhatók.

A táblázatnak a szokásos módon megadhatjuk a szélességét és magasságát (width és height tulajdonságok), valamint a vízszintes margók értékének auto-ra állításával vízszintesen középre igazíthatjuk a táblázatot az oldalon belül.

Ha egy táblázat rendelkezik címmel (amit a <caption> taggel adunk meg), akkor ez a cím alapértelmezett módon a táblázat fölött jelenik meg. A caption-side: bottom utasítással viszont áthelyezhető a táblázat alá.

A vertical-align: middle utasítással egy táblázatcella tartalmát függőlegesen középre igazíthatjuk. A tartalom vízszintes igazítására a korábban tanult text-align tulajdonságot használjuk.

Példa: Egy táblázat formázása

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>Táblázatok formázása</title>
      <meta charset="UTF-8"/>
      <style>
         table {
            border: 1px solid black;      /* a táblázat körüli szegély */
            border-collapse: collapse;    /* szegélyek összevonása */
            width: 60%;                   /* a rendelkezésre álló szélesség 60%-a */
            margin: 0 auto;               /* vízszintesen középre igazítás */
            caption-side: bottom;         /* táblázatcím áthelyezése a táblázat alá */
         }

         th, td {
            border: 1px solid black;      /* a cellák körüli szegély */
            vertical-align: middle;       /* tartalom igazítása függőlegesen középre */
            text-align: center;           /* tartalom igazítása vízszintesen középre */
            padding: 5px;
         }

         th {
            background-color: black;
            color: white;
         }

         /* minden páros sornak adunk háttérszínt */
         tr:nth-of-type(even) { background-color: #eee; }

         /* ha a kurzor egy sor fölött áll, megváltoztatjuk a sor háttérszínét */
         tr:hover { background-color: #ccc; }
      </style>
   </head>
   <body>
      <h1>Kínálatunk</h1>
      <table>
         <caption>Árlista</caption>
         <tr><th>Pizza neve</th><th>Ár</th></tr>
         <tr><td>Sonkás-kukoricás</td><td>1800 Ft</td></tr>
         <tr><td>Kolbászos</td><td>1800 Ft</td></tr>
         <tr><td>Négysajtos</td><td>2000 Ft</td></tr>
         <tr><td>Vegetáriánus</td><td>2200 Ft</td></tr>
      </table>
   </body>
</html>

A kód kimenete

A CSS öröklődés

CSS-ben létezik öröklődés, ami azt jelenti, hogy egy objektum bizonyos CSS tulajdonságait örökölhetik az objektum gyerekei. Ennek köszönhetően bizonyos tulajdonságokat elegendő csak egyszer definiálnunk a szülő objektumra, és ekkor a gyerekek is automatikusan megöröklik ezeket.

Fontos megjegyezni viszont, hogy nem minden CSS tulajdonság örökölődik! Az alábbi táblázat összefoglalja a fontosabb öröklődő, illetve nem öröklődő tulajdonságokat.

Öröklődő CSS tulajdonságok Nem öröklődő CSS tulajdonságok
color, font-family, font-size, font-weight, list-style, text-align, text-indent, text-transform, visibility, white-space, word-space, letter-spacing, line-height, ... background, border, display, float, width, height, margin, outline, overflow, padding, position, text-decoration, vertical-align, z-index, ...

Amennyiben egy nem öröklődő CSS tulajdonságot mégis örököltetni szeretnénk, akkor ezt az inherit speciális értékkel tehetjük meg.

Példa: A font-family és color tulajdonságok automatikusan öröklődnek, viszont a border már nem. Ha a szegélyt is örököltetni szeretnénk, használjuk az inherit kulcsszót!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>CSS öröklődés</title>
      <meta charset="UTF-8"/>
      <style>
         #parent { font-family: Arial; color: blue; border: 3px solid black; }
         #child { border: inherit }    /* enélkül a szegély nem öröklődne! */
      </style>
   </head>
   <body>
      <div id="parent">
         Szülő objektum
         <div id="child">Gyerek objektum</div>
      </div>
   </body>
</html>

A kód kimenete

A CSS rangsor

Felmerülhet a kérdés, hogy ha egy objektumra több, egymásnak ellentmondó CSS formázást adunk ki (pl. egy bekezdés színét kékre, majd később pirosra szeretnénk állítani), akkor ezek közül vajon melyik stílus lesz érvényes.

Pontosan erre ad választ a CSS rangsor, amely különböző prioritásértékeket rendel az egyes formázásokhoz, és ezek alapján dönti el, hogy végül melyik formázás fog érvényesülni. A prioritások a következőképpen alakulnak (legerősebbtől a leggyengébbig):

  1. !important kulcsszóval megadott formázások
  2. inline CSS (a tagek style attribútumaként adjuk meg)
  3. id szelektorral megadott formázások
  4. class szelektorral vagy attribútum alapján történő kijelöléssel megadott formázások
  5. elem szelektorral megadott formázások.

Példa: Az alábbi kódban az első bekezdés piros (hiszen a #first id szelektor erősebb, mint a .blue class szelektor), a második kék (hiszen az inline CSS erősebb, mint az id szelektor), a harmadik pedig narancssárga betűszínű lesz (hiszen az !important kulcsszóval megadott formázás a legerősebb)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>CSS rangsor</title>
      <meta charset="UTF-8"/>
      <style>
         #first { color: red; }
         #second { color: green; }
         #third { color: orange !important; }
         .blue { color: blue; }
      </style>
   </head>
   <body>
      <p id="first" class="blue">Első bekezdés</p>
      <p id="second" style="color: blue;">Második bekezdés</p>
      <p id="third" style="color: purple;">Harmadik bekezdés</p>
   </body>
</html>

A kód kimenete

Megjegyzés

A felhasználó által !important kulcsszóval definiált formázások erősebbek, mint a webfejlesztők által ugyanezzel a kulcsszóval megadott stílusok. Ugyanakkor a felhasználó által definiált egyéb stílusok önmagukban nem erősebbek, mint a webfejlesztők által definiáltak.

Az összetett szelektoroknál - tehát azoknál a szelektoroknál, amelyek több részszelektorból épülnek fel - a részszelektorok prioritásai összeadódnak. Az így kapott összeg lesz a teljes szelektor prioritása.

Példa

Legyen az elem szelektor prioritása 1, a class szelektor prioritása 10, az id szelektoré pedig 100. Ekkor a #main .container div p összetett szelektor prioritása: 100+10+1+1 = 112.

Ha az eddigi szabályok alapján nem dőlt el a rangsor, akkor a kódban később szereplő formázás lesz az érvényes.

Helyzetmegadás

Egy weboldal elrendezésének kialakításakor gyakran előfordul, hogy meg akarjuk változtatni bizonyos objektumok alapértelmezett pozícióját. Erre szolgál CSS-ben a pozicionálás és helyzetmegadás.

A position tulajdonság

A HTML objektumok pozícióját a position CSS tulajdonsággal adhatjuk meg. Értékei:

  • static: a normál szövegfolyamban lévő hely, a pozicionálásoknak nincs hatása (alapértelmezett)
  • relative: a normál szövegfolyambeli helyéhez képest elmozdítja az elemet a kért mértékben
  • absolute: a legközelebbi, nem static helyzetű ősobjektum belső széléhez (vagy ilyen ős hiányában a viewport széléhez) képest pozicionál
  • fixed: az elem gördítéskor is rögzített helyen marad.

Az elemek függőleges pozicionálására a top és bottom, míg vízszintes pozicionálásra a left és right CSS tulajdonságokat használhatjuk. A static módon pozicionált elemek esetén ezeknek az utasításoknak nincs hatása!

Példa: A position tulajdonság használata (A kód működése kipróbálható itt)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>Elemek pozicionálása</title>
      <meta charset="UTF-8"/>
      <style>
         body { margin: 0; padding: 0; font: 20px sans-serif; }
         .box { padding: 20px; }
         .container { position: relative; height: 2000px; background: lightblue; padding: 10px; }

         .first { position: absolute; top: 0; right: 0; background: tomato; }
         .second { /* top: 500px; */ background: mediumaquamarine; }
         .third { position: fixed; top: 150px; background: lightgreen; }
      </style>
   </head>
   <body>
      <div class="container">
         <p>Pozicionálás</p>
         <div class="first box">Első</div>
         <div class="second box">Második</div>
         <div class="third box">Harmadik</div>
      </div>
   </body>
</html>

A fenti példa magyarázata:

  • Az absolute módon pozicionált, "Első" feliratú elem az őt beágyazó legközelebbi, nem static (hanem jelen esetben relative) helyzetű elem (ez most a class="container" attribútumú <div>) jobb felső sarkához igazodik.
  • A "Második" feliratú elem alapértelmezés szerint static helyzetű, így a pozicionálásnak nincs hatása.
  • A fixed helyzetű, "Harmadik" feliratú elem gördítéskor is rögzített helyen marad.

Tipp

Manapság gyakran szokták használni a sticky kulcsszót is elemek pozicionálása során. Erről itt olvashatunk részletesebben.

Úsztatás

A float CSS tulajdonsággal lehetőségünk van elemek úsztatására. Ekkor az úsztatott elemet a tartalom a másik irányból körbefutja (tehát például ha balra úsztatunk egy elemet, akkor jobbról fogja őt körbefutni a tartalom). A tulajdonság lehetséges értékei: left (balra úsztatás), right (jobbra úsztatás), none (nincs úsztatás).

Példa: Egy kép balra úsztatása (A felhasznált kép forrása)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>Úsztatás</title>
      <meta charset="UTF-8"/>
      <style>
         .floating-img {
            height: 120px;
            float: left;
            margin-right: 10px;
         }
      </style>
   </head>
   <body>
      <img class="floating-img" src="giraffe.jpg" alt="Zsiráf"/>
      <p>A zsiráf (Giraffa camelopardalis) Afrikában élő párosujjú patás emlős, a legmagasabb és leghosszabb nyakú szárazföldi élőlény. A szavannák lakója az ókortól kedvelt attrakció volt - Rómában először Julius Caesar mutatott be zsiráfokat az amfiteátrumi játékokon - és ma is népszerű szafarikon és állatkertekben. Neve arab eredetű, olasz közvetítéssel jutott el a magyarba a késő középkorban. A tudományos nevében szereplő szereplő camelopardalis a faj addig használt nevére, a görög kamélopardaliszra ("tevepárduc") utal.</p>
   </body>
</html>

A kód kimenete

Ha meg szeretnénk akadályozni egy objektum körül egy másik, úsztatott objektum elhelyezését, akkor ezt a clear CSS tulajdonsággal tudjuk megtenni. Lehetséges értékei: left (balról nem lehet úsztatott elem), right (jobbról nem lehet úsztatott elem), both (sem balról, sem jobbról nem lehet úsztatott elem), none (balról és jobbról is lehet úsztatott elem).

Utolsó frissítés: 2024-02-10 17:23:02