Labor 04 Segédlet – Webfejlesztés (HTML/CSS)¶

A HTML nyelv felépítése¶

A A Hypertext Markup Language (HTML) nyelv elemekből és attribútumokból épül fel. Az elemekkel tudjuk felcímkézni a szöveg egyes részeit, az attribútumokkal pedig ezeknek a címkéknek a tulajdonságait tudjuk meghatározni. Az elemek (angolul element) a szöveget formailag egy kezdő címke (start tag) és egy záró címke (end tag) közé zárják:

<címke>szöveg</címke>

Az elem elején a kezdő címkét „kacsacsőrök” közé kell tennünk, a záró címkét szintén, de itt még egy per-jelre is szükség van, hogy egyértelművé tegyük, ez az elem vége. A címkék nem fognak megjelenni a weboldalon, hanem csak kiegészítő információkat hordoznak, amiket a böngésző értelmez.

A címke viselkedését attribútumokkal tudjuk meghatározni, melyekből több is kapcsolódhat egy elemhez. Az attribútumokat és értékeiket a kezdő címkénél adhatjuk meg, méghozzá úgy, hogy az értéket idézőjelek ("érték") vagy aposztrófok ('érték') közé tesszük:

<címke attribútum1="érték1" attribútum2="érték2">szöveg</címke>

A legtöbb elem a fenti formában egy szöveg formáját vagy szerepét (pl. címsor) határozza meg, de vannak más jellegű elemek is (pl. sortörés, kép hivatkozás). Ezért formailag léteznek ún. önbezáró címkék (self-closing tag), amelyeknek egyszerű a formájuk:

<címke />

Természetesen ehhez is kapcsolódhatnak attribútumok:

<címke attribútum1="érték1" attribútum2="érték2" />

Van lehetőség arra, hogy a HTML kódba megjegyzéseket (comment) tegyünk annak érdekében, hogy később emlékezzünk arra, mit miért csináltunk, vagy hogy éppen a weboldal melyik részének a kódját látjuk:

<!-- Itt következik a lábléc -->

Természetesen ezek a megjegyzések sem jelennek meg a böngészőben, de bárki számára láthatóak, aki a böngészőben megnézi az oldal forrását, ezért bizalmas információkat ne írjunk ide.

Fontos, hogy a HTML nyelvben az elemek nevei rögzítettek, nem találhatunk ki újabb elemeket, azokat kell használnunk, amik a szabványban megtalálhatóak.

A HTML dokumentum struktúrája¶

A HTML dokumentum első sora az ún. Document Type Definition (DTD). A DTD határozza meg a böngésző számára, hogy a dokumentum a HTML szabvány mely verzióját követi, így a böngésző pontosan tudni fogja, hogy a dokumentumban milyen HTML elemek megengedettek, és melyiknek mi a jelentése. Mi a gyakorlatok során a legújabb, HTML 5 által előírt DTD-t fogjuk használni:

<!DOCTYPE html>

Fontos, hogy a HTML fájl elején szerepeljen ez a sor, különben előfordulhat, hogy a böngésző nem úgy jeleníti meg az oldalt, ahogy szeretnénk.

A !DOCTYPE után következik az oldal ún. gyökér eleme (root element), a html elem, ami tartalmazza a dokumentum fejlécét (head) és törzsét (body):

<!DOCTYPE html>
<html>
  <head>
    <!-- Ez a fejléc-->
  </head>
  <body>
    <!-- Ez a szövegtörzs -->
  </body>
</html>

A fejlécben kap helyet a dokumentum címe, amit a böngésző az ablak címsorban megjelenít (title elem) és további leíró információk (meta elem), amik viszont nem jelennek meg az oldalon, például:

<head>
  <title>Bevezetés az internet programozásába</title>
  <meta name="author" content="Teszt Elek" />
  <meta http-equiv="Content-Language" content="hu" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

A szöveg struktúrája¶

Ha egy HTML dokumentumban rendezni, formázni szeretnénk a szöveget, akkor ezt kizárólag HTML elemekkel tehetjük meg. Azaz hiába teszünk sortöréseket a HTML kódba, vagy hiába teszünk egymás után sok szóközt, a böngészőben csak egyetlen szóköz fog megjelenni helyette. Ha másként szeretnénk, erre szolgáló címkéket kell használnunk.

Egy hosszabb szöveget a p (paragraph) elem segítségével tagolhatunk bekezdésekre:

<p>Első bekezdés</p>
<p>Második bekezdés</p>

Ha egy bekezdésen belül új sort szeretnénk kezdeni, akkor azt a br (break) elemmel tehetjük meg. A br elem önállóan áll, nincs sem záró címkéje, sem pedig attribútumai, mindössze ennyi:

<br />

A bekezdések közé címsorokat tehetünk, méghozzá hat méretben, melyeket a h1..h6 (heading) elemekkel jelölhetünk:

<h1>Főcím</h1>
<h2>Alcím</h2>

Szemléltetve az eddigieket egy összetettebb példán:

<!DOCTYPE html>
<html>
<head>
<title>Bekezdések, címsorok</title>
</head>
<body>
<h1>Ma 2010. október 27. van</h1>
Az év 300. napja a Gergely-naptár szerint.
<h2>Évfordulók</h2>
<p>
518 éve Kolumbusz Kristóf felfedezte Kubát.<br />
(Hivatalosan Kubai Köztársaság, egykori spanyol gyarmat, ma a legnépesebb karibi ország.)
</p>
<p>85 éve Fred Waller feltalálta a vízisít.</p>
</body>
</html>

Mindez így jelenik meg a böngészőben:

Ha listákra van szükségünk, akkor kétféle elemet használhatunk attól függően, hogy számozott vagy egyszerű felsorolásos listát szeretnénk megjeleníteni az oldalon. A számozott listák keretét ol (ordered list) elemek jelentik, amin belül az egyes lista tételeket li (list item) címkék jelzik:

<ol>
  <li>Első</li>
  <li>Második</li>
  <li>Harmadik</li>
</ol>

Ha nincs szükségünk a sorszámokra, akkor az ul (unordered list) elemmel egyszerű felsorolásos listát készíthetünk:

<ul>
  <li>Piros</li>
  <li>Fehér</li>
  <li>Zöld</li>
</ul>

Igény szerint a felsorolásokat és számozott listákat több szint mélyen akár egymásba is ágyazhatjuk, a böngésző automatikusan gondoskodni fog a megfelelő sorszám vagy lista ikon megjelenítéséről. A szöveg tagolására használható még a hr (horizontal rule) elem is, amely egy vízszintes vonallal választja el a felette és alatta lévő tartalmat. A br elemhez hasonlóan a hr is önbezáró:

<hr />

Hivatkozások¶

Az egyes weboldalaink között a kapcsolatot hiperhivatkozásokkal (hyperlink) teremthetjük meg, amit az a (anchor=horgony) elem valósít meg:

<a href="http://www.bme.hu"
  title="Ugrás a BME oldalára"
  target="_blank">BME honlap</a>

A nyitó és a záró címke között szerepel az a szöveg, ami meg fog jelenni a weboldalon, a href attribútumban pedig azt a webcímet kell megadnunk, amire ezzel a hivatkozással ugrani lehet. A title attribútumba olyan szöveg írható, amely megjelenik a böngészőben, amikor a felhasználó a hivatkozás fölé viszi az egeret (ún. tooltip). A target attribútumban azt adhatjuk meg, hogy hova töltődjön be a hivatkozott weboldal. Ha az értéke "_blank", akkor a böngésző új ablakban fogja megnyitni az oldalt.

Szintén az a elem használható oldalon belüli ugrások, például tartalomjegyzék vagy az oldal tetejére mutató hivatkozás létrehozására. Ehhez meg kell jelölnünk a hivatkozni kívánt részt az id attribútummal (a div elem magyarázatát ld. később):

<div id="LapTeteje" />

Majd az erre mutató linket be kell szúrnunk a kívánt helyre:

<a href="#LapTeteje">Ugrás az oldal tetejére</a>

Az a elemen belül tetszőleges elem állhat, például ha egy képet szeretnénk kattinthatóvá tenni, akkor a kép megjelenítésére szolgáló img elemet tehetjük a link belsejébe:

<a href="http://www.bme.hu">
<img src="logo.gif" />
</a>

Szemantikai elemek¶

Az eddig bemutatott elemek többnyire a szöveg megjelenésén változtattak. A továbbiakban lássunk pár olyan HTML elemet, amelyek jelentést (szemantikát) is társítanak a szöveghez! Láttunk már erre példát a címsorok esetén, hiszen a h1 elem azonkívül, hogy megnagyobbítja a szöveget még azt is jelenti, hogy a tartalma az oldal címe.

Hasonlóan az em és strong elemek nemcsak dőlten (em) és félkövéren (strong) jeleníti meg a tartalmazott szöveget, hanem egyben azt is jelenti, hogy ez hangsúlyozott illetve kiemelt tartalom.

