Szöveg szintű elemeknél gyakran használt stílusbeállítások (2. rész)

Betűköz beállítása (letter-spacing)

A letter-spacing tulajdonság segítségével a térközt állíthatjuk be a szavainkban található betűk között.

Segítségével javíthatjuk (de akár ronthatjuk is) az olvashatóságot.

Értékek

Értékül pozitív vagy negatív távolságértékeket adhatunk meg. A gyakorlatban em mértékegységgel ellátott értéket szoktak megadni, mivel az viszonyul a betűmérethez. Így ha az változik, vele változik a betűtávolság is. Negatív érték megadásakor a betűk összecsúsznak. Ha nulla értéket adunk meg, akkor a betűköz nem változik. Ezen kívül a tulajdonságnak a normal értéket is beállíthatjuk, ami a böngésző alapértelmezett betűköz távolságát állítja be, ami rendszerint változó.

Vissza a tartalomjegyzékhez

Tulajdonságok

A letter-spacing tulajdonság értékei öröklődnek.

A tulajdonság már a CSS1 szabványnak is része volt, ezért mind a tulajdonságot, mind a felsorolt értékeket támogatják a jelentős böngészők.

Szavak közti távolság (word-spacing)

A word-spacing tulajdonság segítségével a szavak közötti távolságot állíthatjuk be.

A betűközhöz hasonlóan a böngészők ezt a távolságot is az olvasáshoz legoptimálisabb távolságra állítják be, ezért ezt megváltoztatni csak indokolt esetben célszerű.

Vissza a tartalomjegyzékhez

Értékek

Értéknek pozitív vagy negatív távolságértékeket adhatunk meg. Negatív érték megadásakor a szavak összecsúsznak. A gyakorlatban az em-es értékek használata ajánlott. Ezen felül a tulajdonságra alkalmazható a normal érték is, amivel a böngésző alapértékeire áll vissza a szóköz nagysága.

Vissza a tartalomjegyzékhez

Tulajdonságok

A word-spacing tulajdonság értékei öröklődnek. A tulajdonság már a CSS1 szabványnak is része volt.

Sorköz beállítása (line-height)

A line-height tulajdonság segítségével a sorok közötti távolságot állíthatjuk be.

Ez nagymértékben befolyásolja a szöveg olvashatóságát.

Vissza a tartalomjegyzékhez

Értékek

• Megadhatunk pozitív számértékeket, amelyekkel egy arányszámot fejezhetünk ki a jelenlegi sorközhöz képest.
• Megadhatunk pozitív hosszúságértékeket.
• Megadhatunk százalékos értékeket, amelyek arányszámként funkcionálva a a befoglaló elemnél érvényes sorközhöz képest eredményeznek változást.
• A normal érték a böngészőbeli alapértékre állítja a sorközt.

Vissza a tartalomjegyzékhez

Tulajdonságok

A line-height tulajdonság értékei öröklődnek. A tulajdonságot csak blokkszintű elemekre használhatjuk. A tulajdonság már a CSS1 szabványnak is része volt.

Szövegtranszformáció / kis- és nagybetűk (text-transform)

A text-transform tulajdonság segítségével lehetőségünkben áll egy csupa kisbetűs szöveget nagybetűssé, vagy akár fordítva: egy csupa nagybetűs szöveget kisbetűssé tenni.

Ez a tulajdonság főleg dinamikusan generált tartalmak esetén hasznos, ahol sohasem lehetünk biztosak abban, hogy esetleg nem generálódik csupa nagybetűs tartalom.

Vissza a tartalomjegyzékhez

Értékek

• Az uppercase minden betűt nagybetűvé alakít az érintett szövegben.
• A lowercase minden betűt kisbetűvé alakít az érintett szövegben.
• A capitalize minden egyes szó első betűjét nagybetűvé alakítja az érintett szövegben.
• A none felülbírálja az előző értékeket és meghagyja a szöveget eredeti formájában.

Vissza a tartalomjegyzékhez

Tulajdonságok

A text-transform tulajdonság értékei öröklődnek. A tulajdonság már a CSS1 szabványnak is része volt, a CSS2 és CSS3 szabványban újabb funkciókkal is kiterjesztették.

Szövegárnyék (text-shadow)

A text-shadow tulajdonság segítségével árnyékot rendelhetünk betűink mögé, amelyek így hangsúlyosabbá válhatnak. A túlzott használata homályossá és nehezen olvashatóvá teheti szövegeinket.

Vissza a tartalomjegyzékhez

Értékek

A tulajdonságnak egy paraméterlistát adunk értékül, amelyben az értékeket szóköz választja el.

Egyszerre többféle értékhalmazt is megadhatunk egyetlen tulajdonságnak. Ehhez elég a paraméterlistákat vesszővel ellátva felsorolni.

• Először adjunk meg azt a színértéket, amilyen színű árnyékot szeretnénk.
• Ezt követi két hosszúságérték, ami az árnyék vízszintes és függőleges eltolásának nagyságát határozza meg. Az első érték a függőleges eltolásért felel, pozitív érték esetén lefele, negatív esetén felfele tolunk el. A második érték pedig a vízszintes eltolás nagyságát határozza meg. Pozitív érték esetén jobbra, negatív esetén balra tolunk el.
• Végül adjunk meg az árnyék nagyságát. Ezt egy pozitív hosszúságérték segítségével tehetjük meg.
• A none értéket is megadhatunk, így kikapcsolhatjuk az esetlegesen megörökölt árnyékot.

Vissza a tartalomjegyzékhez

Tulajdonságok

A text-shadow tulajdonság értékei öröklődnek. A tulajdonság a CSS3 szabvány része.

Vissza a tartalomjegyzékhez