HTML-stílus

Következzék a weblapok formázási lehetőségeinek, és a stíluslapok (CSS Cascading Style Sheets) nyelvének rövid bemutatása. Igyekszünk majd elkerülni a különböző gyártmányú és verziójú böngészők eltéréseiből adódó legtöbb problémát.

Alapok

Kezdjük a szöveg és a háttér színének megadásával! Ezt a <style> elem (element) használatával érjük el, mely a dokumentum-részek (tags) stílusát határozza meg.

A <style> és </style> közti rész a stílus-szabályok (style rules) speciális jelölései szerint íródott. Minden szabály egy címke (tag) nevével kezdődik, majd következnek a stílus-tulajdonságok (style properties), { és } jelek között. A fönti példában a szabály a szöveg <body> címkéjére (tag) vonatkozik. Ahogy látni fogjuk, ez a címke a weblap általános képének alapja.

Minden stílus-tulajdonság a tulajdonság (property) nevével kezdődik, melyet egy kettőspont után követ a hozzá tartozó érték (value). Több stílus-tulajdonság esetén pontosvesszővel kell őket elválasztani. A fönti példában két tulajdonság szerepel: "color" (szín), mely a szöveg színét adja meg, és "background" (háttér) amely a lap háttérszínét állítja be. Érdemes a pontosvesszőt mindig, még az utolsó tulajdonság után is használni!

A színek megadhatók névvel, vagy számokkal, pl. rgb(255, 204, 204). A három szám az adott szín piros (red), zöld (green), és kék (blue) összetevőit jelöli, a 0 és 255 közti tartományban. Használható hexadecimális (tizenhatos számrendszerbeli) jelölés is, itt a #FFCCCC jelölés jelenti ugyanazt a színt. További részletek később!

Megjegyezzük, hogy a <style> (stílus) elemnek a dokumentum fejlécében (head) a helye, a <title> elemmel együtt, nem kerülhet a szövegtörzsbe (body)!

Különálló stíluslapokra (style sheets) való hivatkozás

Ha várhatóan több weblapnál akarjuk használni ugyanazon stílusokat, érdemes lehet külön stíluslapot használni, melyre azután minden weblap hivatkozhat (link). Ennek módja a következő:

A <link> címke (tag) a dokumentum fejlécébe (head) kell kerüljön. A rel="stylesheet" rész szükséges ahhoz, hogy a böngésző-program fölismerje, hogy a href attribútum a stíluslap Web-címét (URL) adja meg.

A lap-margók (margins) megadása

A bal és jobb oldalon üresen maradó rész (lap-margók) megadására a "margin-left", és "margin-right" tulajdonságokkal van mód, pl.:

A fönti módon megadva mindkét oldalon az ablak szélességének 10%-a lesz a margó, természetesen követve a böngésző ablakának esetleges méret-változását.

Bal és jobb oldali behúzás (indent)

A címsorok jobb megkülönböztethetősége érdekében megtehetjük, hogy a szövegtörzs margójánál előrébb kezdjük őket, pl.:

A fönti példában három stílus-szabály (style rule) szerepel. Az első a szövegtörzsre (body), a második a legfontosabb címsor-stílusra (h1), a harmadik a többi címsor-stílusra (h2, h3, h4, h5 és h6) vonatkozik. A címsorokra vonatkozó margók a szövegtörzs margóihoz adódnak hozzá, így ha a címsorokat a szövegtörzs margójától balra szeretnénk kezdeni, negatív számokat kell használnunk.

A következő példákban szereplő stílus-szabályoknak (style rules) továbbra is a <style> és </style> elemek közt kell szerepelniük, a dokumentum fejlécében (head), vagy egy hivatkozott (linked) stíluslapon (style sheet).

A bekezdés fölötti és alatti távolság

A bekezdés fölötti és alatti távolságok böngészőbéli alapbeállításai általában megfelelők, de ha szükséges, természetesen módosíthatók.

A bekezdés fölötti távolság a "margin-top", a bekezdés alatti a "margin-bottom" jellemzővel (property) állítható. A h2 címsor esetében ezek módosítása a következőképp történhet:

Az em egy igen hasznos mértékegység, mivel a betűk méretével együtt változik: 1em egyenlő a betű (font) magasságával. Az em használatával betűmérettől függetlenül módunk van megőrizni a weblap általános kinézetét. Ez a módszer jóval biztosabb, mint a pixel-, vagy pont-méretekkel történő megadás, melyek problémákat okzhatnak, ha valakinek az olvasáshoz nagyméretű betűkre van szüksége.

A pont a szövegszerkesztők általánosan használt mértékegysége. Sajnos, ugyanaz a pont-méret a különböző böngészőkben különbözőképp jelenik meg; ezt a problémát küszöböli ki az em használata.

Ha csak egy bizonyos címsor fölötti távolságot akarjuk módosítani, érdemes létrehozni egy elnevezett stílust (named style) számára. Ez a "class" tulajdonsággal (attribute) tehető meg, pl.:

A szabály (rule) egy ponttal elválasztott címke-névvel (h2, tag name), és a csoport-névvel (class attribute) kezdődik. Ha a pont előtt, vagy mögött szóközt hagyunk, a szabály nem fog működni. Vannak más módok is egy elem stílusának megadására, de ez a legrugalmasabb.

Ha a címsort egy bekezdés követi, az címsor alsó margója (margin-bottom) és a bekezdés fölső margója (margin-top), nem adódik össze, ehelyett a két érték közül a nagyobb lesz érvényes. Ez minden természetesen érvényes minden címkére (tag)!

Első sor behúzása (first-line indent)

Néha az első sor beljebb kell kezdődjön, mint a többi. A következő stílus-szabály a regényekben szokásos bekezdés-formázást utánozza:

Ezzel a beállítással az első sor beljebb kezdődik (2em-mel), és a bekezdések közti távolság eltűnik (azaz 0 lesz, mely beállítástól tapasztalatom szerint a Netscape régebbi verziója tejesen megbokrosodik).

Betűtípusok

Ez a rész a a karakterek betűtípusának (font type), félkövér, dőlt, és egyéb stílusának (style), és méretének megadásával foglalkozik.

Betű stílusok (font styles)

Leggyakrabban a betűk dőltté (italic), vagy félkövérré (bold) alakítása fordul elő. A legtöbb böngésző az <em> címkét (tag) is dőltnek értelmezi. Ha ehelyett bold italic-ként (félkövér dőlt) akarjuk megjeleníteni, a <strong> címkét pedig bold uppercase-nek (félkövér nagybetűs):

Betűméret (font size)

A legtöbb böngésző növekvő betűnagysággal jelzi a a címsorok fontosságát. Ha módosítjuk az eredeti méreteket, azt kockáztathatjuk, hogy a szöveg túl kicsi lesz ahhoz, hogy kényelmesen olvasható legyen, különösen, ha pontban van megadva a méret. Ezért azután javasolt relatív betű-méreteket használni.

Az alábbi példa a normál szöveg százalékában adja meg a címsorok méretét:

A betűcsalád megadása

Számítanunk kell arra is, hogy kedvenc betűtípusunk nem lesz elérhető minden böngészőnél. Ennek megoldásaként több betűtípust (font) is felsorolhatunk, preferencia-sorrendben. Van egy pár gyűjtő-név, mely biztosan elérhető, így ajánlatos a lista végére ezek valamelyikét tenni: serif (talpas betű, mint a Times New Roman, vagy Courier), sans-serif (talp nélküli betű, mint az Arial), monospace (fix lépésközű, írógépszerű betű, mint a Courier), vagy cursive, ill. fantasy). Egy példa:

A fönti példában a fontos címsorok elsősorban Garamond betűvel jelennek meg, ha az nem érhető el, akkor Times New Roman betűvel, és ha az sincs, a böngésző alap serif fontjával. A bekezdések Verdana betűvel, vagy annak hiányában a a böngésző alap sans-serif fontjával.

A különböző fontok olvashatósága általában nem annyira a font magasságán, inkább a kisbetűk magasságán múlik. A Verdana fonthoz hasonló betűk ezért sokkal könnyebben olvashatóak, s ezért bekezdés-szövegként javasolt használatuk.

A fontokkal és margókkal kapcsolatos hibák elkerülése

Az első szabály, hogy ne használjunk olyan szöveget, mely nincs valamilyen (pl. <p>) blokk-szintű elembe ágyazva. Például:

A címsort követő szöveg néhány böngészőben könnyen lehet, hogy rossz betűtípussal és margókkal fog megjelenni, ezért ajánlatos az ilyen szöveget bekezdésbe (<p> tag) foglalni, például:

A második szabály, hogy mindig adjuk meg a elemeknél használandó betűtípust, mert ha csak méretét, vagy más tulajdonságát adjuk meg, néhány böngésző, "megfeledkezik" arról, hogy fix lépésközű fontot használjon.

A harmadik szabály, hogy adjuk meg a használni kívánt betűtípust a címsoroknál, <p>, és <ul> elemeknél, ha szándékunkban áll keretet (border), vagy hátteret (background) használni pl. a <div> elemnél. Ezzel kikerülhetjük a hibát, mikoris néhány böngésző megfeledkezik az öröklött betűcsalád használatáról, s ehelyett a saját beállításában szereplő alap-betűtípusra vált.

Szegély (border) és háttér (background) használata

Címsor, lista, bekezdés elemek, vagy ezek <div> elemmel keretezett csoportja körül egyszerűen megadható szegély, például:

div.box { border: solid; border-width: thin; width: 100% }

Megjegyezzük, hogy a "width" tulajdonság (property) nélkül néhány böngésző a jobb margót túlságosan jobbra helyezi! A föntieket azután pl. az alábbi módon használhatjuk:

<div class="box">
A <div> elem közti szöveg körül
egy vékony keret lesz.
</div>

A szegélyek típusválasztéka korlátozott: dotted, dashed, solid, double, groove, ridge, inset and outset. Ezek vastagságát a "border-width" tulajdonság (property) adja meg. Ennek értéke lehet thin, medium, thick, illetve egy szabott méret, pl. 0.1em. A szegély színét a "border-color" tulajdonság (property) adja meg.

Szép effektus lehet, ha egy keret hátterét megszínezzük, vagy egy képpel "kitapétázzuk". Ehhez a "background" tulajdonságot (property) használhatjuk. Egy <div> elemek közé zárt részt az alábbi módon festhetünk ki:

 div.color { background: rgb(204,204,255); padding: 0.5em; border: none; }

A szegélyre való hivatkozás nélkül néhány böngésző csak az egyes karakterek alatti részt színezi be. A "padding" tulajdonság (property) egy kis távolságot tart a színezett terület határa, és a beléfoglalt szöveg között. E távolság akár minden oldalon különböző is lehet a "padding-left", "padding-top", "padding-right", és "padding-bottom" tulajdonságok beállításával, pl.: padding-left: 1em

Ha nem minden oldalon akarunk szegélyt, minden szegélyt egymástól függetlenül is megadhatunk a "border-left", "border-top", "border-right", és "border-bottom" tulajdonságok, és a típust megadó megfelelő kiegészítők használatával:

ami azután a "figyelem" típusú (class) bekezdések bal oldalán piros vonalat jelenít meg.

Színek megadása

Itt beállítottuk a szöveg fekete, a háttér fehér alap-színét, és azt, hogy a <strong> elemek pirosok legyenek. Tizenhat szabványos szín-név van (lásd később), de használhatjuk az RGB színmegadást (a szín piros, zöld és kék összetevőinek megadása a 0-255 tartományba eső (decimális) számmal), így az rgb(255, 0, 0) megfelel a "red" nevű (piros) színnek. Használhatók hexadecimális számok is: ekkor a '#' karaktert követő hat hexadecimális számjegy adja meg az RGB színkódokat. Alább található egy, az RGB értékek és a hexadecimális színkódok közt oda-vissza konvertáló program.

Hivatkozások színei

A hypertext hivatkozások színeinek megadására is alkalmas CSS. Ekkor különböző színnel jelölhetők azok a hivatkozások, ahol még nem jártunk, ahol már igen, és az is amire épp kattintunk (sőt arra is megadhatunk külön színt, ha az egér épp a hivatkozás fölött jár).

Ha a hivatkozást (hypertext link) aláhúzás nélkül szeretnénk megjeleníteni, a "text-decoration" tulajdonság (property) értékét kell "none"-ra állítanunk:

Ez egy aláhúzás nélküli <a class="nincsvonal" href="egyuj.html">hivatkozás</a>

A legtöbb ember, ha egy weblapon aláhúzott szöveget lát, azt hivatkozásnak gondolja. Emiatt azután javasolt a hypertext hivatkozások (link) aláhúzását meghagyni. Hasonló meggondolásból érdemesebb általában a hivatkozások színeit is háborítatlanul hagyni, kivéve persze, ha a háttérszín nehezen olvashatóvá tenné a szöveget.

Színvakság

A színek használatánál jusson eszünkbe, hogy a népesség 5-10%-a szenved a színvakság valamilyen formájában. Ez nehézséget okozhat a piros és zöld, vagy a kék és sárga színek megkülönböztetésében. Néha előfordul a színérzékelés teljes hiánya is. Javasolt az olyan elő-, és háttérszín-kombinációk elkerülése, melyet a színvakok nehezen olvashatnak el.

Szín-nevek

Az alábbi táblázatból kiolvashatók a szabványos szín-nevek. Ez a tizenhat színt a HTML szabvány 3.2-es, és 4.01-es verziója definiálja, és ezek megfelelnek az személyi számítógépek (PC) alap VGA színeinek. A legtöbb böngésző elfogad további szín-neveket is, de ezek használata nem ajánlott.


black: #000000	green: #008000	maroon: #800000	navy: #000080
silver: #C0C0C0	lime: #00FF00	red: #FF0000	blue: #0000FF
gray: #808080	olive: #808000	purple: #800080	teal: #008080
white: #FFFFFF	yellow: #FFFF00	fuchsia: #FF00FF	aqua: #00FFFF

Hexadecimális színkódok