Ezek a szemantikai HTML elemek (és a többi, amit itt nem tudtunk felsorolni) nagyban hozzájárulnak ahhoz, hogy a weboldalaink ne csak az emberi szem számára szépen megjelenő szövegek legyenek, hanem a szöveg egyes részeinek szerepe a feldolgozó programok - például a keresőmotorok vagy a vakok és gyengénlátók által használt képernyőolvasó szoftverek - számára is egyértelmű legyen.

Táblázatok¶

A HTML nyelvben sok elem szolgál arra, hogy táblázatokat tudjunk megjeleníteni az oldalainkon. Egy három soros és két oszlopos táblázatot például így készíthetünk el:

<table summary="Kiadások">
  <thead>
    <tr>
      <th>Hónap</th>
      <th>Összeg</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Összesen:</td>
      <td>600</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Január</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Február</td>
      <td>200</td>
    </tr>
    <tr>
      <td>Március</td>
      <td>300</td>
    </tr>
  </tbody>
</table>

A táblázatot a table elem jelzi, melyben az egyes sorokat tr (table row), azon belül az egyes cellákat pedig td (table data) elemek definiálják. A cellák között a th (table header) elemekkel különböztethetjük meg a fejléc cellákat. Ha nagyobb táblázatról van szó, akkor azon belül célszerű jeleznünk a fejlécet, a láblécet és a táblázat törzsét, ami például az oldal kinyomtatásakor lehet hasznos információ a böngészőnek. A táblázatnak ezeket a részeit a thead, a tbody és a tfoot elemek jelölik. Elsőre kicsit szokatlan lehet, hogy a tfoot elemnek a tbody előtt kell állnia, hogy a böngésző a feldolgozás során időben hozzáférjen az abban szereplő információkhoz.

Űrlapok¶

A weboldalak nemcsak információk megjelenítésére használhatóak, hanem adatok bekérésére is szolgálhatnak. Ilyenkor űrlapokat kell készítenünk, amiket a felhasználó kitölt, majd az adatokat a böngésző egy HTTP POST kéréssel eljuttatja a szerverre. Hogy a szerver oldalon mi történik az elküldött adatokkal, az a webszerveren futó alkalmazás feladata – erre fogunk példákat látni a PHP gyakorlaton.

<form action="urlap.aspx" method="post">
  <label for="veznev">Vezetéknév:</label>
  <input id="veznev" type="text" />
  <br />
  <label for="kernev">Keresztnév:</label>
  <input id="kernev" type="text" />
  <br />
  <input type="submit" value="Mehet" />
</form>

A form elem jelzi a böngésző számára, hogy itt egy űrlapról van szó. A form elem action attribútumában azt az URL-t kell megadnunk, ahova a böngésző a megadott adatokat el fogja küldeni, a method attribútumban pedig azt, hogy HTTP GET vagy POST formában várja a szerver az adatokat. Ezek nélkül az űrlap nem sokat ér.

Az űrlapon belül a mezőket és a mezőkhöz tartozó címkéket célszerű összekapcsolni egymással, hogy logikailag is legyen kapcsolat, ne csak a megjelenítéskor kerüljenek egymás mellé. A címkéket a label elem hordozza, a mezőkhöz tartozó beviteli vezérlők többségét pedig az input elem jeleníti meg. E kettő között úgy lehet kapcsolatot teremteni, hogy az input elem id attribútumában megadunk egy tetszőleges, az oldalon belüli egyedi azonosítót és erre hivatkozunk a label elem for attribútumában. Azonosítóként bármit használhatunk, de a bevált gyakorlat szerint olyan azonosítót választunk, ami rövid, egyértelmű, illetve nem tartalmaz ékezeteket és szóközöket.

Az input elem type attribútumában kell megadnunk, hogy pontosan milyen beviteli mezőre van szükségünk. Az alábbiak a lehetséges értékek:

text: szövegdoboz
checkbox: jelölőnégyzet
radio: rádiógomb
password: jelszó mező (szövegdoboz, amiben látszanak a beírt karakterek)
file: fájl feltöltés
hidden: rejtett

Az input vezérlővel gombokat is tehetünk az űrlapunkra, szintén a type attribútum beállításával:

submit: elküldi az űrlap tartalmát a form elemben megadott címre
reset: kitörli az összes űrlap mezőbe beírt értéket
button: egyszerű nyomógomb, JavaScript kódot kell írnunk, amivel funkcionalitást rendelhetünk a gombhoz

