Kihagyás

2. fejezet

A fejezet anyaga

A fontosabb HTML elemekkel való ismerkedés folytatása. A CSS nyelv szintaxisának és néhány alapvető formázási lehetőségének megismerése.

HTML alapok II.

Ebben a részben folytatjuk a HTML dokumentum törzsrészében (body) használatos tagekkel való ismerkedést.

Néhány fontosabb HTML elem

  • <h1>...</h1>, <h2>...</h2>, ..., <h6>...</h6>: címsorok
  • <p>...</p>: bekezdés
  • <br/>: sortörés (páratlan tag)
  • <hr/>: elválasztó vonal (páratlan tag)
  • <pre>...</pre>: előre formázott szöveg
    • alakhű megjelenést biztosít: az ilyen taggel megadott szövegek megőrzik a whitespace karaktereket (szóközöket, tabulátorokat, sortöréseket)
    • akkor használjuk, ha a szöveg jellegéből szemantikusan következik a tartalom szóközökkel, térközökkel való formázása (pl. ASCII-ábrák, kódrészletek, képversek)
 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>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <h1>Piramis</h1>
    <hr/>
    <pre>
          0
         0 0
        0 0 0
       0 0 0 0
    </pre>
    <p>A piramis egy négyzet alapú <br/> gúla alakú építmény.</p>
  </body>
</html>

A kód kimenete

  • <em>...</em>: tartalom hangsúlyozása
    • szemantikus jelentéssel bír
    • a böngészők általában dőlt betűkkel jelenítik meg
  • <strong>...</strong>: erős kiemelés
    • szemantikus jelentéssel bír
    • a böngészők általában félkövér betűkkel jelenítik meg
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <p><em>Ricsi</em> ma vizsgázik Prog2-ből.</p>   <!-- Ki vizsgázik? -->
    <p>Ricsi <em>ma</em> vizsgázik Prog2-ből.</p>   <!-- Mikor vizsgázik? -->
    <p>Ricsi ma vizsgázik <em>Prog2-ből</em>.</p>   <!-- Miből vizsgázik? -->

    <p><strong>Figyelem!</strong> A ketrecbe benyúlni veszélyes!</p>
  </body>
</html>

A kód kimenete

Figyelem

A HTML tageket NE használjuk formázási célokra! Ha egy szöveget félkövérré vagy dőltté szeretnénk tenni, használjunk CSS-t!

  • <sub>...</sub>: alsó index
  • <sup>...</sup>: felső index
  • <q>...</q>: idézet (az idézőjeleket automatikusan kiteszi)
  • <blockquote>...</blockquote>: idézetblokk
  • <code>...</code>: kódrészlet
  • <mark>...</mark>: vizuális szövegkiemelés
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <p>Alsó index: x<sub>2</sub>, felső index: x<sup>2</sup></p>
    <p><q>A Webtervezés még könnyű tárgynak számít</q></p>

    <blockquote>
      Never gonna give you up <br/>
      Never gonna let you down <br/>
      Never gonna run around <br/>
      And desert you
    </blockquote>

    <p>Egy C program belépési pontja: <code>int main(int argc, char **argv)</code></p>
    <p>bla bla bla <mark>ez itt a lényeg</mark> bla bla bla</p>
  </body>
</html>

A kód kimenete

Iframe-ek

Az <iframe>...</iframe> taggel beszúrhatunk a weboldalunkra egy úgynevezett lebegőkeretet (inline frame, röviden iframe). Ezekben a lebegőkeretekben lehetőségünk van megnyitni egy másik weboldalt.

Az <iframe> tag fontosabb attribútumai:

  • src: a megnyitni kívánt weboldal URL-je
  • width: a keret szélessége (pixelben)
  • height: a keret magassága (pixelben).

Példa: Szúrjuk be a TTIK honlapját a weboldalunkra egy 600x600-as iframe-ben!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Iframe példa</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <iframe src="https://sci.u-szeged.hu/" width="600" height="600"></iframe>
  </body>