A "#FF9999" és hasonló számok a színeket hexadecimális RGB értékekkel adják meg: az '#' jel utáni első két karakter adja meg a piros (red), a következő kettő a zöld (green), az utolsó kettő a kék (blue) értéket (a tizenhatos számrendszerben a szokott 0-9 számjegy után az ABC első betűit használjuk a 10-től (A), 15-ig (F) terjedő számjegyek jelölésére). E számok értéke decimálisan 0 és 255 között van. A decimális értékek bármely hexadecimális számokat ismerő számológéppel (pl. a Windows részeként kapott kalkulátorral) hexadecimálissá konvertálhatók.

Böngésző-biztos színek

Az újabb számítógépek többmillió színű képeket is megjelenítenek, de sok régebbi szín-rendszer maximum 256-színt tud egyidejűleg megjeleníteni. Ilyenkor a böngészők megpróbálják a valódi színeket a rendelkezésre álló (fix) palettából kikeverni, és ez néha a színek zavaró mintázottságához vezethet.

A legtöbb böngésző támogatja az ún. böngésző-biztos (browser safe) palettát, mely hat egyenlő fokozatra osztja (és úgy kombinálja) a piros, zöld, és kék szín-összetevőket. Az összetevők megengedett értékei:

Ha a böngésző a böngésző-biztos palettát használja,a lap háttereként a legközelebbi paletta-színt fogja megjeleníteni, megelőzve ezzel a színek előbb említett (és főleg hátter-színek esetén zavaró) vibrálását. Viszont ha háttérszínként a palettán nem szereplő színt választunk, előfordulhat, hogy a háttér-szín megváltozik!

RGB	0	51	102	153	204	255
Hex	00	33	66	99	CC	FF

A böngésző-biztos paletta színeinek táblázata (Bob Stein elrendezésében):

CSS-t nem támogató böngészők

A régebbi böngészők (Netscape 4.0, és Internet Explorer 4.0 előtt) nem, vagy nem teljesen támogatták a CSS-t. Az ilyen böngészők számára is megadható a stílus, a HTML kódot magát használva.

Szín és háttér (background) beállítása

A háttérszín megadható a <body> címkével (tag). A címke a weblap megjelenítésre kerülő része elé kell kerüljön!. A következő példa a háttérszínt fehérre, a szövegszínt feketére állítja:

A hivatkozások (hypertext links) színei is állíthatók. Három tulajdonság (attribute) adható meg: "link" (a még nem látogatott hivatkozás színe) "vlink" (a már látogatott hivatkozás színe) "alink" (a linkre való kattintáskor használt szín). Egy példa, mely mindhármat megadja:

Beállítható az is, hogy a böngésző a lap hátterét "kitapétázza" egy adott web-címről vett képpel (a "background" tulajdonság (attribute) használatával):

Ekkor is érdemes megadni a háttérszínt, a "bgcolor" tulajdonsággal (attribute), számítva arra az esetre, ha a böngésző valamiért nem képes megjeleníteni a képet. Ellenőrizendő, hogy a választott színek nem akadályozzák-e az olvashatóságot. Egy extrém példa:

A legtöbb böngésző alapértelmezésként feketén jeleníti meg a szöveget, így végeredményben a lap fekete alapon fekete betűkel fog megjelenni! Sok ember szenved a színvakság valamely fajtájától, képtelen lévén bizonyos színek (rossz esetben a szöveg és a háttér színének) megkülönböztetésére.

Más probléma jelentkezhet a weblap nyomtatásakor. Sok böngésző ilyenkor figyelmen kívül hagyja a háttérszínt, ugyanakkor "elfogadja" a szövegszín beállítását. A szöveg fehérre állítása így gyakran üres lap nyomtatását eredményezheti!

Betűtípus (font), és annak mérete, színe

A <font> címke (tag) használható a betűtípus (font) beállítására, méretének és színének megadására. Az alábbi példa csak a színt állítja:

A "face" tulajdonság (attribute) adja meg a betűtípust. Elfogad több fontot is, preferencia-sorrendben, például:

A "size" tulajdonság (attribute) a font méretének megadására szolgál, értéke egy szám, 1-től 7-ig. Ha a szám előtt -, vagy + jel szerepel, az addigi font-mérethez képest vett értéket jelent; így a "+1" méret az addig használtnál eggyel nagyobb font-méretet jelenti, a "-1" értelemszerűen az eggyel kisebbet, például:

Itt is van néhány dolog, ami kerülendő! Ne válasszunk olyan színkombinációkat, melyek színvakok számára megnehezítik a szöveg elolvasását! Ne használjuk a <font> címkét (tag) normál szöveg címsorrá formázására (erre használjuk a h1-től h6-ig terjedő címkéket (tag), a címsor fontosságának megfelelően).

red:	Hex színkód:	Adjon meg egy RGB, vagy Hex értéket, majd nyomja meg a megfelelő gombot a konvertáláshoz!
green:
blue:

Stílus-gyakorlatok