Kihagyás

3. fejezet

A fejezet anyaga

A HTML5 szemantikus tagek

Az 1. fejezetben láttunk példát a weboldalak tartalmának strukturálására. Emlékeztetőül: a <div> és <span> tagekkel általános célú szakaszokat, tartalmi egységeket alakítottunk ki.

A <div> egy blokkszintű (block) objektum, ami azt jelenti, hogy mindig új sorban kezdődik, és kihasználja a teljes rendelkezésre álló szélességet. Ezzel szemben a <span> egy sorszintű (inline) elem, tehát nem kezdődik új sorban, és szélessége is csak akkora, mint amekkora helyre szüksége van.

A <div> és <span> tagek mellé, a HTML5 szabványban új, szemantikus jelentéssel bíró strukturális elemeket vezettek be:

  • <header>...</header>: az oldal vagy egy tartalmi egység fejléce
  • <footer>...</footer>: az oldal vagy egy tartalmi egység lábléce
  • <nav>...</nav>: navigációs menü
  • <aside>...</aside>: érintőlegesen kapcsolódó tartalom (jellemzően oldalsáv)
  • <main>...</main>: fő tartalom
  • <section>...</section>: logikai egység
  • <article>...</article>: önálló tartalom.

A fenti tagek kivétel nélkül blokkszintű (block) elemek, a <div>-hez hasonlóan.

Ezek a tagek - az általános célú <div> és <span> tagekkel ellentétben - szemantikai jelentéssel bírnak, tehát egyértelműen meghatározzák a tartalmuk jelentését (pl. egy <header>-ről tudjuk, hogy egy fejlécet jelöl).

A HTML5-ben bevezetett szemantikus tageket felhasználva precízebben leírhatjuk egy weboldal szerkezetét. Ezekkel a tagekkel készíthetünk például az alábbihoz hasonló elrendezésű weboldalt. (Az ábra forrása)

HTML5 szemantikus tagek

Megjegyzés

Ahhoz, hogy az ábrán látotthoz hasonló elrendezést kapjunk, a tanult tagek használata önmagában nem elegendő (pl. az <aside> nem fog automatikusan oldalra kerülni). Az elemek helyzetének megadására a CSS-beli pozicionálást használhatjuk.

A HTML DOM

Valószínűleg mindenkinek feltűnt, hogy a HTML dokumentumok lényegében HTML objektumok (tagek) egymásba ágyazásából épülnek fel. Ezek az objektumok egy hierarchikus fastruktúrát alkotnak a dokumentumban.

Amikor egy weboldal betöltődik, akkor a böngésző elkészíti a HTML objektumokból az úgynevezett dokumentum-objektum modellt - ezt a továbbiakban röviden csak DOM-nak fogjuk nevezni. A DOM fa (DOM tree) segítségével könnyen szemléltethetjük a HTML elemek hierarchikus viszonyait. Nézzünk egy egyszerű példát DOM fára!

Példa: Egy egyszerű HTML kód és a hozzá tartozó DOM fa

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>DOM példa</title>
      <meta charset="UTF-8"/>
   </head>
   <body>
      <h1>Az oldal címe</h1>
      <img src="my-image.png" alt="Valami klassz kép"/>
      <p>
         <a href="https://u-szeged.hu">SZTE</a>
      </p>
   </body>
</html>

DOM fa példa

HTML objektumok viszonyai

Ahhoz, hogy a továbbiakban egyszerűen tudjunk beszélni a HTML objektumok viszonyairól, bevezetünk néhány fogalmat.

Ha az A objektum közvetlenül tartalmazza a B objektumot, akkor azt mondjuk, hogy az A objektum a B objektum szülője, a B objektum pedig A gyereke. Például a fenti kódban és az ahhoz tartozó DOM fában a <body> objektum a <h1>, <img> és <p> elemek szülője, vagy másképp mondva: a <h1>, <img> és <p> elemek a <body> gyerekei. Az viszont például nem igaz, hogy az <a> objektum a <body> gyereke lenne, hiszen itt a tartalmazás nem közvetlen.

Ha az A és B objektumok szülője megegyezik, akkor A és B egymás testvérei. Például a fenti kódban és az ahhoz tartozó DOM fában a <h1>, <img> és <p> objektumok egymás testvérei, hiszen mindhárom objektum szülője a <body>.

A DOM fa tetején lévő, szülővel nem rendelkező elemet gyökérelemnek nevezzük. A teljes HTML DOM-ban ez a gyökérelem mindig a <html> tag lesz (ugyanis ebbe ágyazunk be minden további HTML elemet).

A DOM gyakorlati jelentősége

Hamarosan látni fogjuk, hogy CSS-ben használunk olyan szelektorokat is, amelyek egymáshoz való DOM-beli viszonyaik alapján jelölnek ki HTML objektumokat.

Emellett a webes világban gyakran előfordul, hogy a DOM fát manipulálni szeretnénk - pl. szeretnénk egy objektumot módosítani vagy törölni, esetleg egy új objektumot akarunk a fába beszúrni. Erre biztosítanak lehetőséget a JavaScript DOM-műveletei. Ezen a kurzuson nem tárgyaljuk a JavaScriptet, viszont a Szkriptnyelvek és Multimédia kurzusokon részletesen tanulhatunk a különböző DOM-manipulációs lehetőségekről.

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ő-gyermek 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: #CC6633;
            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: #F2F2F2;
         }

         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
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>További CSS szelektorok</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><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: #CC6633;
            color: white;
         }

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

         /* ha a kurzor egy sor fölött áll, megváltoztatjuk a sor háttérszínét */
         tr:hover { background-color: #E5E5E5; }
      </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
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>Elemek pozicionálása</title>
      <meta charset="UTF-8"/>
      <style>
         .box { padding: 20px 10px; }
         .container { position: relative; height: 800px; background: lightblue; }

         .first { position: absolute; top: 0; right: 0; background: tomato; }
         .second { /* top: 500px; */ background: mediumaquamarine; }
         .third { position: fixed; 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: 2021-03-01 18:07:14