November 21, 2024

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

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

  • Baseline: ez az alap, tehát hogy a sor alja megegyezik a betűk aljával.
  • Middle: A sor közepétől egyenlő távolságra nyúlnak a betűk fel illetve le
  • Sub: Alsó index
  • Super: Felső index
  • Text-Top: A szöveg teteje egybeesik a szülő elem tetejével
  • Text-Bottom: Detto, de itt az aljával esik egybe
  • Top: Felfelé igazítás
  • Bottom: Lefelé igazítás

Ezeken kívül megadhatsz egy számot is, ami az előző felsorolástól mért távolság a sor magasságának százalékában. A pozitív szám a felfelé, a negatív a lefelé eltolást jeleni.