Az input vezérlőn kívül gyakran használunk még legördülő listákat, hogy a felhasználónak ne kelljen gépelnie, hanem előre meghatározott értékek közül választhasson ki egyet. A lehetséges értékeket a select elemen belül elhelyezett option elemekkel kell felsorolni:

<select id="szinek">
  <option value="P">Piros</option>
  <option value="F">Fehér</option>
  <option value="Z">Zöld</option>
</select>

Amikor a felhasználó választ egy elemet és elküldi az űrlapon megadott adatokat a szerverre, az option elem value attribútumában megadott értéket fogja megkapni a szerver, ezért fontos ennek az attribútumnak az egyértelmű, könnyen feldolgozható értékekkel történő kitöltése.

Ha egy űrlap hosszú, akkor célszerű azt részekre bontani, erre szolgál a fieldset elem, amin belül az egyes részeknek a legend elemmel adhatunk címet:

<form action="urlap.aspx" method="post">
<fieldset>
<legend>Személyes adatok</legend>
<!-- Ide jönnek a személyes adatok mezői -->
</fieldset>
<fieldset>
<legend>Szakmai adatok</legend>
<!-- Ide jönnek a szakmai adatok mezői -->
</fieldset>
</form>

CSS¶

Egy weboldal készítésekor alapvető elvárás, hogy az oldalnak olyan arculatot adhassunk, amilyet szeretnénk. Nemcsak strukturálni szeretnénk a tartalmat, hanem formázni is, azaz szeretnénk megadni, hogy az egyes részletek, címek, bekezdések, képek hol és hogyan jelenjenek meg. A HTML nyelvben erre természetesen már a kezdetektől fogva van lehetőség. Egyes elemek tartalmazhatnak megjelenítésre vonatkozó attribútumokat (pl. align: igazítás), vagy például a font elemmel megadhatjuk a betűtípust, betűméretet és a színt. Íme egy példa:

<p align="center">
<img src="logo.jpg" border="1" />
<font size="10" color="red">
Ez itt egy nagy piros szöveg középre igazítva.
</font>
</p>

Ez a megközelítés működőképes, de nem túl szép, ugyanis a tartalom és a megjelenés nagyon keveredik egymással. Szerencsére erre van megoldás, pont erre szolgál a Cascading Style Sheets (CSS) nyelv, ez a javasolt és elvárt megközelítés a dizájn és az egységes arculat kialakítására.

CSS szabályok¶

CSS stíluslapokkal dolgozva a beállításokat attribútum név – attribútum érték párosokkal (CSS szabályokkal) adhatjuk meg. A HTML és CSS attribútumok elnevezése néhol teljesen egyező, máshol csak hasonló. Például az előző kódrészletben használt color attribútum létezik CSS-ben is, az align="center" HTML attribútum helyett viszont a text-align CSS attribútumot kell használnunk:

text-align: center;
color: red;

Formailag nincs szükség idézőjelekre, az egyenlőségjel helyett pedig kettőspontot kell használnunk. Egyszerre több CSS attribútumnak is adhatunk értéket, ebben az esetben pontosvesszővel kell elválasztanunk a név-érték párosokat egymástól.

Ha megjegyzést szeretnénk írni a CSS kódunkba, akkor azt /* és */ jelek között tehetjük meg:

/* Kiemelés */
color: red;
font-weight: bold;

HTML és CSS összekapcsolása¶

A következő kérdés az, hogy ezeket a CSS beállításokat hogyan kapcsoljuk a HTML kódunkhoz. Erre háromféle lehetőségünk van:

