Bevezetés a HTML-be - Stílusok használata

Az eredeti dokumentum:: Getting started with HTML; www.w3.org/MarkUp/Guide/
A lefordított dokumentum:: www.w3c.hu/forditasok/sikos/bevezet/style.htm)
Magyar fordítás (Hungarian translation):: Dr. Sikos László (leslie [kukac] lesliesikos [pont] com)
A fordítás státusa:: A W3C dokumentum fordítása a Szerző, Dave Raggett írásbeli engedélyével, a fordításokra előírt formai szabályok szerint, lelkiismeretes szakfordítói munkával készült. Ennek ellenére nem lehet kizárni, hogy hibák maradtak a fordításban. Emellett a magyar fordítás nem is követi feltétlenül az eredeti angol nyelvű dokumentumon végrehajtott jövőbeli változtatásokat. Ezért a fordítás nem tekinthető normatív W3C dokumentumnak.
Megjegyzések a fordításhoz:: 1.) A fordítással kapcsolatos olvasói észrevételeket a fordító e-mail címére továbbíthatja.
2.) A fordító a saját megjegyzéseit feltűnően elkülöníti a dokumentum szövegében.
3.) A fordítás során az eredeti dokumentum forráskódja nem lett megváltoztatva.

Stílusok használata

Ez a dokumentum egy rövid útmutató weblapjaink stílusokkal való ellátásához. Bemutatjuk, hogyan használhatjuk a W3C Cascading Style Sheets [lépcsőzetes stíluslapok - a ford.] nyelvét (CSS), valamint pusztán HTML-lel megvalósítható alternatívákat. Az áttekintés tisztázza a különböző típusú és verziószámú böngészők eltéréseiből adódó problémák nagy részét.

A stíluslapokkal való munkához elengedhetetlen, hogy forrásunkban a jelölések teljesen hibamentesek legyenek. Egy kényelmes megoldás a jelölési hibák automatikus javítására a HTML Tidy nevű alkalmazás. Mintegy "kitakarítja" a jelöléseket, könnyebbé téve ezzel az olvasást és a szerkesztést. Ajánlom a Tidy program rendszeres futtatását minden olyan kód esetében, melyet szerkesztünk. A Tidy nagyon hatékony olyan jelölések kipucolásában, melyeket hanyag jelölési formákat használó szerkesztőeszközökkel készítettünk.

CSS alapok

Kezdjük a szöveg- és háttérszín beállításával. Ezt a STYLE elem használatával tehetjük meg, így adva stílus-tulajdonságokat a documentum tag-jeinek:

A <style> és </style> közötti rész a stílusszabályok különleges jelölése szerint van megírva. Minden szabály egy tag-névvel kezdődik, melyet kapcsos zárójelek között a stílus-tulajdonságok listája követ. Ebben a példában a szabály a body tag-re vonatkozik. Mint majd látni fogjuk, a body tag biztosítja weblapunk általános megjelenését.

Minden stílus-tulajdonság a tulajdonság nevével kezdődik, majd egy kettőspont, végül a tulajdonság értéke. Ha egynél több stílus-tulajdonság van a listában, az egyes tulajdonságokat pontosvesszővel kell elválasztani egymástól. Ebben a példában két tulajdonság van - "color", ami a szöveg színét állítja be és "background", ami az oldal háttérszínét határozza meg. Javaslom, hogy mindig tegyük ki a pontosvesszőt az utolsó tulajdonság után.

A színeket akár névvel, akár numerikus értékekkel meg lehet adni, például rgb(255, 204, 204), ami egyfajta rózsaszín. A 3 szám a vörös, zöld és kék színarányt adja meg, mindegyiket a 0-255 tartományban. Használhatunk hexadecimális jelölést is, a fenti szín például az alábbi módon is megadható: #FFCCCC. A színekről részletesebben egy későbbi részben olvashatunk.

Megjegyzendő, hogy a style elemet a dokumentum fej részében [a <head> és </head> között - a ford.] kell elhelyezni, a title elem mellett. Nem helyezhetjük a dokumentumtörzsbe [<body> és </body> között - a ford.].

Hivatkozás egy külső stíluslapra

Ha ugyanazt a stílust számos weblapon szeretnénk használni, erősen ajánlott a külső stíluslap használata, melyet aztán minden dokumentumban meghívunk. Ezt a következőképpen tehetjük meg:

A LINK tag-et a dokumentum fej részében kell elhelyezni. A rel attribútumot "stylesheet" értékre kell állítani, így tudatva a böngészővel, hogy a href attribútum által megadott webcím (URL) egy stíluslapra mutat.

Az oldalmargók beállítása

A weblapok sokkal jobban néznek ki, ha nagyobb margókat definiálunk. A bal és a jobb margókat a "margin-left" és a "margin-right" tulajdonságokkal állíthatjuk be, pl.

Ezzel mindkét margót az ablakszélesség 10%-ára állítottuk, így a margók mérete változik, ha átméretezzük a böngésző ablakát.

Bal és jobb behúzás megadása

Hogy a címsorok jobban elkülönüljenek a szövegtől, a body-nak megadott margón belül is kezdhetjük őket, pl.

Ebben a példában három stílusszabály van. Egy a body-nak, egy a h1-nek (mely a legfontosabb címsorok kiírásához használt) és egy a többi címsornak (h2, h3, h4, h5 és h6). A címsorok margói hozzáadódnak a body margóihoz. Negatív értékekkel elérhetjük, hogy a címsorok a body-nak megadott margók bal oldalán kezdődjenek.

A következő részekben a példák egyes stílusszabályait a dokumentum fej részébe (ha van) vagy egy külső stíluslapban kell elhelyezni.

A whitespace karakterek szabályozása fent és lent

A böngészők általában egészen jól jelenítik meg a címsorok, bekezdések stb. előtti és utáni whitespace karaktereket. Két okunk is van azonban arra, hogy megváltoztassuk ezeket: ha egy meghatározott címsor vagy bekezdés előtt nagyobb térközt szeretnénk hagyni, illetve ha pontosan szeretnénk szabályozni az általános térköz-kihagyásokat.

A "margin-top" tulajdonság a felső térközt, a "margin-bottom" az alsó térközt adja meg. Minden h2 címsorra ezt alkalmazva:

Az em nagyon hasznos egység, mert a betű méretével változik. Egy em a betű magassága. Az em-ek használatával megőrizhetjük a weblap általános kinézetét, függetlenül a betűmérettől. Ez sokkal biztosabb megoldás, mint más alternatívák (például a képpontok), melyek problémát okozhatnak az olyan felhasználók számára, akik nagyméretű betűket hasznának a szöveg könnyebb olvasásához.

A képpontos megadást általában a szövegszerkesztésben használják, pl. 10 képpontos szöveg (10pt). Sajnos ugyanaz a pontméret az egyes böngészőkön más és más formában jelenik meg. Ami az egyik böngészőben szép kinézetet kölcsönöz, ugyanaz egy másikban már olvashatatlan! Az em-es megadást alkalmazva elkerülhetjük az efféle problémákat.

Egy meghatározott címsor fölötti térköz megadásához létre kell hoznunk egy elnevezett stílust a címsorhoz. Ez a forrásban a class attribútummal jelölhetjük, pl.

A szabály a tag nevével kezdődik, ezt egy pont követi, majd a class attribútum értéke. Legyünk óvatosak, nehogy a pont elé vagy az után szóköz kerüljön! Ha ezt tesszük, a szabály nem fog működni. Vannak más lehetőségek is egy adott elem stílusának megadására, de a class attribútum a legrugalmasabb.

Ha a címsort egy bekezdés követi, a címsor margin-bottom értéke nem adódik hozzá a bekezdés margin-top értékéhez. Ehelyett a két érték közül a nagyobb adja meg a címsor és a bekezdés közötti térközt. Ez a logika határozza meg a margin-top és a margin-bottom esetén is a térköz nagyságát, függetlenül a tag-ektől.

Az első sor behúzása

Néha szükségünk lehet minden bekezdés első sorának behúzására. A következő stílusszabály a regényekben szokásos bekezdés-megjelenítést utánozza:

Ezzel behúztuk az első sort 2 em-mel és felülbíráljuk a bekezdésen belüli térközöket.

A font szabályozása

Ez a fejezet azt magyarázza el, hogyan állíthatjuk be a betűtípust és annak méretét, valamint hogyan használhatunk dőlt, félkövér és egyéb stílusokat.

A betűtípus stílusa

A leggyakrabban alkalmazott stílus a dőlt és a félkövér. A legtöbb böngésző az em tag-et dőlten, a strong tag-et félkövéren jeleníti meg. Tegyük fel, hogy az em-et félkövér dőlten, a strong-ot félkövér nagybetűsen szeretnénk megjeleníteni:

A betűméret megadása

A legtöbb böngésző a fontosabb címsorokat nagyobb betűmérettel jeleníti meg. Ha felülbíráljuk az alapértelmezett méretet, fennáll a veszélye, hogy túl kicsi lesz a betű, ezáltal nem lesz olvasható, különösen, ha képpontokat használunk a megadáshoz. Ezért célszerű a betűméreteket relatív módon meghatározni.

Ez a példa a normál szöveghez képest relatívan, százalékban adja meg a betűméreteket:

A betűtípus beállítása

Előfordulhat, hogy kedvenc betűtípusunk nem minden böngészőben érhető el. Ezért lehetőség van több betűtípus felsorolására, melyet előnyben részesítési sorrendben kell megadni. Az általános betűtípus-neveknek van egy rövid listája, melyek garantáltan elérhetők, tehát célszerű a sorunkat az alábbiak valamelyikével zárni: serif, sans-serif, cursive, fantasy vagy monospace, például:

Ebben a példában a fontos címsorok lehetőleg Garamond betűtípussal lesznek megjelenítve, ha ez a betűtípus nem áll rendelkezésre, akkor Times New Roman betűtípussal, ha ez sem elérhető, akkor pedig a serif-fel. A bekezdések szövege lehetőleg Verdana betűtípussal jelenik meg, ha ez nem elérhető, akkor sans-serif-fel.

A különböző betűtípusok olvashatósága általában jobban függ a kisbetűk magasságától, mint magától a betűmérettől. Az olyan betűtípusok, mint a Verdana, sokkal jobban olvashatók, mint a "Times New Roman"-hoz hasonlóak és ezért ajánlottak a bekezdések szövegéhez.

A betűtípusok és margók problémáinak elkerülése

Első szabályom az, hogy a body szintjén ne helyezzünk el olyan szöveget, mely nincsen olyan blokkszintű elembe ágyazva, mint például a p. Például:

A címsor utáni szöveg magában hordozza annak a veszélyét, hogy néhány böngésző rossz betűtípussal és margókkal jelenítse meg. Ezért ajánlott minden ilyen szöveget bekezdésekbe zárni, pl.

A második szabályom megadja a pre elemenek a betűtípusát, mivel számos böngésző a fix szélességű betűka használatát, ha a pre-hez betűméret és egyéb tulajdonságokat állítunk.

A harmadik szabályom, hogy a címsoroknak, a p és ul elemeknek megadom a betűtípusát, ha olyan elemeknek szeretném állítani a keretjét vagy a hátterét, mint a div. Ezzel elhárítható az a hiba, hogy a böngésző elfelejti használni az örökölt betűtípust, ahelyett, hogy a böngésző tulajdonságaiban beállított alapértelmezett betűtípust használná. .

Keretek és hátterek hozzáadása

Egyszerűen tehetünk egy keretet egy címsor, felsorolás, bekezdés vagy ezek div elemmel bezárt csoportja köré. Például:

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

Megjegyzendő, hogy a "width" tulajdonság nélkül néhány böngésző a jobb margót túlságosan jobbra helyezi. Ennek forrásbeli jelölése:

<div class="box">
Az ezen DIV elemen belüli tartalom egy vékony egyenessel lesz körülkerítve.
</div>

A kerettípusok korlátozott választéka áll rendelkezésünkre: pontozott, szaggatott vonalas, folytonos, dupla vastag, barázdált, hullámos, szegélyezett. A border-width tulajdonság határozza meg a szélességet. értéke lehet thin, medium és thick [vékony, közepes, vastag - a ford.], valamint egy meghatározott szélesség is, pl. 0.1em. A border-color tulajdonság segítségével állíthatjuk a színt.

Egy aranyos effektust érhetünk el, ha a téglalapnak háttérszínt vagy ismétlődő háttérképet adunk. Ehhez a background tulajdonságot kell használni. Egy div-et tartalmazó téglalap kitöltése:

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

A border tulajdonság explicit definíciója nélkül némely böngészők csak a karakterek háttérszínét fogja kifesteni. A padding tulajdonság néhány szóközt tesz a színezett terület és a benne levő szöveg közé.

A bal, felső, jobb és alsó kitöltéshez különböző értékeket adhatunk meg a padding-left, padding-top, padding-right és a padding-bottom tulajdonságokkal, pl. padding-left: 1em.

Tegyük fel, hogy csak az egyik oldalon szeretnénk keretet megjeleníteni. A keret-tulajdonságokat egyesével állíthatjuk a border-left, border-top, border-right és border-bottom tulajdonság-csoport és a megfelelő toldalék együttes megadásával: style, width vagy color, pl.

ami egy vörös keretet jelenít meg a "valtozott" class-szal megadott bekezdések bal oldalán.

Színek megadása

A színbeállításhoz használt példák közül több is feltűnt már a korábbi fejezetekben. Itt van egy kis emlékeztető:

Ezzel az alapértelmezést meghagyjuk fekete szövegszínre és fehér háttérre, de a strong elemek vörös színt kapnak. 16 standard színnév létezik, melyek magyarázatával hamarosan megismerkedünk. A vörös, zöld és kék színek decimális értékeit is használhatjuk, ahol minden érték a 0-255 tartományban van, pl. rgb(255, 0, 0) ugyanaz, mintha az írnánk, hogy red. Hexa értékeket is használhatunk, ezeket a '#' karakterrel kell bevezetni, melyet hat hexadecimális számjegy követ. Oldalamon lesz egy kétirányú konvertáló, mely lehetővé teszi, hogy RGB-ből hexába és fordítva konvertáljuk a színértékeket.

A hivatkozások színének megadása

A CSS-sel a hivatkozások színét is megadhatjuk, más színnel megjelenítve a még nem megtekintett hivatkozást, a már megtekintettet és azt, amelyikre aktuálisan kattintunk. Még ahhoz is határozhatunk meg színt, ha az egérkurzor a link fölé kerül.

Néha úgy akarunk megjeleníteni egy hivatkozást, hogy az ne legyen aláhúzva. Ez a text-decoration tulajdonság none-ra állításával érhetjük el, például:

A legtöbben, ha aláhúzott szöveget látnak egy weblapon, úgy gondolják, az egy hiperhivatkozás része. Ezért tanácsos a hiperhivatkozások aláhúzását meghagyni. Hasonlsó a helyzet a hivatkozások színével is, az aláhúzott, kék színű szövegtől a legtöbben azt várják, hogy hivatkozás legyen. Ezért célszerű a hivatkozások színét nem megváltoztatni, hacsak a háttérszín miatt a szöveg nehezen olvasható nem lenne.

Színvakság

Mikor színeket használunk, nem szabad elfelejtenünk, hogy az emberek 5-10%-a valamiféle színvakságban szenved. Ez a tény megnehezítheti a vörös és a zöld vagy a sárga és a kék megkülönböztetését [ezt nálunk színtévesztésnek nevezik - a ford.]. Ritka esetben az előfordulhat, hogy egyáltalán nem lát az illető színeket. Ezért célszerű az olyan előtér/háttér színkombinációkat mellőzni, melyek a színvak emberek számára nehezen olvasható szövegeket eredményeznének.

Elnevezett színek

A szín-nevek alapvető halmaza: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white és yellow [vízkék, fekete, kék, fukszia, szürke, zöld, borostyánzöld, gesztenyebarna, sötétkék, olajzöld, bíbor, vörös, ezüst, pávakék, fehér és sárga - a ford.]. Ez a 16 szín van definiálva a 3.2-es és a 4.01-es HTML-ben, és ez megfelel a PC-k alapvető VGA színhalmazának. A legtöbb böngésző több színnevet is ismer, de ezek használata nem ajánlott.

**Szín-nevek és RGB értékek**
	fekete = "#000000"		zöld = "#008000"
	ezüst = "#C0C0C0"		borostyánzöld = "#00FF00"
	szürke = "#808080"		olajzöld = "#808000"
	fehér = "#FFFFFF"		sárga = "#FFFF00"
	gesztenyebarna = "#800000"		sötétkék = "#000080"
	vörös = "#FF0000"		kék = "#0000FF"
	bíbor = "#800080"		pávakék = "#008080"
	fukszia = "#FF00FF"		vízkék = "#00FFFF"

Hexadecimális színértékek

A "#FF9999"-hez hasonló értékek a vörös, zöld és kék színeket adják meg hexadecimális számokkal. A #-ot követő első két karakter a vörös, a következő kettő a zöld, az utolsó kettő a kék színkomponenst határozzák meg. Ezen számok decimális számrendszerbeli megfelelője mindig 0 és 255 közötti. Ha decimálisan tudjuk a számot, átkonvertálhatjuk egy számológéppel, például a Windows Számológéppel.

Böngésző-biztos színek

Az új számítógépek több ezer vagy millió színt támogatnak, de sok régebbi színes rendszer csak 256 színt tud egyidejűleg megjeleníteni. Ehhez alkalmazkodva ezek a böngészők fix palettáról származó színekkel dolgoznak. Ennek eredménye gyakran egy színfoltként látható, amikor a böngésző a kép minden pontján megpróbál valódi színeket alkalmazni. Ez a probléma a régi gépek újabbakra cserélésével fokozatosan megszűnik.

A legtöbb böngésző támogatja az úgynevezett "böngésző-biztos" palettát. Ez 6 vörös, zöld és kék, valamint ezek kombinációjából álló, azonos távolságra levő árnyalatot használ. Ha erről a palettáról választunk színeket, a folt-effektust elkerülhetjük. Ez különösen a képek háttérterületeinél hasznos.

Ha a böngésző a böngésző-biztos palettát használja, az oldal háttere a palettán legközelebbi színt használja. Ha az oldal háttérszínét olyan színre állítjuk, ami nem szerepel a böngésző-biztos palettában, fennáll annak a veszélye, hogy a háttérnek különböző színe lesz attól függően, hogy a számítógép indexelt vagy valódi színekkel dolgozik-e.

Az alábbi táblázat összefoglalja a böngésző-biztos színeket és azok hexa-értékét. Külön köszönet Bob Stein-nek ezért az elrendezésért.

Mi van a CSS-t nem támogató böngészőkkel?

Régebbi böngészők (a Netscape 4.0 és az Internet Explorer 4.0 előtti verziók) nem támogatják a CSS-t vagy nem megfelelően értelmezik. Ezen böngészőkben is használhatunk azonban stílusokat, mégpedig magából a HTML-ből.

A szín és a háttér állítása

Színt a BODY tag használatával állíthatunk. A következő példa a háttérszínt fehérre állítja, a szövegszínt pedig feketére:

A BODY elemet a weblap látható tartalma elé kell helyezni a forrásban, pl. az első címsor elé. A hiperhivatkozások színe is állítható. Ehhez három attribútum használható:

A böngészővel kitapétáztathatjuk a hátteret egy képpel is. Ehhez a background attribútumban meg kell adni a kép webcímét, pl.

Jó ötlet, ha a bgcolor-ral megadunk egy háttérszínt is arra az esetre, ha a kép nem lenne elérhető. Ellenőrizni kell, hogy a megadott színek nem okoznak-e olvashatósági problémákat. Egyébként a következőt is tehetjük:

A legtöbb böngésző a szöveget alapértelmezésben feketével jeleníti meg. A végeredmény az lesz, hogy fekete szöveget jelenítünk meg fekete háttéren! Sokan egyfajta színvakságban szenvednek, például az olajzöldet néhányan barnának láthatják.

Egy másik probléma lehet, ha megpróbáljuk kinyomtatni a weblapot. Sok böngésző figyelmen kívül hagyja a háttérszínt, de nem úgy a szövegszínt. A szöveget fehérre állítva gyakran egy üres oldal kinyomtatását eredményezi, így az alábbi megoldás nem javasolt:

A táblázatok számos megjelenési effektus eléréséhez használhatók és ezt széles körben ki is használják. A jövőben ezt a szabályt kiszorítják a stíluslapok, melyekkel még kevesebb erőkifejtéssel lehet precíziós megjelenést biztosítani.

A betűtípus, valamint méretének és színének megadása

A FONT tag használható a betűtípus kiválasztására, méretének és színének beállítására. Ez a példa egyszerűen csak beállítja a színt:

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

A face attribútum a betűtípus megadására használható. A betűtípusokat precedencia-sorrendben felsorolhatjuk, pl.

A size attribútummal a betű mérete adható meg 1 és 6 közötti számokkal. Ha egy - vagy + előjelet teszünk a szám elé, az relatív értékként lesz értelmezve. Használjuk a size="+1" megadást, ha 1-gyel nagyobb betűméretre van szükség, és a size="-1" megadást, ha 1-gyel kisebbre, pl.

Sok dolgot célszerű kerülnünk: ne válasszunk olyan színkombinációkat, melyek nehezen olvashatók a színvakok számára. Ne használjunk olyan betűtípust, mely az általános szövegrészeket a címsorokhoz hasonlóvá teszi, melyeket mindig a h1-h6 tagekkel kell megadni, a címsor fontosságának megfelelően.

További információk

A CSS-ről és az azt támogató eszközökről a W3C CSS oldalán kaphatunk több információt. Itt találhatók HTML és CSS könyv-referenciák, mint például az Addison Wesley által 1998-ban kiadott "Raggett on HTML 4". A CSS sokkal részletesebb magyarázata a "Cascading Style Sheets" oldalon található, melyet Håkon Wium Lie és Bert Bos készített, és az Addison Wesley gondozásában jelent meg 1999-ben. Ezzel a művel a CSS-ben jobban elmélyedhet, és magának a CSS-eknek a felépítésével is megismerkedhet.

Tervezem jelen útmutató más oldalakkal történő kibővítését is, melyekben a CSS pozicionálásról, a nyomtatásról és az akusztikus stíluslapokról írnék.

vörös:		Hexa színérték
zöld:
kék: