| Vissza a dokkokhoz |



Budapesti helyi idő

(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.
Az eredeti dokumentum az alábbi címen található: http://www.w3.org/MarkUp/Guide/.

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) 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 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:

<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).

vissza a tartalom felsorolásához

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:

<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.

vissza a tartalom felsorolásához

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.

<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.

vissza a tartalom felsorolásához

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.

<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á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:

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.

vissza a tartalom felsorolásához

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 (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.

vissza a tartalom felsorolásához

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:

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; }
vissza a tartalom felsorolásához

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:

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }
vissza a tartalom felsorolásához

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:

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.

vissza a tartalom felsorolásához

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:

<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; }
vissza a tartalom felsorolásához

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">
 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.

vissza a tartalom felsorolásához

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ő:

  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.

vissza a tartalom felsorolásához

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.

  :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á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). 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.

vissza a tartalom felsorolásához

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). 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"

Ezért a "#800080" színérték ugyanaz, mint a "purple".

vissza a tartalom felsorolásához

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.

Adja meg az RGB vagy hexa értéket és nyomja meg a megfelelő gombot
vörös: Hexa színérték
zöld:
kék:
vissza a tartalom felsorolásához

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.

Nézzük meg, milyen értékeket vett fel a vörös, zöld és kék:

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

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.

FFF
FFF
CCC
CCC
999
999
666
666
333
333
000
000
FFC
C00
FF9
900
FF6
600
FF3
300
99C
C00
CC9
900
FFC
C33
FFC
C66
FF9
966
FF6
633
CC3
300
CC0
033
CCF
F00
CCF
F33
333
300
666
600
999
900
CCC
C00
FFF
F00
CC9
933
CC6
633
330
000
660
000
990
000
CC0
000
FF0
000
FF3
366
FF0
033
99F
F00
CCF
F66
99C
C33
666
633
999
933
CCC
C33
FFF
F33
996
600
993
300
663
333
993
333
CC3
333
FF3
333
CC3
366
FF6
699
FF0
066
66F
F00
99F
F66
66C
C33
669
900
999
966
CCC
C66
FFF
F66
996
633
663
300
996
666
CC6
666
FF6
666
990
033
CC3
399
FF6
6CC
FF0
099
33F
F00
66F
F33
339
900
66C
C00
99F
F33
CCC
C99
FFF
F99
CC9
966
CC6
600
CC9
999
FF9
999
FF3
399
CC0
066
990
066
FF3
3CC
FF0
0CC
00C
C00
33C
C00
336
600
669
933
99C
C66
CCF
F99
FFF
FCC
FFC
C99
FF9
933
FFC
CCC
FF9
9CC
CC6
699
993
366
660
033
CC0
099
330
033
33C
C33
66C
C66
00F
F00
33F
F33
66F
F66
99F
F99
CCF
FCC
CC9
9CC
996
699
993
399
990
099
663
366
660
066
006
600
336
633
009
900
339
933
669
966
99C
C99
FFC
CFF
FF9
9FF
FF6
6FF
FF3
3FF
FF0
0FF
CC6
6CC
CC3
3CC
003
300
00C
C33
006
633
339
966
66C
C99
99F
FCC
CCF
FFF
339
9FF
99C
CFF
CCC
CFF
CC9
9FF
996
6CC
663
399
330
066
990
0CC
CC0
0CC
00F
F33
33F
F66
009
933
00C
C66
33F
F99
99F
FFF
99C
CCC
006
6CC
669
9CC
999
9FF
999
9CC
993
3FF
660
0CC
660
099
CC3
3FF
CC0
0FF
00F
F66
66F
F99
33C
C66
009
966
66F
FFF
66C
CCC
669
999
003
366
336
699
666
6FF
666
6CC
666
699
330
099
993
3CC
CC6
6FF
990
0FF
00F
F99
66F
FCC
33C
C99
33F
FFF
33C
CCC
339
999
336
666
006
699
003
399
333
3FF
333
3CC
333
399
333
366
663
3CC
996
6FF
660
0FF
00F
FCC
33F
FCC
00F
FFF
00C
CCC
009
999
006
666
003
333
339
9CC
336
6CC
000
0FF
000
0CC
000
099
000
066
000
033
663
3FF
330
0FF
00C
C99
009
9CC
33C
CFF
66C
CFF
669
9FF
336
6FF
003
3CC
330
0CC
00C
CFF
009
9FF
006
6FF
003
3FF

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/.

vissza a tartalom felsorolásához

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.

vissza a tartalom felsorolásához

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:

<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ó:

  • link a meg nem tekintett hivatkozásokhoz
  • vlink a megtekintett hivatkozásokhoz
  • alink az a szín, melyet akkor használunk, ha a hivatkozásra kattintunk

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.

vissza a tartalom felsorolásához

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:

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.

vissza a tartalom felsorolásához

További információk

A 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.







| Vissza a dokktopra | Vissza a webkikötő elejére | Vissza a kezdőlapra | Webtérképre |

Figyelem! Ha valamelyik URL (webcím) tartósan nem elérhető, köszönettel vesszük, ha jelzi.


 e-mail: ginprofessional@mail.datanet.hu
Made: 2004.05.30. © GIN Professional Kft (www.ginprofessional.hu) / Gulyás István. All rights reserved.

 
  Látogatók száma:       




Budapesti helyi idő




Kattints a hirdetésre
Kattints ide



 










  


LINKTAR.HU eXTReMe Tracker
abo-service24.de

xtrastats free counter