Használhatunk ún. inline stílust, ekkor a formázandó HTML elem style attribútumába kell írnunk a CSS attribútumokat és azok értékeit:
```
<p style="font-style: italic; border: 1px solid blue; margin-left: 30px;
width: 300px; padding: 10px; text-align: center;">
Ha megnyesik szárnyaimat - lábaimon járok, ha levágják lábaimat – kezeimen
járok, és ha azt is kiszakítják, akkor hason fogok csúszni, csakhogy
használhassak. (Széchenyi István)
</p>
```
Az inline stílusnak megvan az az előnye, hogy bárhol használhatjuk, minden komolyabb előkészítés nélkül. A hátránya pedig az, hogy így a stílusbeállításaink továbbra is több helyen lesznek az oldalon, többszörösen növelik az oldal méretét, nekünk kell szinkronban tartani őket stb. Ezért ezt élesben csak ritkán szoktuk használni, egyszerűbb és kisebb stílus megadások esetén.
Egy másik lehetőség a CSS kód elhelyezésére a stílus blokk használata. Ebben az esetben tipikusan a HTML oldal head elemében hozunk létre egy style elemet, és oda írjuk a CSS kódunkat. Ekkor persze felmerül a kérdés, hogy honnan fogják tudni az oldal egyes részei, hogy mely beállítások vonatkoznak rájuk, erre később visszatérünk. Egyelőre csak a style blokk szintaktikáját akarjuk megismerni:
```
<style type="text/css">
/* A body elem és a gyermek elemeinek stílusa */
body
{
font-family: Verdana, Arial, Sans-Serif;
font-size: 75%;
background-color: #f4e7bb;
}
</style>
```
A stílus blokk lehetőséget ad arra, hogy a HTML oldalban egy helyre koncentráljuk a megjelenítésre vonatkozó részeket, így ha esetleg át kell szabnunk az oldal arculatát, egy központi helyen tehetjük meg azt a CSS kód átírásával. Az a hátrány azonban így is megmarad, hogy a webhely által használt összes oldal között nekünk kell szinkronban tartani a CSS blokkokat. A keveredő megjelenés és formázás miatt ez a módszer sem ajánlott.
Ezen segít a harmadik megoldás, amikor nem a HTML fájlban helyezzük el a CSS kódot, hanem egy külső fájlban, aminek tipikusan a .css kiterjesztést szoktuk adni. Ekkor a HTML oldal head elemében egy link elemmel hivatkozhatunk az oldalhoz tartozó stíluslapra:
```
<link href="style.css" rel="stylesheet" type="text/css" />
```
Ez a legpraktikusabb megoldás, hiszen ilyenkor a teljes webhelyünkhöz tartozó összes stílusbeállítás egyetlen (vagy néhány) fájlban van, erre hivatkozik az összes oldal, így ha módosítani kell valamit, akkor azt elég egyetlen helyen megtenni.

Felmerülhet a kérdés, hogy mi történik akkor, ha mindhárom megoldást egyszerre használjuk? Ebben az esetben a böngésző alkalmazni fogja az összes stílusbeállítást, mégpedig a következő sorrendben, az általánostól a specifikusabb irányba haladva:

Külső CSS fájl
Oldalon belüli stílus blokk
Az elemhez tartozó stílusbeállítások

Ez azt jelenti, hogy ha egy elemre a külső CSS fájlban megadunk egy beállítást, majd ugyanarra az elemre és ugyanarra a tulajdonságára (például háttérszín) az oldalon belül megadunk egy másik beállítást, akkor az oldalon belül definiált felülírja a külső fájlban megadott értéket. Úgy is mondhatnánk, hogy a közelebbi nyer.

CSS szelektorok¶

Az előző fejezetben a stílus blokknál érintettük azt a problémát, hogy meg kell adnunk, hogy egy definiált stílus pontosan melyik HTML elemre vagy elemekre vonatkozzon. Ez CSS fájl használata esetén is fennálló probléma. Erre szolgálnak a CSS szelektorok (CSS selectors).

Ha azt akarjuk, hogy egy beállítás az összes HTML elemre érvényes legyen, akkor a * (csillag) szelektort kell használnunk. Például a keretet (border), a külső- (margin) és a belső margót (padding) így szüntethetjük meg (a vastagságuk ill. a szélességük méretét kell számmal megadni):

* { border: 0; margin: 0; padding: 0; }

Hivatkozhatunk a HTML elem nevére is, ebben az esetben az összes helyen, ahol az adott elemet használjuk, automatikusan a megadott stílussal fog megjelenni. Például a második szintű címsor (h2) elé (fölé) tehetünk 25 pixel távolságot (padding-top) és aláhúzhatjuk (text-decoration) a szöveget:

h2 { text-decoration: underline; padding-top: 25px; }

A harmadik szelektor típus az, hogy egy konkrét elemre hivatkozunk az id attribútumán keresztül. Ehhez a HTML kódban egyedi értéket kell adnunk az id attribútumnak, és ezt kell megadnunk a CSS-ben is egy # jel után. Az alábbi példában egy adott címsort kis kapitális stílussal jelenítünk meg:

#idezetek { font-variant: small-caps; }

<h2 id="idezetek">Idézetek</h2>

