 (Kereséshez használja a "keresés ezen a lapon" menüpontot vagy a [Ctrl+F] billenytűkombinációt!)E weboldal egy W3C
dokumentum alapján készült. Stílusok használataEz 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) nyelvét (CSS), valamint pusztán HTML-lel megvalósítható megoldásokat. Bemutatok itt több, a különböző típusú és verziószámú böngészők eltéréseiből adódó problémát. A stíluslapokkal való munkához elengedhetetlen, hogy forrásunkban a jelölések teljesen hibamentesek legyenek. Jó megoldás például a jelölési hibák automatikus javítására a HTML Tidy nevű alkalmazás használata. Úgyszolván "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 kijavítására, melyeket hanyag jelölési formákat használó szerkesztőeszközökkel készítettünk. A következőkben megismerjük, hogyan:
CSS alapokKezdjü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: <style type="text/css">
body { color: black; background: white; }
</style>
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) kell elhelyezni, a title elem mellett. Nem helyezhetjük a dokumentumtörzsbe (<body> és </body> között).  Hivatkozás egy külső stíluslapraHa 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: <link type="text/css" rel="stylesheet" href="stilus.css"> 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ásaA 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. <style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>
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ásaHogy 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. <style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>
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. Az első sor behúzásaNé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: p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
Ezzel behúztuk az első sort 2 em-mel és felülbíráljuk a bekezdésen belüli térközöket. A whitespace karakterek szabályozása fent és lentA 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 (nevezhetjük üreshely- vagy szünetkaraktereknek). 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: h2 { margin-top: 8em; margin-bottom: 3em; }
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. <h2 class="alfejezet">CSS alapok</h2> A stílusszabály az alábbi: h2.alfejezet { margin-top: 8em; margin-bottom: 3em; }
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. A font szabályozásaEz 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ílusaA 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: em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase; font-weight: bold; }
Ha hajlandóak vagyunk erre, a címsorokat kisbetűsre állíthatjuk: h2 { text-transform: lowercase; }
A betűméret megadásaA 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: h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }
A betűtípus beállításaElő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: body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }
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éseElső 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: <h2>Tavasz Wiltshire-ben</h2> A fák virágzanak, madárének és báránybégetés tölti be a mezőt. 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. <h2>Tavasz Wiltshire-ben</h2> <p>A fák virágzanak, madárének és báránybégetés tölti be a mezőt.</p> 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. pre { font-family: monospace; }
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á. . h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }
Keretek és hátterek hozzáadásaEgyszerű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"> E DIV elem tartalma 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), 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 (mint itt az épp látható) 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. p.valtozott {
padding-left: 0.2em;
border-left: solid;
border-right: none;
border-top: none;
border-bottom: none;
border-left-width: thin;
border-color: red;
}
ami egy vörös keretet jelenít meg a "valtozott" class-szal megadott bekezdések bal oldalán. Színek megadásaA 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ő: body {
color: black;
background: white;
}
strong { color: red }
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ásaA 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. :link { color: rgb(0, 0, 153) } /* meg nem tekintett hivatkozásokhoz */
:visited { color: rgb(153, 0, 153) } /* megtekintett hivatkozásokhoz */
:active { color: rgb(255, 0, 102) } /* ha a hivatkozásra kattintunk */
:hover { color: rgb(0, 96, 255) } /* ha az egér hivatkozás fölött van */
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.egyszeru { text-decoration: none }
ami eltünteti a hivatkozás aláhúzását, a következőképpen: ez egy <a class="egyszeru" href="mi.html">nem aláhúzott link</a> 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ágMikor 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). 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ínekA 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). 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.
Ezért a "#800080" színérték ugyanaz, mint a "purple". Hexadecimális színértékekA "#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ínekAz ú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. Nézzük meg, milyen értékeket vett fel a vörös, zöld és kék:
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.
Színgyűjtemények a böngésző-biztos palettához szabadon elérhetők sok népszerű grafikus csomaghoz az alábbi helyről: http://www.visibone.com/. 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ásaSzí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: <body bgcolor="white" text="black"> 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ó:
Itt egy példa, ami mindhármat állítja: <body bgcolor="white" text="black" link="navy" vlink="maroon" alink="red"> 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. <body bgcolor="white" background="mintazat.jpeg" text="black" link="navy" vlink="maroon" alink="red"> 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: <body bgcolor="black"> 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: <body bgcolor="black" text="white"> A bgcolor attribútum táblázat-cellákra is alkalmazható, pl. <table border="0" cellpadding="5"> <tr> <td bgcolor="yellow">színezett táblázat-cella</td> </tr> </table> 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ásaA 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: Ennek a mondatnak van egy sárga <font color="yellow">szava</font>. A face attribútum a betűtípus megadására használható. A betűtípusokat precedencia-sorrendben felsorolhatjuk, pl. <font face="Garamond, Times New Roman">some text ...</font> 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. <font size="+1" color="maroon" face="Garamond, Times New Roman">egy kis szöveg ...</font> 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 tag-ekkel kell megadni, a címsor fontosságának megfelelően. További információkA CSS-ről és az azt támogató eszközökről a W3C home page for CSS oldalon kaphatunk több információt. Itt találhatók mutatók HTML és CSS-könyvekre, például az Addison Wesley által 1998-ban kiadott "Raggett on HTML 4"-re. 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. Ezel a művel a CSS-ben jobban elmélyedhet, és maguknak a CSS-eknek a felépítésével is megismerkedhet.  |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Ha valamelyik URL (webcím) tartósan nem elérhető, köszönettel vesszük, ha jelzi.
