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.
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.
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.
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.
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:
<p style="text-align:center">Lorem ipsum dolor sit amet, ...</p>
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.
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:
<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:
<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.
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 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?
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:
<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.
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:
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.
Lássunk erre is egy szemléltető, kipróbálható kódot.
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.
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.
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.
  |
 |
 |
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.