Könnyen lehet, hogy nem az elem összes előfordulását, és nem is egy konkrét elemet akarunk formázni, hanem csak néhány kitüntetett helyen akarunk alkalmazni egy stílust. Ebben az esetben célszerű létrehoznunk egy saját stílus osztályt, aminek tetszőleges nevet adhatunk, a lényeg az, hogy pontot írjunk elé. Például definiálhatunk egy szerzo osztályt, ami meghatározza, hogy a szöveg legyen dőlt (font-style) és kisebb (font-size):

.szerzo {
font-style: italic;
font-size: 80%;
}

<p class="szerzo">(Deák Ferenc)</p>

Ez a négy (*, elem, id, class) a leggyakrabban használt szelektor típus. Ezen kívül vannak még további speciális szelektorok, melyekre jelen segédlet nem tér ki.

Div és span¶

Mi van akkor, ha nincs az adott helyen HTML elem, ahol formázást szeretnénk alkalmazni? Ebben a kódrészletben például szerepel a nemkívánatos (elavult, nem javasolt a használata, de a böngészők megértik) font elem a lényeg pirossal történő kiemelésére:

Ez itt a <font color="red">lényeges</font> rész.

Ha az ajánlásoknak megfelelően mellőzzük a font elemet, akkor marad a nyers szöveg, ekkor semmilyen szelektorral nem tudunk egy szóra hivatkozni, mindenképp szükségünk van egy HTML elemre. Ha ilyen problémával találkozunk, hogy az oldalon belül egy kisebb részt szeretnénk megformázni, akkor beszúrhatunk egy span elemet, és arra alkalmazhatjuk a stílust a korábban már megismert módokon:

.fontos {
color: red;
}

Ez itt egy <span class="fontos">lényeges</span> rész.

Ha az oldalnak egy nagyobb részét (például fejléc, jobb hasáb, friss hírek blokk stb.) szeretnénk formázni, akkor hasonlóan használhatjuk a div (division) elemet. Mindkét elemnek van style, class és id attribútuma, a formázás tehát hasonlóan megy mindkét esetben.

A nagy különbség, hogy a span ún. inline elem, a div pedig blokk elem. Ez első megközelítésben annyit jelent, hogy a span nem változtat az oldal elrendezésén, a div után viszont alapértelmezés szerint bekerül egy sortörés, ezzel is jelezve, hogy ott egy újabb nagyobb blokk következik. Ennél azonban fontosabb, hogy a span csak további inline elemeket tartalmazhat (pl. strong, em; de div vagy p nem), míg a div szinte bármilyen HTML elemnek lehet a szülő eleme, így akár bekezdéseket vagy további div és span elemeket is tartalmazhat. Span elemet majdnem bármilyen másik elembe tehetünk, a div azonban szigorúbb, például spanbe vagy p elembe nem ágyazhatjuk.

CSS beállítások öröklődése¶

A CSS egyik legérdekesebb és leghasznosabb tulajdonsága, hogy a beállítások öröklődnek. Ennek köszönhető, hogy nem szükséges minden beállítást minden elemre definiálnunk, hanem elég a legkülső elemre megadnunk, onnan öröklődni fog a gyermek elemekre.

<p>
Jártál-e már <em>Makkoshotykán</em>?
</p>

Ha a fenti bekezdést kékkel írjuk, automatikusan a kiemelés is kék lesz, nem szükséges arra külön megadnunk ugyanezt a stílust:

p { color: blue; }

Szerencsére nem minden beállítás öröklődik, hanem csak azok, amelyeknek tipikusan kívánatos az öröklődése. A keretezés (border) például nem öröklődik. Ha öröklődne, akkor a bekezdésre alkalmazott kereten belül megjelenne egy külön keret Makkoshotyka körül is.

Ha szeretnénk kikényszeríteni az öröklést, akkor az inherit értéket adhatjuk meg az attribútumnak:

border: inherit;

A CSS-ben a specifikusabb beállítások fontosabbak, mint az általánosabb beállítások, ezért előfordulhat, hogy a szülőtől öröklődő értéket egy gyermek elemre megadott stílus felülírja. Ha ezt nem szeretnénk, használhatjuk az !important kiegészítést:

em { color: red; }
p { color: blue !important; }

Doboz modell¶

Az elemek méretének meghatározásához és helyes pozicionálásához érdemes megismerkednünk a CSS doboz modellel (CSS box model). Az alábbi ábra szemlélteti, hogy egy adott HTML elem (leggyakrabban div) esetén pontosan hol is állítjuk a belső margó (padding), keret (border) és külső margó (margin) értékeket:

Bár a doboz modell logikusnak és egyértelműnek látszik, történeti okokból sajnos a böngésző gyártók nem egyformán valósították meg, emiatt könnyen előfordulhat, hogy ugyanazt az oldalt különböző böngészőkben megtekintve pár pixel különbséget tapasztalunk. Ez többnyire nem okoz gondot, azonban ha nagyon kicentizzük az oldalt és mindent pixelre kikalkulálunk, akkor lehet, hogy kellemetlen élményben lesz részünk, például az egyik böngészőben egymás mellé kerül két elem, míg egy másik böngészőben egymás alá tördelődnek, mert ott éppen nem férnek ki egy sorba.

Flexbox¶

A flexbox egy modern layout rendszer megvalósításához nélkülözhetetlen CSS megoldás. Mivel kényelmesebb, mint a float alapú layout ezért mindenképpen érdemes az alapjait megismerni.

A következő példákban megnézzük, hogy a flexbox különböző beállításaival hogyan tudjuk átvariálni az oldalunk kinézetét, illetve kitérünk arra is, hogy az egyes elemek összenyomása / nyúlása hogyan befolyásolható.

Az alábbi tulajdonságokat fogjuk állítani:

justify-content: elemek rendezése, tagolása a főtengely mentén.
flex-wrap: a tartalom törhet-e új sorba / oszlopba.
align-conent: többsoros flexbox sorainak igazítása a kereszttengely mentén.
align-items: gyerekek igazítása a főtengelyre merőlegesen.
flex-shrink: összemónyható-e a gyerek ha kevés a hely és milyen arányban.
flex-grow: nyúljon-e a gyerek és a többi elemhez képest milyen arányban.

Az alábbi kiinduló HTML-t nézzük meg:

<div id="main">
    <div style="background-color:coral;"></div>
    <div style="background-color:lightblue;"></div>
    <div style="background-color:khaki;"></div>
    <div style="background-color:pink;"></div>
    <div style="background-color:gold;"></div>
    <div style="background-color:lightgreen;"></div>
    <div style="background-color:purple;"></div>
</div>

A példában különböző színű div-ek vannak egymás után téve egy main div-ben, egyebet nem tartalmaz a HTML. A színek azért a style-ban kerültek megadásra, hogy a CSS kód csak a flexboxra mutasson példát.

A flexbox gyerekek kitölti a rendelkezésre álló helyet¶

Flexbox használata esetén a gyerek elemek automatikusan kitöltik a szülő elemet, ha kell a flexbox összenyomja az elemeket (alapértelmezés szerint), vagy ha több a hely, mint a gyerekek szélessége, akkor megfelelő távolságra helyezi őket a justify-content értéke alapján.

A main div 300px, az egyes elemek 70px szélesek. Összesen 7 div van, tehát a gyerek elemek nem férnek el a rendelkezésre álló helyen, viszont a flexbox ebben az esetben összenyomja az elemeket, hacsak nincs letiltva a flex-shrink tulajdonsággal az egyes gyerek elemeken. A justify-content: space-between be van állítva.

#main {
    width: 300px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: flex;
    justify-content: space-between;
}
#main div {
    width: 70px;
    min-height: 70px;
}

Ha megnézzük az oldalt, azt látjuk, hogy az egyes divek összenyomódtak, hiszen a flex-shrink alapértelmezés szerint 1-es azaz össze lehet nyomni az elemeket. Mivel a div-ekre csak min-height-ot adtunk meg, ezért a magassága ki fogja tölteni a rendelkezésre álló helyet, hiszen a flexbox alapértelmezés szerint függőlegesen nyújtja az elemeket.

Vegyük szélesebbre a teljes div-et 800px-re. Ekkor már elférnek a div-ek és a fölösleges helyet a space-between egyenletesen elosztja az elemek között.

#main {
    width: 800px;
  ...
}

Az összenyomás szabályozása (flex-shrink)¶

Ha visszaállítjuk a szélességes 300px-re és a 3. elemen letiltjuk az összenyomást, akkor a 3. div mérete a megadott 70px maradt, a többi elem pedig ennyivel keskenyebb lesz, hogy elférjenek a rendelkezésre álló helyen.

#main {
    width: 300px;
}
#main div:nth-child(3){
    flex-shrink: 0; 
}

Tartalom törlése több sorra (flex-wrap)¶

Állítsuk be, hogy ha kevés a hely, akkor törhessen több sorba a tartalom. Ezt a flex-wrap: wrap-pel tehetjük meg.

#main {
    ...
    flex-wrap: wrap;
}

Ahogy az alábbi ábrán is látható, akkor az egyes elemek úgy oszlanak meg a sorok között, hogy egyiket se kelljen összenyomni. A jelen beállítások mellett 4 div jut a felső sorba és 3 az alsóba és az egyes elemek közötti hely egyenletesen oszlik meg, de csak soron belül.

Elem nyújtása (flex-grow)¶

A következő példában engedjük meg, hogy a 6. zöld div nőjön meg ha van rendelkezésre álló hely.

#main div:nth-child(6){
    flex-grow: 1; 
}

Ekkor az alábbi elrendezést kapjuk. A zöld elem kitölti a rendelkezésre álló helyet.

Tartalom függőleges igazításának megadása (align-content)¶

Viszont az továbbra is kérdés, hogy függőlegesen miért töltik ki a div-ek az összes rendelkezésre álló helyet. Állítsuk be az align-content tulajdonságot center-re.

#main {
    ...
    align-content: center;
}

Ekkor már nem az alapértelmezet strech fog érvényre jutni, hanem középre fogja igazítani az egyes elemeket a flexbox az alábbiak szerint:

Elemek függőleges igazításának megadása (align-items)¶

Azonban, ha nem az align-content-et állítjuk centerre hanem az align-items-et, akkor az alábbi elrendezést kapjuk:

#main {
    ...
    align-items: center;
}

Jó látható, hogy míg az align-items a soron belül igazította az elemeket középre, addig az align-content a teljes tartalmaz igazította középre (ezért nincs üres hely a két sor között.)

Egy elem függőleges igazításának módosítása (align-self)¶

Ha egy-egy elemet másképpen szeretnénk elrendezni, mint amit az align-items-ben megadtunk, akkor az align-self beállítás használható. A 3. divet (sárga) igazítsuk a sor tetejére úgy, hogy a többi elem középre van igazítva.

#main div:nth-child(3){
    flex-shrink: 0; 
    flex-self: flex-start;
}

Példa oldalelrendezés¶

A következő példában egy oldalelrendezést készítünk. A cél egy olyan oldal, aminek van egy 50 pixel magas fejléce, egy 20 pixel magas lábléce, a kettő közötti rész pedig függőlegesen 30%-70% arányban osztott, és mindez összesen 950 pixel szélességben középre rendezve jelenik meg az oldalon, valahogy így:

Mivel az oldal egyes részei önmagukban is összetettek lehetnek (képek, bekezdések, felsorolások stb.), ezért minden egyes részt önálló div elembe zárunk, amiket pedig az id attribútumon keresztül egyedi névvel látunk el:

<div id="keret">
  <div id="fejlec">Fejléc helye</div>

  <div id="sor">
    <div id="balmenu">Bal menü helye</div>
    <div id="tartalom">Tartalom helye</div>
  </div>

  <div id="lablec">Lábléc helye</div>
</div>

A CSS fájlban ezekre az egyedi azonosítókra hivatkozva állítjuk be az oldal egyes részeinek megjelenését. Az egész oldal legyen 950 pixel széles és középre rendezett:

#keret{
  width: 950px;
  margin-left: auto;
  margin-right: auto;
}

Majd jöjjön az 50 pixel magas fejléc:

#fejlec{
  height: 50px;
}

A következő két div a balmenu és a tartalom egymás mellett a sor-ban:

#sor{
  display: flex;
}

#balmenu{
  width: 30%;
}

#tartalom{
  width: 70%;
}

Végül pedig a lábléc, ami a teljes szélességet kitölti és 20 pixel magas:

#lablec{
  height: 20px;
}

Ezzel készen is vagyunk. Látható, hogy a HTML kód nagyon egyszerű maradt, és az azonosítóknak köszönhetően jól olvasható, hogy az egyes blokkok az oldal melyik részéhez tartoznak.

Ellenőrző kérdések¶

Mire szolgál a HTML?
Hogyan lehet egy dokumentumban sortöréseket megadni?
Hogyan lehet egy dokumentumban címsorokat megadni?
Hogyan lehet egy dokumentumba képeket ágyazni?
Hogyan lehet egy dokumentumban egy 2x3 méretű táblázatot megadni?
Mire szolgál a CSS?
Milyen lehetőségeket ismer egy böngészőben megjelenítendő szöveg formázására?
Mi a probléma a táblázatokra épülő oldalelrendezésekkel?
Mire szolgál a div elem?
Mire szolgálnak a CSS szelektorok?
Hogyan lehet CSS-ben előírni, hogy minden főcím piros színnel jelenjen meg?
Mi az a flexbox, mikor érdemes használni?

2025-08-03 Szerzők