Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Kitekintés a stíluslapok használatába, tipikus szövegformázások

Tanulási útmutató

Összefoglalás

Előző leckénkben megismerkedtünk a HTML5 leggyakrabban használt szövegszintű elemeivel. De a szövegeket akár a stíluslapok segítségével is formázhatjuk, ezért ebben a leckében áttekintjük a stíluslaphasználat alapjait. Természetesen később, külön fejezetben mélyebben is megismerkedünk a stíluslaphasználattal.

Kitekintés a stíluslapok használatába, tipikus szövegformázások

Előző leckénkben megismerkedtünk a leggyakrabban használt szövegszintű elemekkel. Ezek között találtunk olyat, amelynek látványos eredménye lett (pl. félkövér megjelenés), de olyat is, ahol a tag nem elsősorban a megjelenésre, hanem inkább a szövegbeli jelentésre (szemantikára) vonatkozik (pl. idő megadása). Akármelyik taget is használjuk, a megjelenést a stíluslapokkal befolyásolhatjuk, ezért mielőtt továbbhaladnánk a HTML5-ös tagek megismerésében, nézzük meg a stíluslaphasználat alapjait.

Megjegyzés

A stíluslapok hátterével ugyanezen tananyag későbbi fejezetiben részletesebben megismerkedünk. Akkor vajon mi szükség egy stíluslap-kitekintőre a HTML tagek ismertetése között? A válasz egyszerű: amikor a HTML tagekkel ismerkedünk, akkor felmerül az igény arra, hogy a kinézetet is úgy állítsuk be, ahogy az nekünk megfelelő. Mivel az oldalak tartalmát (HTML-kód) és a kinézetet (stíluslapok) el kell különítenünk, ezért jó, ha már a stíluslapok használatával (legalábbis egy részével) tisztában vagyunk.

Ezért ebben a fejezetben néhány (alapvető) dolgot áttekintünk, majd később ezt a tudásunkat tovább bővítjük. Most főleg arra helyezzük a hangsúlyt, hogy a különböző formázási lehetőségeket egyszerűen kipróbálhassuk…

Vegyük mindjárt az egyik leggyakrabban használt taget, a <p>-t, amellyel bekezdéseket hozhatunk létre. A HTML eszköztárával – egyébként nagyon helyesen – nem tudjuk beállítani azt, hogy egy bekezdés balra, középre, jobbra, vagy sorkizártan legyen igazítva, illetve, hogy milyen betűtípussal jelenjen meg.

Megjegyzés

Egy hosszabb szövegben szükség lehet arra, hogy a szöveg különböző funkciójú részei vizuálisan is megkülönböztethetők legyenek. Az előző fejezetben láthattuk, hogy a HTML5 számos szövegrésztípushoz rendelkezésünkre bocsát jelölőket (idézet, definíció stb.), de ezek nem minden esetben elegendők. Nincs például olyan HTML5-jelölő, amely segítségével megjegyzést helyezhetünk el a szövegben, stb. A HTML5-ben ezeket a – normál szövegtől eltérő funkciójú – szövegrészeket is csak <p> elemként jelölhetjük meg, így viszont nincs mód arra, hogy ezek az elemek másként legyenek formázva, mint a főszöveg.

A kinézet módosításához tehát meg kell ismerkednünk a stíluslapok lehetőségeivel.

Nézzük meg, hogy mi lehet a megoldás!

A CSS (lépcsőzetes stíluslap) szabványban a szöveg igazítására a text-align paraméter használható. Az értékei a következők lehetnek:

A betűtípus megadására pedig a font-family tulajdonság szolgál. Most elegendő annyit tudnunk erről a tulajdonságról, hogy általános betűcsaládok közül választhatunk a következő értékek megadásával:

Nézzünk egy példát, amelyben egy bekezdést középre igazítunk.

Példa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id orci non leo faucibus vulputate in sit amet nibh. Duis pretium, ligula eget ullamcorper aliquet, lectus elit pulvinar dolor, sed auctor massa erat sed metus.

A fenti példa forráskódja:

Forráskód
<p style="text-align:center">Lorem ipsum dolor sit amet, ...</p>

Inline (beágyazott) megadás

Láthatjuk, hogy a bekezdés stílusát úgy adtuk meg, hogy a style paramétert használtuk, amelyben megadtuk a szöveg igazításért felelős text-align tulajdonságot, mégpedig a center értékkel. A tulajdonság és annak értéke között kettőspontot helyeztünk el.

Mi a helyzet akkor, ha még a betűtípust is be akarjuk állítani, mondjuk olyanra, ahol az egyes karakterek azonos szélességűek. Ekkor a font-family:monospace tulajdonságot is meg kell adnunk.

Példa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id orci non leo faucibus vulputate in sit amet nibh. Duis pretium, ligula eget ullamcorper aliquet, lectus elit pulvinar dolor, sed auctor massa erat sed metus.

A fenti példa forráskódja:

Forráskód
<p style="text-align:center; font-family:monospace;">Lorem ipsum dolor sit amet, ...</p>

Láthatjuk, hogy amennyiben több tulajdonságot is megadunk, akkor pontosvesszővel kell elválasztanunk egymástól a különböző tulajdonságokat, tehát az általánosabb alak így néz ki:

Forráskód
<tag_neve style="tulajdonság1: érték1; tulajdonság2: érték2">

Az így megadott tulajdonságok azon elemre (és azok leszármazott elemeire) vonatkoznak, ahol a style paramétert megadtuk.

Fontos

Ezt a fajta megadást inline, vagyis beágyazott megadásnak nevezzük, és bár most megismertük a használatát, hogy kipróbálhassunk bizonyos formázásokat, a gyakorlatban lehetőleg ne ezt használjuk, ugyanis ennek a megoldásnak számos hátránya van:

  • A style paraméter használatával a kód átláthatósága csökken, és nő a redundancia is, hiszen esetenként ugyanazt a kódot kell több helyre is beszúrnunk a kívánt hatás eléréséhez.
  • Emellett az arculat megváltoztatása roppant körülményes lesz, hiszen nagyon sok helyen kell átvezetni az esetleges módosításokat.
  • Összefoglalva: ezzel a megoldással nem tudjuk jól kihasználni a tartalom és megjelenés szétválasztásában rejlő hatalmas előnyöket.
Megjegyzés

A style elem használatának egy említésre méltó előnye van a mi szempontunkból, mégpedig az, hogy a tananyagunkban szereplő interaktív példákban is egyszerűen használható, ha egy adott elem kinézetének beállításával kísérletezünk.

Akkor mit használjunk helyette?

Vissza a tartalomjegyzékhez

Lapon belüli definíció, típusszelektor használattal

A CSS szabvány lehetővé teszi, hogy az egyes tulajdonságokat ne közvetlenül az adott elemnél adjuk meg, hanem a lap <head> részében, illetve akár külső stílusállományban is. Ekkor persze ügyesen meg kell fogalmaznunk, hogy egy adott szabályt milyen elemre vonatkozóan szeretnénk érvényesíteni. Később látni fogjuk, hogy rengeteg ilyen szabály van, most csak a legelemibbeket mutatjuk be.

Nézzünk egy olyan példát, ahol a lapon belül minden bekezdésnek egy adott betűcsaládot és igazítást szeretnénk beállítani. A kiválasztott betűcsalád legyen a monospace, az igazítás pedig a sorkizárt, vagyis justify.

Amennyiben inline stílus megadást alkalmaznánk, akkor a következőket kellene írnunk:

Forráskód
<p style="text-align:justify; font-family:fantasy;">Lorem ipsum dolor sit amet, ...</p>

Most azonban nem ezt tesszük. Nézzük az alábbi, kipróbálható példánkat.

Interaktív példa

Láthatjuk, hogy semelyik <p> tagnél nem szerepel a style paraméter, mégis mindegyik bekezdés sorkizárt lett, és monospace betűcsaláddal jelenik meg. Ez a HTML-fájl elején található stílusmegadás miatt van így.

Vegyük észre, hogy az oldal <head> részében elhelyeztünk egy <style type="text/css"></style> blokkot. Ebbe írhatóak a lapra vonatkozó stílusdefiníciók. Jelen esetben ebben ez szerepel:

Forráskód
p {
  text-align:justify;
  font-family:monospace;
}

Ez tipikus példája az úgynevezett típusszelektor használatának. Mivel a <p> tagre akartuk beállítani a szabályt, ezért a <p> tag nevét írtuk le szelektorként. Ezután kapcsos zárójelek között adtuk meg a tulajdonságokat, azokat, amelyek korábban a style paraméterben szerepeltek.

A fenti stílusmegadás hatására a lapon belül minden bekezdésre érvényes lett a megadott tulajdonság, vagyis nem is kellett a <p> tageket kiegészíteni különböző paraméterekkel.

Persze nem mindig ilyen egyszerű a dolgunk. Mi történik akkor, ha bizonyos bekezdéseket balra, másokat középre, illetve jobbra szeretnénk igazítani.

Ebben az esetben érdemes megismernünk az osztályokban (class) rejlő lehetőségeket.

Vissza a tartalomjegyzékhez

Osztályok használata

Lássunk erre is egy szemléltető, kipróbálható kódot.

Interaktív példa

Az osztály használata itt azt jelenti, hogy az egyes <p> tageket elláttuk azokkal az osztálynevekkel, amelyek utalnak a tulajdonságaikra. Ehhez a class paramétert használtuk, és utána megadtuk az adott osztályneveket (balra, kozepre, jobbra, fixszeles).

Önmagában ez még semmiféle eredményt nem hozna, a lap tetején létre kellett hoznunk a megfelelő osztályokra vonatkozó definíciókat is. Amint a példából is látható, a tag neve után egy pontot kellett raknunk, amelyet az osztály neve követ.

A p.jobbra {text-align:right;} szabály azt jelenti tehát, hogy amennyiben egy bekezdés a jobbra osztályba van sorolva a class="jobbra" paraméterrel, akkor legyen igaz rá, hogy jobbra van igazítva (text-align:right).

Ha jól megfigyeljük a példát, láthatjuk hogy egy taget akár több osztályba is besorolhatunk. Ehhez az osztályok neve között szóközt kell kihagynunk. Mivel a második bekezdést nem csak a jobbra osztályba, hanem a fixszeles osztályba is besoroltuk, ezért a jobbra igazítás mellett érvényes lesz rá az is, hogy fix szélességű betűtípussal jelenik meg.

A fenti példában a jobbra, balra, kozepre osztály csak a <p> elemre vonatkozik. Ha ezt nem akarjuk, akkor általános osztályt is létrehozhatunk. Ekkor a pontot követően meg kell adnunk az osztály nevét, a pont elé pedig nem kell írnunk semmit. Pl.:

.jobbra {text-align:right;}

A fenti példa egy jobbra nevű általános osztályt szemléltet. Ennek hatására már nem csak a <p> tagnél, hanem bármelyik más tagnél (ahol a jobbra igazításnak van értelme) használható lesz a jobbra osztály.

A tananyagunkban szereplő példákban gyakran fogunk találkozni ezzel a megadással.

Megjegyzés

Később a stíluslapokról szóló fejezetben látni fogjuk, hogy számos lehetőségünk lesz arra, hogy az elemeinket különböző szelektorok segítségével elérjük és megformázzuk. Például adott nyelvű (magyar, angol, német stb.) szöveget máshogy tudunk formázni, vagy akár azt is megtehetjük, hogy valahányadik elemet címezzünk meg.

Érdekesség

A fenti példákban a Lorem Ipsum kezdetű állatin szövegek segítségével mutattuk be az igazításokat. Ezzel a megoldással gyakran találkozhatunk akkor, ha a szöveg kinézetére, igazítására szeretné valaki a hangsúlyt fektetni, nem pedig az értelmére. Ilyen szöveget számos szolgáltatás segítségével generálhatunk, vannak köztük elég meglepőek is.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.