16. Stíluslapok

A HTML nyelv fõként a tartalom leírására szolgál, irányelveket ad a böngészõknek a megjelenítésre vonatkozva, azonban teljességgel elképzelhetõ, hogy a böngészõprogramnak irányúló TAG teljesen mást jelenit meg a képernyõn. Ezért született meg az igény a stíluslapokra, amely pont a HTML kiegészítõje: csak a megjelenítésre tartalmaz irányelveket. Fontos tudni azt, hogy már az Internet Explorer a 3.0-s, a Netscape Navigator a 4.0-s verziója is tudja kezeli a stíluslapokat.

Módszerek

A stílus leírását különbözõképpen is beágyazható a dokumentumba:

A <link> TAG segítségével:
( link = hivatkozás). A rel paraméter segítségével adjuk meg, hogy stíluslapról van szó, így értéke természetesen "StyleSheet" ( style sheet = stílus lap); a type paraméter értéként viszont "text/CSS" -re kell állítani, ezzel jelezve, hogy CSS-ben történik a programozás ( type = tipus)! A title paraméterbe beírhatunk egy címet a stíluslapról, amelyet a böngészõk pl. arra használhatnak, hogy a felhasználó választhasson, hogy az oldalad mondjuk "zöld-sárga" vagy "kék-barna" stílusban jelenjen meg. Természetesen a href paraméter tartalmazza a stíluslap fájljának címét. De ennél egyszerûbb, de kissé favágó módszer a következõ.

<html>
<head>
<title>Css fájlból kiszedett stíluselemek</title>
<link rel="StyleSheet" type="text/CSS" href="stilus.css" title="Kék színek">
</head>
<body>
<h1>Csatolt CSS példa</h1>
<p> Ez a példa a stilus.css nevû stíluslapot használja az oldal megjelenítésére. </p>
</body>
</html>

VÉGEREDMÉNY

stilus.css:

body {background: #BBDBF4; color: #1863A0}
p {color: #1863A0;font-size: 12pt;font-family: Verdana;font-weight: bold;margin-left: 3%}
h1 {color: #FFB003; font-family: Arial;}

A <head> részen belül, közvetlenül a <style> TAG-gel:
Ennek a módszernek a lényege, hogy a <head> </head> közé ágyazzuk be magát a stíluslapot. Nagy hátránya az elõzõ módszerrel szemben, hogy elvész a stíluslapok nyújtotta dinamizmus: ha meg szeretnéd változtatni az általad tervezett oldal arculatál, bizony mindegyik oldalt végig kell járnod a stílusok átírásához.

<html>
<head>
<title>A stílust leíró rész a <head></head> között</title>
<style type="text/css" title="Fakó színek">
body { background : #E5E5E5}
p { color : #1560C0; font-size : 12pt; font-family : Verdana}
h1 { color : gray; font-size : 24pt; font-family : Arial}
</style>
</head>
<body>
<h1>Beágyazott CSS</h1>
<p>Ez a dokumentum beágyazott stíluslapokat használ.</p>
</body>
</html>

VÉGEREDMÉNY

Az egyes TAG-eken belül:
Ez azt jelenti, hogy a TAG kap egy style paramétert ( style = stílus), amelyen belül definiálod a kinézetet. Ez mindhárom módszer közül a legrosszabb: egyrészt ugyanúgy, mint a második módszernél, nem lehet központilag megváltoztatni, másrészt eléggé idegen a HTML gondolatvilágától, ugyanis összekeveri a tartalmi és a formai definíciókat.

<html>
<head>
<title>TAG-ekbe ágyazott stílusok</title>
</head>
<body style="background: #A0A0A0">
<h1 style="color: #FFB003; font-family: Arial">Beágyazott CSS</h1>
<p style="font-size: 15pt; color: white; font-family: Verdana">
Ez a dokumentum a TAG-ekbe ágyazott stílusdefiníciókat tartalmaz.</p>
</body>
</html>

VÉGEREDMÉNY

Mindent összevetve az elsõ módszer tûnik a legjobbnak, de a kezdeti próbálgatásokhoz talán a második a legegyszerûbb, mivel itt egy file-t szerkesztesz, de egybemarad a stíluslap, tehát késõbb kiemelhetõ onnan külön file-ba.

A stíluslapok felépítése

Most, hogy már tisztáztuk, hogyan tudod majd felhasználni a stíluslapodat, ideje megírnod. Elõször azonban egy kis "fejtágítás" következik.

Akinek "számítástechnikus agya" van, vagy foglalkozott már pl. OOP-vel, az bizonyára érteni fogja a stílusok hierarchiarendszerét. Azonban nem mindenki úgy ül le, hogy bemutassa pl. a virágüzletét a Weben, hogy elõtte nem csak felhasználói szinten foglalkozott számítástechnikával. A stíluslapok hierarchiarendszerérõl lesz ugyanis most szó.

A lényeg az, hogy ha megadod egy TAG kinézetét, akkor a többi, azon belüli TAG örökli azt, ha csak felül nem írod. Például ha a <body> TAG-et pirosra állítod, és a <b>-t aláhúzottra, akkor mivel a <b> a <body>-n belül van, pirosan és aláhúzva jelenik meg (<b>). Ha viszont a <p> sárga, akkor sárgán fog megjelenni nem pedig pirosan! Ha pedig egy <p> TAG-en belül elhelyezel egy <b> TAG-et, akkor az sárga lesz, és aláhúzott(<b>). Emellett vastag is - vajon miért? Természetesen azért, mivel a böngészõk a <b> TAG-et alapértelmezésben vastagon jelenítik meg, és nem mondtuk meg neki, hogy vékony legyen. Tehát az elsõ esetben a <b> örökölte a félkövérséget, a piros színt és saját magától az aláhúzottságot, ebben a sorrendben. A második esetben viszont örökölte a félkövérséget, a piros színt, a sárga színt és az aláhúzottságot. Mivel a piros is, a sárga is szín és mivel a sárga volt utóbb, a szöveg sárgával jelenik meg. Igen, ez elsõre nem valami egyeszerû, de kétségkívül logikus!

A stíluslap bejegyzése a következõ formában jelenik meg:

Szülõk.Név {Paraméter1:Érték1, Érték2, Érték3; Paraméter2:Érték1, Érték2;...}

Ha a szülõt nem adjuk meg, akkor a beállított értékek a szülõtõl függetlenül jelennek meg, a fenti példában a <b> TAG mindig aláhúzottan jelent meg. Ha azt szeretnénk, hogy csak azok a vastagbetûs szövegek legyenek aláhúzva is, amelyek 1-es fejlécben szerepelnek, a szülõt természetesen <h1>-nek kell beírni:

h1.b {Text-decoration: underline}

Ekkor a kenyérszövegekben nem jelenik meg az aláhúzás. Egy paraméternek azért adhatsz több értéket is, hogy pl. egy szöveg egyszerre lehessen aláhúzott és villogó (mindkettõ text-decoration) ( text decoration = szöveg díszítés). Egy TAG-en belül különbözõ gyermekosztályokat is létrehozhatsz, amelyek szülõje ugyanúgy a felette álló TAG, mint a normál TAG-ek esetében. Például:

.fejlec {Font-family: "Verdana", "Times New Roman", serif; Font-Size: 30pt}

Ezek után ha szeretnél egy kenyérszövegen belül elhelyezni egy fejlécet, a <div> TAG class paraméterének írjad be, hogy fejlec ( class = osztály, típus):

<p><div class="fejlec">Elég jól kiüt a környezetbõl</div>, nem igaz? </p>

Ha szeretnéd, hogy a <h1>-en belüli fejlécek még pirosak is legyenek, a .fejlec sor után írd be, hogy

h1.fejlec {color: red}

Ekkor ha a <div> TAG-et a <h1>-en belül használod, akkor a standard .fejlec alstíluson kívül megkapja a csak a h1-es .fejlecre jellemzõ piros színt.

Az <a> TAG-nek ezenkívül négy gyermekstílusa van: a:link, a:visited, a:active, a:hover. Ezekkel állíthatod be külön a normál, a már meglátogatott, az éppen aktív, ill. az egérrel "rámenés" hivatkozások kinézetét.

Színek:
A TAG-eknek két színe van: a háttér színe (background) és a elõtéré (color) ( background = háttér; color = szín). A színeket többféleképpen megadhatod:

Lehet átlátszó, vagyis látszik a mögötte lévõ szöveg vagy a szülõ TAG színe. Erre a transparent "szín" szolgál ( transparent = átlátszó), pl. table {background: transparent} hatására a táblázatokon átlátszik pl. az oldal háttérképe.

A színt meg lehet adni az angol nevével is. Például p {color: red}

A másik színdefiníció: RGB színekkel. A fényszíneket kikeverheted ugyanis pirosból (red), zöldbõl (green) és kékbõl (blue). A forma ekkor: rgb (R,G,B), tehát egymás után beírod a komponenesek értékét. Bõvebben a 8. Színek fejezetben olvashatsz.

A színt definiálni lehet képpel is. Igen, ez elsõre kicsit furcsán hangzik, de megadhatunk háttérnek egy képet közvetlenül a stíluslapból is. Ilyenkor az url "függvényt" használod: body {background: url(/Pictures/Hatter1.gif)}

A színeket egymás mellé is rakhatod, ilyenkor átfolyás jön létre közöttük, mintha két felhígított festékcseppet egymás mellé cseppentenél. A két színt ilyenkor "/" jellel választod szét: table {background: red / blue}. A két szín elhelyezkedését égtájakkal adhatod meg, pl. ha S-et (mint South) adsz meg, akkor fentrol lefelé folynak egymásba a színek. Lehetséges értékek: N, NE, E, SE, S, SW, W, NW ( N = Nord = Észak; E = Est = kelet; S = South = Dél; W = West = Nyugat).

Ha képet használsz, van még egy pár beállítási lehetõség. Elõször is természetesen nem mindegy, hogy a képet egyszer jelenítse-e meg vagy pedig ahányszor elfér a böngészõablakban. Erre szolgál a repeat utótag (nem paraméter, de valami olyasmi) ( repeat = ismétlés). Az url után a következõek szerepelhetnek: Repeat-X, Repeat-Y, Repeat, No-Repeat. Az elsõ kettõ csak vízszintesen illetve csak függõlegesen "csempéz". A második az alapértelmezés, ilyenkor mindkét irányban folytatja az ábrát. A harmadik esetben pedig csak egyszer rakja ki a képet. A negyedikben pedig nincs imétlés.

Színátfolyásos vagy képes háttereknél megadhatod azt is, hogy az ábra az oldal mögé "festve", vagy pedig "vetítve" jelenjen-e meg, tehát ha mozgatom a szöveget, az ábra vele együtt mozogjon-e. Erre a scroll vagy a fixed utótag szolgál ( scroll = görget; fixed = lerögzített).

Szövegformázás:
Word-spacing
Azt állíthatod be vele, hogy a betûtípus és -méret alapján megadott szóközhöz még mennyit adjon hozzá. Értéke lehet negatív is, tehát csökkentheted a szavak közti távolságot.

Letter-spacing
Hasonló az elõzõhöz, de itt a betûk távolságáról van szó. Negatív értékeket szerintem csak figyelemfelkeltû, nagy, "sztájlos" címeknél szabad használni, mert nagyon összekutyálhatja a betûket és ezzel teljesen elveheti az olvashatóságot.

Text-Decoration
A szöveg kiegészítõ díszítését határozza meg. Lehet none ( none = semmmi), underline ( underline = aláhúzott), overline ( overline = "felülrõl alúhúzott"), line-through ( line-through = vonallal áthúzott), blink ( blink = villogó), illetve ezek variációja. Itt felhívnám a figyelmedet az underline értékre, mert itt tudod átállítani a linkek aláhúzását. Persze ha azt akarod, hogy azért észre lehessen venni, hogy az a szó egy hivatkozás, érdemes legalább a színét és pl. a vastagságát vagy a döltségét megváltoztatni. Bár kitunõ móka lehet tíz oldalnyi fehér-alapon-fekete szövegbol kitotózni, hogy melyik szó is a link a keresett oldalra...

Text-Transform
Átalakítja a szöveg nagy- és kisbetûit: