Szövegformázás

A szöveg formázására is többféle lehetőség vonatkozik. A következőkben ezeket sorra vesszük, és ismertetjük az adott formázást leíró tulajdonságot.

A szín beállítása

A szöveg színét a color tulajdonság határozza meg. Ennek beállításánál figyelni kell arra, hogy lehetőleg a szöveg a beállított háttér előtt olvasható legyen. Előfordulhat, hogy egyes színtévesztésben szenvedő emberek a beállított színeket nem tudják elolvasni. Amennyiben valakitől ilyen visszajelzés érkezik, akkor a színeket célszerű kicserélni. Ezért is jó, ha a színek beállítását stíluslapon keresztül végezzük, hiszen így egyetlen helyen elég módosítani, nem kell minden weboldalhoz külön-külön elvégezni a módosítást.

Az alábbi példa első szabálya a bekezdés valamennyi szövegét pirosra állítja, míg a második a legnagyobb rangú címsort sárgára, a harmadik pedig a kiemelt szöveget állítja feketére:

P { color: rgb(100%,0%,0%)}
H1 { color: yellow}
EM { color: #000}

A három szabály a három lehetséges színmegadási módra ad példát. Egy jótanács: ha nem előre definiált színnevet használunk, akkor az RGB-színkódot az első formában adjuk meg, mert ez a legolvashatóbb, hiszen erről rögtön leolvasható, hogy a három színkomponens – piros, zöld és kék – milyen intenzitással szerepel.

Az RGB-színkód az additív színkeverésen alapul: minél több van egy komponensből, annál világosabb a szín, és ha mindhárom komponens 100%, akkor kapjuk a fehér színt.

Az egyes színértékek megadási lehetőségeit a tulajdonságértékek ismertetésénél lehet megtalálni.

Betűméret

A szöveg betűinek méretét a font-size tulajdonsággal lehet beállítani.

Arra azonban figyelni kell, hogy azok a mértékegységek (em, ex, %), amelyek relatív értéket jelölnek, ezúttal nem lehetnek az adott elem betűméretéhez relatív értékek, hiszen e tulajdonsággal éppen ezt állíthatjuk be. Ebben az esetben e három relatív méretet jelző mértékegység esetén, és a smaller illetve larger kulcsszavak esetén az elem ősének tényleges betűmérete lesz az, amihez ezek viszonyulni fognak.

Az elem szövegének tényleges betűmérete azonban nem feltétlenül lesz az, amit a tulajdonság értékének meghatározásával beállítunk. Egyrészt befolyásolhatja az, hogy a böngésző képes-e az adott betűkészlet betűit az adott méretben megjeleníteni, másrészt a font-size-adjust tulajdonság is befolyásolhatja az értéket. A tényleges méret éppen ezért a kiszámított mérethez legközelebbi, a böngésző által megjeleníthető méret lesz (leszármazott elemek ezt az értéket öröklik, illetve ehhez lesz relatív az azoknál megváltoztatott betűméret).

A következő példa első szabálya a legelterjedtebb betűméretre, a 12 pontosra állítja a bekezdés szövegét. A második szabály az ősénél egyel nagyobbra állítja a bekezdésnyi idézet szövegét. Ez azt jelenti, hogy a környezeténél lesz egy mérettel nagyobb a szöveg. A harmadik és a negyedik szabály kétféle módon a környező szöveg (feltehetően a bekezdés) másfélszeresére állítja be a kiemelés szövegének betűméretét:

P { font-size: 12pt;}
BLOCKQUOTE { font-size: larger}
EM { font-size: 150% }
EM { font-size: 1.5em }

Betűtípus

Nagyon sokféle betűtípus használható – elvileg. Azonban van három nagyobb család, amelybe a betűtípusok besorolhatók:

  1. Talpas, vagy serif: olyan betűtípus, amelyben a betűk rajzolatában (angolul glyph) a vonal végén kis talpacskák vannak. Ilyen betűtípus például a Times
  2. Talpatlan, vagy sans serif: olyan betűtípus, amelyben a betűk rajzolatában a vonal egyszerűen véget ér, minden további cifrázás, talpak használata nélkül. Ilyen betűtípus például az Arial
  3. Az előző kettő általában olyan betűtípust jelent, ahol a betűk szélessége változó. Az ilyeneket proporcionális betűknek nevezzük. A harmadik kategóriába ennek ellentéte, a fix szélességű betűk tartoznak, amelyeket idegenszóval monospaced-nek nevezünk. Ezek általában úgy néznek ki, mint az írógéppel írt szöveg: minden betű azonos helyet foglal el. Programkódok megadására szokás alkalmazni, mert az egyes sorokban mindig ugyanazok az oszlopok kerülnek egymás alá. Például így néz ki. Lehet talpas és talpatlan is.

A betűtípust a font-family tulajdonsággal lehet beállítani.

Fenti három nagy családon kívül (serif, sans serif, monospaced) még megadható a cursive is, amely írott betűkre hasonlít leginkább, és a fantasy, amelyek szintén dekoratív betűkészeletek jelölnek. Ezeket azonban a böngészők nem feltétlenül ismerik.

Betűstílus

A betűstíluson ezúttal azt értjük, hogy a betűk alakja milyen, mennyire vastag stb. Erre több tulajdonság is használható, amelyek egyike viseli nevén a betűstílus elnevezést.

A font-style tulajdonsággal adhatjuk meg, hogy a betűk álló (normal), dőlt (italic), vagy döntött (oblique) formában jelenjenek-e meg. Előfordulhat, hogy a böngésző a dőlt és a döntött stílus között nem tesz különbséget a használt betűkészletnél. Hivatalosan a döntött betűk a normál betűkkel azonos alakúak, míg a dőlt betűk alakja is más.

A font-variant tulajdonsággal lehet beállítani, hogy a kisbetűk valóban kisbetűk legyenek (normal), vagy a kisbetűk alakja is olyan legyen, mint a nagybetűké, csak valamivel kisebb magassággal (small-caps). Ez utóbbit nevezzük kiskapitális betűknek.

Íme példaként: Normál szöveg, Kiskapitális Szöveg.

A text-transform tulajdonsággal elérhetjük azt is, hogy minden szöveg kisbetűvel, nagybetűvel jelenjen meg.

A betűk vastagságát a vékonytól a normálon és a félkövéren át a kövérig, a font-weight tulajdonsággal lehet beállítani. Itt is tudni kell azonban, hogy ha az adott betűkészlet nem tartalmaz annyiféle betűvastagságot, és a böngésző sem tudja a betűket megfelelően átalakítani, akkor a lehetséges értékeknél esetleg kevesebb lehetőséget használhatunk. Általában a szövegekben szokás normál és félkövér betűkről beszélni.

Betűszélesség és betűköz

Amennyiben az adott betűkészlet lehetővé teszi, akkor a betűk szélességét is lehet állítani a font-stretch tulajdonsággal. Ennél gyakrabban alkalmazott trükk a kiemelésre, ha a betűk közötti hézagot növeljük vagy csökkentjük. Erre alkalmas a letter-spacing tulajdonság, míg a szóközök méretének változtatására a word-spacing tulajdonság. Mindkettővel vigyázni kell azonban, mivel ha elállítjuk az alapértelmezett értékeiket, akkor a böngésző nem lesz képes a bekezdés szövegét sorkizárt igazítással megjeleníteni!

A fent felsorolt tulajdonságok közül a font- kezdetűeket egyszerre is megadhatjuk a font tulajdonság használatával.

Dekorációs lehetőségek

A szöveg dekorációja elsősorban aláhúzásból, áthúzásból, villogó szövegből állhat. Ezeket a text-decoration tulajdonság értékével állíthatjuk be. Ennek a tulajdonságnak egyszerre akár több dekorációt is értékül adhatunk, szóközzel elválasztva őket egymástól. Amennyiben az alapértelmezett none érték szerepel, akkor nincs semmiféle dekoráció (hivatkozás aláhúzása letiltható vele), míg az egyes dekorációk a következő értékekkel adhatók meg:

További dekorációs lehetőséget biztosít a szöveg árnyékolása. Ezt a text-shadow tulajdonság teszi lehetővé azoknál a böngészőknél, amelyek ismerik ezt a tulajdonságot. (A Mozilla még nem ilyen!)

Tördelés

A szöveg tördelését a böngészők automatikusan végzik. Azonban a white-space tulajdonság megfelelő értékre állításával le lehet tiltani a sortörést, ahogyan az a PRE elemnél is történik. A böngészők egy része ezzel a tulajdonsággal sem foglalkozik, de a PRE elem esetében a megfelelő értékhez tartozó módon viselkedik.