Kihagyás

4. fejezet

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)

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

 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

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

Árnyékok

CSS-ben a text-shadow tulajdonsággal adhatunk egy szövegnek árnyékot. A tulajdonság értékeként rendre 4 paraméter adható meg: a vízszintes eltolás, a függőleges eltolás, az árnyék elmosódásának mértéke és az árnyék színe. Az utolsó két paraméter elhagyható.

A box-shadow tulajdonsággal dobozszerű elemeknek is adható árnyék. Ennek értékeként rendre 5 paramétert adhatunk meg: a vízszintes eltolást, a függőleges eltolást, az elmosódás mértékét, az árnyék kiterjedését és az árnyék színét. Az utolsó három paraméter elhagyható.

Egy szöveghez vagy egy dobozhoz akár több árnyék is megadható, vesszővel elválasztva.

Példa: Árnyékok használata

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="hu">
<head>
    <title>Árnyékok</title>
    <meta charset="UTF-8"/>
    <style>
        #paragraph { text-shadow: 2px 5px 5px red; }
        #box { border: 2px solid black; box-shadow: 0 3px lightblue, 0 2px 25px yellow; }
    </style>
</head>
<body>
<p id="paragraph">Ez egy árnyékkal rendelkező szöveg.</p>
<div id="box">Ez egy árnyékkal rendelkező doboz.</div>
</body>
</html>

A kód kimenete

Utolsó frissítés: 2024-08-16 16:51:30