</html>

Listák

A HTML listák lehetőséget biztosítanak arra, hogy egymáshoz kapcsolódó információkat egy csoportba gyűjtve sorolhassunk fel. Két fontos listatípus:

  • <ul>...</ul>: rendezetlen (számozatlan) lista
    • akkor használjuk, ha a listaelemek között nincs megállapítható sorrend
    • a listaelemeket a <li>...</li> taggel adhatjuk meg
  • <ol>...</ol>: rendezett (számozott) lista
    • akkor használjuk, ha számít a listaelemek sorrendje
    • a listaelemeket a <li>...</li> taggel adhatjuk meg
    • fontosabb attribútumok:
      • reversed: fordított számozás
      • start: számozás kezdősorszáma
      • type: felsorolásjel típusa
        • lehetséges értékei: 1: arab szám, i: "kisbetűs" római szám, I: "nagybetűs" római szám, a: kisbetű, A: nagybetű

Példa: Rendezetlen és rendezett lista

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!-- Rendezetlen (számozatlan) lista -->
<ul>
  <li>Kenyér</li>
  <li>Tej</li>
  <li>Felvágott</li>
</ul>

<!-- Rendezett (számozott) lista -->
<ol>
  <li>Nyisd ki a szemed!</li>
  <li>Nyomd ki az ébresztőt!</li>
  <li>Aludj vissza!</li>
</ol>

A kód kimenete

A fenti listatípusokból készíthetünk többszintű listát is. Ennek a lényege, hogy egy listaelembe egy másik listát ágyazunk be.

Példa: Többszintű lista

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<ol>
  <li>Rendezett listaelem</li>
  <li>
    Rendezett listaelem
    <ul>
      <li>Rendezetlen listaelem</li>
      <li>Rendezetlen listaelem</li>
    </ul>
  </li>
  <li>Rendezett listaelem</li>
</ol>

A kód kimenete

Táblázatok

A <table>...</table> taggel egy táblázatot szúrhatunk be a weboldalunkra. A táblázat egy sorát a <tr>...</tr> tag segítségével adhatjuk meg. Az egyes sorokon belül létrehozhatunk fejléccellákat (<th>...</th> tag), illetve adatcellákat (<td>...</td> tag).

Ha szeretnénk egy táblázatnak címet adni, akkor ezt a <caption>...</caption> taggel tehetjük meg, amit mindig közvetlenül a <table> után kell írnunk.

Példa: Egy egyszerű táblázat

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<table>
  <caption>Kínálatunk</caption>
  <tr>
    <th>Pizza neve</th>
    <th>Ár</th>
  </tr>
  <tr>
    <td>Sonkás-kukoricás</td>
    <td>1800 Ft</td>
  </tr>
  <tr>
    <td>Négysajtos</td>
    <td>2000 Ft</td>
  </tr>
</table>

Lehetőségünk van arra is, hogy egy táblázatban sor- és oszlopösszevonásokat végezzünk: a celláknak adott rowspan attribútummal megadhatjuk az összevonni kívánt sorok számát, a colspan attribútummal pedig az összevonni kívánt oszlopok számát.

Azt is meg tudjuk mondani, hogy egy táblázatcella mely fejléccellá(k)hoz tartozik. Ezt a következőképpen tehetjük meg:

  • a fejléccelláknak adunk egy-egy id attribútumot (egyedi azonosítót)
  • a cellák headers attribútumaként megadjuk azon fejléccellá(k)nak az id-értékét, ami(k)hez az adott cella tartozik.

Példa: Az előző táblázat kiegészítése sor- és oszlopösszevonással, valamint fejléccella-társítással

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
  <caption>Kínálatunk</caption>
  <tr>
    <th id="nev">Pizza neve</th>
    <th id="ar">Ár</th>
    <th id="extra">Rendelés esetén jár még</th>
  </tr>
  <tr>
    <td headers="nev">Sonkás-kukoricás</td>
    <td headers="ar">1800 Ft</td>
    <td headers="extra" rowspan="2">Ajándék szósz és üdítő</td>
  </tr>
  <tr>
    <td headers="nev">Négysajtos</td>
    <td headers="ar">2000 Ft</td>
  </tr>
  <tr>
    <td headers="nev">Hawaii</td>
    <td headers="ar extra" colspan="2">NEM RENDELHETŐ!</td>
  </tr>
</table>

A HTML táblázatok sorait 3 fő egységre bonthatjuk:

  • <thead>...</thead>: fejlécsorok csoportja
  • <tbody>...</tbody>: adatsorok csoportja, a táblázat törzse
  • <tfoot>...</tfoot>: láblécsorok csoportja.

A fenti tagek használata opcionális, nem kötelező. Használatuk esetén, ha papírra nyomtatjuk ki a weboldal tartalmát, akkor a hosszabb, több lapon átívelő táblázatoknál a <thead> és a <tfoot> minden nyomtatott oldalon megjelenik.

Ha szeretnénk a táblázat oszlopait csoportosítani (pl. formázás céljából), akkor ezt a <colgroup>...</colgroup> taggel tehetjük meg. Ezt közvetlenül a <caption> után (ha van caption) és a <thead> elé (ha van thead) írjuk. Az oszlopcsoportosításon belül a <col/> páratlan tag jelöl egy oszlopot. Ha egyszerre több, mondjuk N darab oszlopot szeretnénk kijelölni a csoportosításban, akkor ezt a <col span="N"/> segítségével tudjuk megtenni.

Példa: Az előző táblázat kiegészítése a sorok és oszlopok csoportosításá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
<table>
  <caption>Kínálatunk</caption>
  <colgroup>
    <!-- az első oszlop világospiros háttérszínű lesz -->
    <col style="background-color: salmon;"/>
    <!-- a következő 2 oszlop világoszöld háttérszínt kap -->
    <col style="background-color: lightgreen;" span="2"/>
  </colgroup>
  <thead>
    <tr>
      <th id="nev">Pizza neve</th>
      <th id="ar">Ár</th>
      <th id="extra">Rendelés esetén jár még</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="nev">Sonkás-kukoricás</td>
      <td headers="ar">1800 Ft</td>
      <td headers="extra" rowspan="2">Ajándék szósz és üdítő</td>
    </tr>
    <tr>
      <td headers="nev">Négysajtos</td>
      <td headers="ar">2000 Ft</td>
    </tr>
    <tr>
      <td headers="nev">Hawaii</td>
      <td headers="ar extra" colspan="2">NEM RENDELHETŐ!</td>
    </tr>
  </tbody>
  <!-- itt még lehetne akár egy <tfoot> is, viszont ez opcionális... -->
</table>

A kód kimenete

CSS alapok

Az eddigiek során tárgyalt HTML nyelvet a weboldal tartalmának kialakítására és strukturálására használtuk. Ha a tartalmat formázni is szeretnénk, akkor a CSS-re (Cascading Style Sheets) lesz szükségünk.

Szintaxis

A CSS utasítások szintaxisa a következőképpen néz ki:

1
2
3
4
5
szelektor {
  tulajdonság1: érték1;
  tulajdonság2: érték2;
  ...
}

A szelektor (más néven kijelölő) segítségével megmondjuk, hogy a weboldal mely elemét (vagy elemeit) szeretnénk formázni. Ezután kapcsos zárójelek között, pontosvesszővel elválasztva megadjuk az elvégzendő formázásokat tulajdonság: érték formában. A tulajdonság az adott elem formázandó tulajdonsága (pl. háttérszín, betűtípus, térköz stb.), az érték pedig az adott tulajdonsághoz tartozó, beállítani kívánt érték.

A CSS kódba írhatunk kommenteket (megjegyzéseket) is az alábbi szintaxissal:

1
/* Ez egy komment a CSS kódban */

Példa: Egy konkrét CSS kódrészlet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/* egy egyszerűbb szelektor és néhány formázás */

body {
  margin: 0;                        /* margó */
  padding: 0;                       /* térköz */
  background-color: #f0f0f0;        /* háttérszín */
}

/* egy összetettebb szelektor */

#main-content .centered {
  text-align: center;               /* szöveg vízszintesen középre igazítása */     
}

CSS beágyazása

Egy HTML kódba többféleképpen is beágyazhatunk CSS formázásokat.

Inline CSS esetén a tagek style attribútumának értékeként adjuk meg a CSS formázást. Ekkor a formázás mindig csak az adott objektumra lesz érvényes.

1
<p style="color: blue;">I'm blue da ba dee da ba die...</p>

Figyelem

Az inline CSS nem hatékony, valamint a kód átláthatóságát is rontja. Emiatt ha csak lehet, kerüljük a használatát!

A lapon belüli (internal) CSS-t a <head>-ben adjuk meg, <style> és </style> között. Az így kiadott formázások az aktuális HTML dokumentumra lesznek érvényesek.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>CSS alapok</title>
    <meta charset="UTF-8"/>
    <style>
      /* az itt kiadott CSS utasítások az aktuális HTML fájlra vonatkoznak */
      p { color: blue; }
    </style>
  </head>
  <body>
    <p>I'm blue da ba dee da ba die...</p>
    <p>Da ba dee da ba die...</p>
  </body>
</html>

A külső (external) CSS lényege, hogy a CSS formázásokat egy külső (.css kiterjesztésű) fájlba írjuk, majd ezt a fájlt ágyazzuk be a HTML állományunk <head> részében, a <link/> páratlan tag segítségével. Ekkor a külső CSS fájlban lévő formázások minden olyan HTML dokumentumra érvényesek lesznek, amelyek ezt a CSS fájlt beágyazzák.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>CSS alapok</title>
    <meta charset="UTF-8"/>
    <!-- a main.css nevű külső CSS fájl beágyazása -->
    <link rel="stylesheet" href="main.css"/>
  </head>
  <body>
    <!-- a weboldal tartalma... -->
  </body>
</html>

Tipp

A külső (external) CSS különösen hasznos akkor, amikor egy weboldal több lapjának szeretnénk ugyanazt a formázást adni.

Alapvető szelektorok

Ebben a részben megismerkedünk a négy legalapvetőbb CSS szelektortípussal, amikkel HTML objektumokat jelölhetünk ki. A következő leckében ezek felhasználásával összetettebb szelektorokat is készítünk majd.

  • Elem szelektor: tagnév alapján jelöli ki az összes ugyanolyan típusú HTML elemet
  • Class szelektor: azokat az elemeket jelöli ki, amelyek az adott class értékkel rendelkeznek; az ilyen szelektort ponttal (.) kezdjük
  • Id szelektor: az adott id értékkel rendelkező elemet jelöli ki; az ilyen szelektort kettős kereszttel (#) kezdjük
  • Univerzális szelektor: a * szelektorral az összes HTML objektumot kijelölhetjük

Példa: A négy alapvető szelektortípus: elem szelektor, class szelektor, id szelektor és univerzális szelektor

1
2
3
4
5
6
7
div { /* az itt megadott formázás minden <div> objektumra vonatkozik */ }

.foo { /* az itt megadott formázás a class="foo" attribútummal rendelkező elemekre vonatkozik */ }

#bar { /* az itt megadott formázás az id="bar" attribútumú elemre vonatkozik */ }

* { /* az itt megadott formázás minden HTML objektumra vonatkozik */ }

Értékek, mértékegységek

Mielőtt megismernénk az első konkrét, HTML elemek formázására szolgáló CSS utasításainkat, érdemes áttekinteni a CSS-ben használatos fontosabb mértékegységeket.

  • Hosszúság megadása:
    • abszolút hosszúság: mm (milliméter), cm (centiméter), in (inch), pt (pont), pc (pica)
    • relatív hosszúság: % (más értékekből számolódik), px (pixel), em (betűmérethez viszonyít), rem (gyökérelem betűméretéhez viszonyít), vw (ablakszélesség 1%-ához viszonyít), vh (ablakmagasság 1%-ához viszonyít)
  • Szögek megadása: deg (fok), rad (radián), grad (gradián)
  • Színek megadása:
    • angol névvel - pl. blue
    • decimális RGB-kóddal - pl. rgb(0, 0, 255)
    • hexadecimális RGB-kóddal - pl. #0000FF

A decimális és hexadecimális RGB-kódokról részletesebben

Az additív színkeverés a vörös (Red), zöld (Green) és kék (Blue) alapszínekkel dolgozik, és ezekből kever ki különböző színeket. Az RGB-kód (a decimális és hexadecimális RGB-kód is) azt kódolja, hogy a három alapszínből rendre mekkora mennyiséget használtunk fel egy adott szín kikeveréséhez.

A decimális RGB-kódnál mindhárom alapszín mennyisége 0 és 255 közötti lehet. Például az rgb(0, 0, 255) azt jelenti, hogy a vörös (Red) szín mennyisége 0, a zöld (Green) szín mennyisége szintén 0, a kék (Blue) szín mennyisége pedig a maximális 255 - tehát ez a színkód éppen a kék színt kódolja. Az alapszínek mennyiségét megadhatjuk százalékosan is, ekkor értelemszerűen 0% és 100% közötti értékeket írunk mindenhova. Például százalékos megadás esetén a kék szín kódja a következő lesz: rgb(0%, 0%, 100%).

A hexadecimális RGB-kód is pontosan ugyanígy működik, csak talán első ránézésre ez nem annyira világos. A hexadecimális RGB-kódban # (kettős kereszt) után 6 darab, tizenhatos számrendszerbeli számjegyet adunk meg (tehát minden számjegy 0 és F (= 15) közötti). Az első két számjegy a vörös (Red), a második kettő a zöld (Green), az utolsó kettő pedig a kék (Blue) szín mennyiségét kódolja. Például a #0000FF a kék színt kódolja, hiszen a vörös és zöld mennyisége 0, a kék mennyisége pedig a maximális (FF).

  • Ha az adott (vörös, zöld vagy kék) színhez tartozó 2 számjegy megegyezik, akkor ezt rövidítve is írhatjuk. Például #0066FF helyett azt is írhatjuk, hogy #06F.
  • A hexadecimális színkód nem érzékeny a kis- és nagybetűkre (tehát például #12BD0F és #12bd0f ugyanaz).

Tipp

Nyilván senki nem akarja fejből megtanulni az összes létező színkódot. Szerencsére vannak olyan online szoftverek (például ez), amelyekkel manuálisan kiválaszthatunk egy nekünk tetsző színt a színpalettáról, és megtudhatjuk annak az RGB-kódját.

Szövegek formázása

Az alábbiakban áttekintjük a szövegekkel kapcsolatos fontosabb CSS formázásokat.

  • font-family: betűtípus
    • értékeként több betűtípus is felsorolható vesszővel elválasztva - ekkor a felsoroltak közül a legelső telepített betűtípus lesz beállítva
    • a több szóból álló betűtípusok nevét (pl. Courier New) aposztrófok között ('...') adjuk meg
  • font-size: betűméret
  • font-weight: betűvastagság
    • lehetséges értékei: normal (alapértelmezett vastagság), bold (vastag), bolder (vastagabb), lighter (vékonyabb), 100 és 900 közötti szám
  • font-style: italic - dőlt betűssé tétel
  • color: betűszín
  • text-align: szöveg vízszintes igazítása
    • lehetséges értékei: left (balra), right (jobbra), center (középre), justify (sorkizárt)
  • text-transform: szöveg átalakítása
    • lehetséges értékei: uppercase (csupa nagybetűs), lowercase (csupa kisbetűs), capitalize (minden szó első betűje nagybetű), none (alapértelmezett)

Példa: Néhány szövegformázás

 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>Szövegformázások</title>
    <meta charset="UTF-8"/>
    <style>
      p {
        font-family: Arial, Verdana, sans-serif;  /* betűtípus */
        font-size: 20px;                          /* betűméret */
        font-weight: bold;                        /* félkövér betűk */
        color: darkblue;                          /* sötétkék betűszín */
      }

      span {
        font-family: 'Courier New';               
        font-style: italic;                       /* dőlt betűk */
        color: #F00;                              /* vörös betűszín */
      }
    </style>
  </head>
  <body>
    <p>A házimacska<span>(Felis silvestris catus)</span> életmódja és viselkedése</p>
  </body>
</html>

A kód kimenete

A dobozmodell

Minden HTML objektum felfogható egy téglalap alakú dobozként. CSS-ben gyakran használjuk a dobozmodell fogalmat, amikor elemek elrendezéséről és dizájnolásáról beszélünk. Az alábbi ábrán láthatjuk ennek a dobozmodellnek a részeit. (Az ábra forrása)

CSS dobozmodell

  • A content jelenti a doboz tartalmát, ami általában az elem szöveges tartalma vagy egy kép.
  • A padding a tartalom körül található belső térköz.
  • A border a tartalmon és a belső térközön kívül elhelyezkdő szegély.
  • A margin a szegélyen kívül található külső margó.
Térközök megadása

A padding-top, padding-right, padding-bottom és padding-left CSS tulajdonságokkal beállíthatjuk egy elem felső, jobb oldali, alsó és bal oldali térközének a mértékét.

Ezek a jellemzők összevonva is megadhatók a padding tulajdonsággal, amelynek értékeként megadjuk sorban a felső, jobb, alsó és végül a bal térköz mértékét. Ha ezek közül valamelyik paramétert elhagyjuk, akkor az a szemközti oldaltól fogja örökölni az értéket.

Példa: Térköz megadása a padding tulajdonsággal

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.pelda1 {
  /* felső térköz: 10px, jobb térköz: 20px, alsó térköz: 30px, bal térköz: 40px */
  padding: 10px 20px 30px 40px;
}

.pelda2 {
  /* felső térköz: 0px, jobb térköz: 10px, alsó térköz: 0px, bal térköz: 10px */
  /* (mert az alsó térköz a felsőtől, a bal térköz a jobbtól örökli a méretet) */
  padding: 0 10px;
}
Margók megadása

Nagyon hasonlóan, mint ahogy azt a térközöknél láttuk, a margók is megadhatók...

  • ...külön-külön, a margin-top, margin-right, margin-bottom és margin-left tulajdonságokkal
  • ...összevonva, a margin tulajdonsággal (felső-jobb-alsó-bal sorrendben itt is - ha valamelyik margó méretét nem adjuk meg, akkor a szemközti oldaltól örökli azt).

A margin-left és margin-right tulajdonságoknál az auto értéket felhasználhatjuk az elem vízszintes igazítására:

  • margin-left: auto: vízszintesen jobbra igazítja az elemet
  • margin-right: auto: vízszintesen balra igazítja az elemet
  • ha mind a bal, mind a jobb margó értéke auto, akkor vízszintesen középre igazodik az elem.

Példa: Elem vízszintesen középre igazítása

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>A CSS dobozmodell</title>
    <meta charset="UTF-8"/>
    <style>
      div {
        border: 3px solid black;      /* szegély (a szemléletesség kedvéért) */
      }

      .centered {
        width: 300px;                /* az elem szélességét 300 pixelre csökkentjük */
        margin-left: auto;          /* vízszintesen középre igazítjuk az elemet */
        margin-right: auto;
        text-align: center;         /* a szöveges tartalmat is középre igazítjuk */
      }
    </style>
  </head>
  <body>
    <div class="centered">Ezt akarjuk középre igazítani...</div>
  </body>
</html>
Szegélyek megadása

A szegélyek megadására a border CSS tulajdonság szolgál. Ennek értékeként 3 paramétert adunk meg: rendre a szegély vastagságát, stílusát és színét. Ezeket egyébként külön-külön is megadhatjuk a border-width, border-style és border-color tulajdonságokkal.

A szegély vastagsága (border-width) lehet a thin (vékony), medium (közepes) és thick (vastag) kulcsszavak valamelyike, de ha ennél pontosabbak szeretnénk lenni, akkor akár pixelben is megadhatjuk a szegélyvastagságot.

A szegély stílusa (border-style) lehet solid (folytonos), dashed (szaggatott), dotted (pontozott), double (dupla), groove (faragott), ridge (kidomborodó), outset (kiemelkedő), inset (süllyesztett), none (nincs szegély) vagy hidden (rejtett).

Ha nem szeretnénk minden irányból szegélyt adni egy objektumnak, akkor a border-top, border-right, border-bottom és border-left tulajdonságokkal külön-külön is megadhatjuk a felső, jobb, alsó és bal szegélyek értékét.

Példa: Szegélyek megadása

1
2
3
4
5
6
7
8
9
.pelda1 {
  /* 3 pixel vastag, folytonos fekete szegély minden irányból */
  border: 3px solid black;
}

.pelda2 {
  /* vastag, dupla vonalas, piros színű alsó szegély */
  border-bottom: thick double red;
}
Elemek méretezése

Miután megismertük a CSS dobozmodellt, beszélhetünk a HTML elemek méretéről (szélességéről és magasságáról).

Egy elem szélességét a width, magasságát pedig a height CSS tulajdonsággal adhatjuk meg. Ezek értékeként megadható a korábban tárgyalt abszolút és relatív hosszúságmértékek valamelyike, vagy az auto speciális érték (ekkor a böngésző határozza meg a méretet).

Ehhez hasonlóan a min-width, max-width, min-height és max-height tulajdonságokkal rendre megadhatjuk egy elem minimális és maximális szélességét, valamint minimális és maximális magasságát.

A box-sizing tulajdonság

A méret (szélesség és magasság) megadásának többféle értelmezése lehet. Ennek szabályozására szolgál a box-sizing CSS tulajdonság. Értékei:

  • content-box: az elem méretébe csak a tartalom tartozik bele (alapértelmezett)
  • border-box: az elem méretébe a tartalom, a térközök és a szegélyek is beletartoznak.

Ha egy másik objektumon belül elhelyezkedő elem méretét százalékban adjuk meg, akkor előfordulhat, hogy a következő jelenséggel találjuk szembe magunkat:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>A box-sizing tulajdonság</title>
      <meta charset="UTF-8"/>
      <style>
         #parent { border: 10px solid black; }
         #child { width: 100%; border: 10px solid gray; }
      </style>
   </head>
   <body>
      <div id="parent">
         <div id="child">Beágyazott objektum</div>
      </div>
   </body>
</html>

A kód kimenete

Látható, hogy a beágyazott objektum szegélye "kilóg" az őt tartalmazó objektumból, ami közel sem mondható szépnek. Ennek a jelenségnek az oka, hogy az elemek méretébe alapértelmezett módon csak az elem tartalma tartozik bele, a térközök és a szegélyek nem (content-box).

Ha azt szeretnénk, hogy a méretbe a tartalom mellett a térközök és a szegélyek is beletartozzanak, használjuk a box-sizing: border-box utasítást!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>A box-sizing tulajdonság</title>
      <meta charset="UTF-8"/>
      <style>
         #parent { border: 10px solid black; }
         #child { width: 100%; border: 10px solid gray; box-sizing: border-box; }
      </style>
   </head>
   <body>
      <div id="parent">
         <div id="child">Beágyazott objektum</div>
      </div>
   </body>
</html>

A kód kimenete

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: Teljes képernyős háttérkép (A háttérké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
25
26
27
28
29
<!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;
      }

      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. 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 */
        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


Utolsó frissítés: 2021-02-28 10:26:11