HTML gyorstalpaló 21. rész

Stíluslapok II.

Színek

A tag-eknek két színe van: a háttér színe (Background) és a előtéré (Color). 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, pl. TABLE {background: transparent} hatására a táblázatokon átlátszik pl. az oldal háttérképe.
• Névvel. A nevek listáját több helyen is megtalálhatod, keresgélj például a WWW Consortium oldalain. Például P {color: red}
• 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 komponensek értékét.
• Képpel. 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 URLUniform Resource Locator egységes forrásazonosító: megadja a megjelenítő program számára, hogy az adott szövegrészhez, képhez, grafikához kapcsolt dokumentumot milyen módszerrel lehet megjeleníteni, milyen típusú kapcsolatot kell felépíteni, illetve hogy ez a forrás hol, az Internetre kapcsolt gépek közül melyiken található. Az URL-ek a HTML-dokumentumba beépített szabályos szerkezetű sorok, segítségükkel hozható létre az a logikai szerkezet és dokumentum kapcsolat, ami a WWW hipertext lényege. Az URL a következő információkat tartalmazza: a protokollt, a kiszolgálónak az Internet-nevét, a kiszolgáló portjának a számát, a forrás helyét. “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 fentről lefelé folynak egymásba a színek. Lehetséges értékek: N, NE, E, SE, S, SW, W, NW.

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). Az URLUniform Resource Locator egységes forrásazonosító: megadja a megjelenítő program számára, hogy az adott szövegrészhez, képhez, grafikához kapcsolt dokumentumot milyen módszerrel lehet megjeleníteni, milyen típusú kapcsolatot kell felépíteni, illetve hogy ez a forrás hol, az Internetre kapcsolt gépek közül melyiken található. Az URL-ek a HTML-dokumentumba beépített szabályos szerkezetű sorok, segítségükkel hozható létre az a logikai szerkezet és dokumentum kapcsolat, ami a WWW hipertext lényege. Az URL a következő információkat tartalmazza: a protokollt, a kiszolgálónak az Internet-nevét, a kiszolgáló portjának a számát, a forrás helyét. 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.

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.

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 összekutyulhatja 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, vagyis semmi, underline, vagyis aláhúzott, overline, vagyis “felülről aláhúzott”, line-through, vagyis áthúzott, blink, vagyis 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 kitűnő móka lehet tíz oldalnyi fehér-alapon-fekete szövegből kitotózni, hogy melyik szó is a linkA hipermédia, a hipertext fogalma; élőkapocs. A hipermédiás dokumentumban szereplő linkek más dokumentumokkal teremtenek kapcsolatot. Linkek találhatók a World Wide Web honlapjain is; ezeket a különféle böngészőprogramok általában aláhúzással, kiemeléssel jelölik. (Ebben a szócikkben az öt kiemelt kifejezés szintén élőkapocs.) a keresett oldalra…

Text-Transform

Átalakítja a szöveg nagy- és kisbetűit:

• Capitalize: Minden szó első betűje nagy
• Uppercase: Minden betűt nagybetűre cserél
• Lowercase: Minden betűt kisbetűre cserél
• None: Megmaradnak az eredeti betűméretek

Text-Align

Vízszintes igazítás. Lehet Left, Right vagy Center, vagyis balra, jobbra illetve középre rendezheted a szöveget. Grafikus böngészőkön a Justify lehetőség is adott, amikor a szóközökkel úgy operál a megjelenítő, hogy a bal és a jobb oldalon egyaránt szélig érjen a szöveg. (ha ezt nem érted, nyiss ki egy nyomtatott könyvet és nézd meg a szöveg széleit)

Text-Indent

A bekezdések első sorának behúzása. Negatív érték esetén balrább jelenik meg, mint a többi sor–ezt főleg hierarchikus vázlatoknál érdemes használni. A pozitív behúzást hosszabb, összefüggő kenyérszövegeknél szokás alkalmazni.

Vertical-Align

Vagyis magyarul függőleges igazítás. Lehetséges értékei: