5. fejezet¶

Táblázatok formázása¶

A HTML táblázatokra, azok soraira és celláira is használhatók a korábban tanult formá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.

A háttér formázása¶

Ebben a részben megismerünk néhány fontosabb CSS tulajdonságot, amelyet a háttér formázására használhatunk.

background-color: háttérszín
- értékeként megadható egy szín vagy a transparent (átlátszó) kulcsszó
background-image: háttérkép
- a beállítani kívánt háttérkép elérési útvonalát az url('elérési_útvonal') segítségével adjuk meg
background-repeat: háttérkép ismétlődése
- lehetséges értékek: repeat (vízszintes és függőleges ismétlődés, alapértelmezett), repeat-x (vízszintes ismétlődés), repeat-y (függőleges ismétlődés), no-repeat (nem ismétli)
background-position: háttérkép pozíciója
- két értéket vár: rendre a vízszintes és a függőleges pozíciót
  - a vízszintes pozíció értékei: left (bal), right (jobb), center (középre)
  - a függőleges pozíció értékei: top (fent), bottom (lent), center (középre)
  - a fenti kulcsszavak helyett megadhatók százalékos értékek is a pozíciók helyén
  - nem kötelező mindkét értéket megadni (ha elhagyjuk a második paramétert, akkor függőlegesen középre lesz pozicionálva a háttérkép)
background-size: háttérkép mérete
- két értéket vár: rendre a vízszintes és a függőleges méretet
  - nem kötelező mindkét értéket megadni
  - megadható abszolút vagy relatív hossz, vagy a lenti kulcsszavak valamelyike
  - auto: automatikus (alapértelmezett)
  - cover: a tartalmazó elem szélességére vagy magasságára méretezi a háttérképet az eredeti méretarányok megtartásával úgy, hogy a kép a teljes hátteret kitöltse (lehet, hogy a kép bizonyos részei nem fognak látszani)
  - contain: a legnagyobb méretre skálázza a háttérképet az eredeti méretarányok megtartásával úgy, hogy a kép teljes egészében látható legyen

Tipp

A háttér tulajdonságai összevonva is megadhatók a background CSS tulajdonsággal. Bővebben itt.
A linear-gradient() és radial-gradient() függvények segítségével színátmenetes háttereket is használhatunk. Bővebb leírás itt és itt.

Példa: Háttérformázások (A felhasznált háttérkép forrása)

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Teljes képernyős háttérkép</title>
    <meta charset="UTF-8"/>
    <style>
      html, body {
        height: 100%;
        margin: 0;
      }

      body {
        background: url('bg.jpg') center/cover no-repeat;   /* teljes képernyős háttérkép */
      }

      h1 {
        background-color: darkblue;   /* a régebbi böngészők lehet, hogy nem ismerik a linear-gradient()-et */
        background: linear-gradient(90deg, darkblue, blue); /* színátmenetes kitöltés */
        color: #fff;
        text-align: center;
        margin-top: 0;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Üdvözöllek a weboldalamon!</h1>
  </body>
</html>

A kód kimenete

Elem megjelenítése¶

A HTML elemek megjelenítését a display CSS tulajdonsággal szabályozhatjuk. A tulajdonság néhány lehetséges értéke:

inline: sorszintű elem (szélességét a tartalom szélessége határozza meg, nem kezdődik új sorban)
block: blokkszintű elem (szélessége a rendelkezésre álló szélesség, új sorban kezdődik)
inline-block: inline, de megadhatók a méretei (szélessége, magassága)
none: elem eltüntetése
manapság nagy népszerűségnek örvend még a flexbox és a grid.

Példa: Kép vízszintesen középre igazítása, elem eltüntetése (A felhasznált kép forrása)

<!DOCTYPE html>
<html lang="hu">
<head>
    <title>A display tulajdonság</title>
    <meta charset="UTF-8"/>
    <style>
        /* kép vízszintesen középre igazítása */

        #my-pic {
            display: block;  /* először blokkszintűvé tesszük (a képek eredetileg inline-ok) */
            margin: 0 auto;  /* aztán a vízszintes margókat auto-ra állítjuk */
        }

        /* elem eltüntetése */

        .magical { display: none; }
    </style>
</head>
<body>
<img id="my-pic" src="cat.jpg" alt="Egy klassz macsek"/>
<p class="magical">Sitty-sutty, eltüntem</p>
<p>Én pedig itt maradtam</p>
</body>
</html>

A kód kimenete

Egyéb CSS formázások¶

Listák formázása¶

Egy korábbi 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

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

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

Utolsó frissítés: 2025-08-10 20:20:45