CSS referencia => Szöveg tulajdonságok

5.4 Szöveg tulajdonságok

Vissza a hivatkozó oldalra

5.4.1 'word-spacing'

Értéke lehet: normal | hossz
Alapértelmezés: normal
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

A megadott hosszúságérték jelzi, hogy mennyivel növelendő meg a szavak közötti alapértelmezett szóköz értéke. Értéke lehet negatív, de lehetnek megvalósítás-függő korlátozások. A böngésző szabadon választhatja meg a megfelelő szóközérték-kiszámítási algoritmust. A szóköz mértéke függhet a szöveg igazításától is (ez a text-align tulajdonság értékeivel állítható be). 

H1 { word-spacing: 1em }

Fenti példában a H1 elemen belül a szóköz értéke 1em értékkel megnövelt. A böngészők a word-spacing bármely értékét értelmezhetik normal-ként.

Vissza a hivatkozó oldalra

5.4.2 'letter-spacing'

Értéke lehet: normal | hossz
Alapértelmezés: normal
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

A megadott hosszúságérték jelzi, hogy mennyivel növelendő meg a betűk közötti alapértelmezett köz értéke. Értéke lehet negatív, de lehetnek megvalósítás-függő korlátozások. A böngésző szabadon választhatja meg a megfelelő betűközérték-kiszámítási algoritmust. A betűköz mértéke függhet a szöveg igazításától is (ez a text-align tulajdonság értékeivel állítható be). 

BLOCKQUOTE { letter-spacing: 0,1em }

Fenti példában a BLOCKQUOTE elemen belül a betűköz értéke 0,1em értékkel megnövelt.
Ha a beállított érték a normal, a böngésző szabadon állíthatja be a betűközt, a szöveg igazításának megfelelően. Ez nem történik meg, ha a letter-spacing tulajdonság értékét explicit módon adjuk meg: 

BLOCKQUOTE { letter-spacing: 0 }

BLOCKQUOTE { letter-spacing: 0cm }

A böngészők a letter-spacing bármely értékét értelmezhetik normal-ként.

Példa

Vissza a hivatkozó oldalra

5.4.3 'text-decoration'

Értéke lehet: none |[underline||overline||line-through||blink ]
Alapértelmezés: none
Alkalmazható: Minden elemhez
Öröklődik: Nem, de lásd a részletezést alább
Százalékos értékek: Nincs értelmezve

Ez a tulajdonság írja le egy elem szövegének megjelenítésekor alkalmazható dekorációkat (nincs, aláhúzott, föléhúzott, áthúzott, villogó). Ha az elem üres (<EM></EM>), vagy nem tartalmaz szöveget (IMG), a tulajdonság nem eredményez látható hatást. A blink érték hatására a szöveg villog.

A szövegdekoráció színeit a color tulajdonság értékeivel kell beállítani.

Ez a tulajdonság nem öröklődik, de az elemek összeillenek szülő elemeikkel. Tehát; ha egy elem aláhúzott, az aláhúzás meg fog jelenni a gyermek elemnél is. Az aláhúzás színe ugyanaz marad akkor is, ha a leszármazott elem color tulajdonságának értéke más. 

A:link, A:active, A:visited { text-decoration: underline }

A fenti példa az összes link szövegét (link minden A elem, amelynek HREF attribútuma van) alhúzottá teszi.

A böngészőknek fel kell ismerniük a blink kulcsszót, de nem kötelesek támogatni a villogtatást.

Vissza a hivatkozó oldalra

5.4.4 'vertical-align'

Értéke lehet:
baseline|sub|super|top|text-top|middle|bottom|text-bottom|<százalékos>
Alapértelmezés: baseline
Alkalmazható: Soron belüli elemekhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap az elem line-height tulajdonsága

Ez a tulajdonság az elem függőleges pozicionálását befolyásolja.
Értékkészletének egy csoportja a szülő elemhez viszonylik:

  • baseline - az elem alapvonalára igazít (vagy az aljára, ha a szülő elemnek nincs alapvonala);
  • middle - az elem függőleges középpontjára igazít (általában kép esetén);
  • sub - az elem alsó indexe;
  • super - az elem felső indexe;
  • text-top - az elem tetejéhez igazít, a szülő elem betűinek tetejéhez;
  • text-bottom - az elem aljához igazít, a szülő elem betűinek aljához.

Az értékkészlet másik csoportja a formázott sorhoz viszonylik:

  • top - az elem tetejéhez igazít, a sor legmagasabb elemével egy vonalba;
  • bottom - az elem aljához igazít, a sor legmélyebben levő elemével egy vonalba;

A százalékos értékek viszonyítási alapja az elem line-height tulajdonsága. Ez a tulajdonság felel az elem alapvonalának (baseline) hollétéért (vagy az elem aljának elhelyezkedéséért, ha az elemnek nincs alapvonala). Negatív értékek megengedettek (a -100% lesüllyeszti az elemet annyira, hogy az elem alapvonala a következő sor alapvonalához ér. Ez az olyan elemek függőleges igazításának is különösen pontos beállítását teszi lehetővé, amelyeknek nincs alapvonaluk [képek]).

Vissza a hivatkozó oldalra

5.4.5 'text-transform'

Értéke lehet: capitalize|uppercase|lowercase|none
Alapértelmezés: none
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

  • capitalize - Minden szó első karakterét nagybetűssé alakítja;
  • uppercase - Az elem összes betűjét nagybetűssé alakítja;
  • lowercase - Az elem összes betűjét kisbetűssé alakítja;
  • none - Hatástalanítja az örökölt értéket.

Az aktuális transzfomáció minden esetben nyelvfüggő.

H1 { text-transform: uppercase }

A H1 elemben levő szöveget nagybetűssé alakítja.

A böngészők figyelmen kívül hagyhatják a text-transform tulajdonságot, ha azok a karakterek, amelyikre alkalmazni kellene, nem a Latin-1 karakterkészletből valók.

Vissza a hivatkozó oldalra

5.4.6 'text-align'

Értéke lehet: left|right|center|justify
Alapértelmezés: Böngészőfüggő
Alkalmazható: Blokkszintű elemekhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

Ez a tulajdonság írja le a szöveg igazítását az elemen belül. Az aktuális igazítási algoritmust a böngésző nyelvfüggően alkalmazza. 

DIV.center { text-align: center }

Mivel a text-align öröklődik, a DIV elemen belüli összes CLASS="center" attribútummal ellátott blokkszintű elem középre lesz igazítva. Megjegyzendő, hogy az igazítás viszonyítása nem a vászonhoz, hanem az elemhez történik. Ha a justify értéket a böngésző nem támogatja, általában a left értékkel helyettesíti.

Vissza a hivatkozó oldalra

5.4.7 'text-indent'

Értéke lehet: hossz | százalékos
Alapértelmezés: 0 (nulla)
Alkalmazható: Blokkszintű elemekhez
Öröklődik: Igen
Százalékos értékek: Viszonyítási alap a szülő elem szélessége

Ez a tulajdonság határozza meg a formázott sor behúzását. Értéke negatív is lehet, de lehetnek megvalósításbeli korlátozások. Behúzás nem helyezhető el olyan elem belsejébe, ahol valamilyen törés (pl.: BR) már van.
Példa: 

P {text-indent: 3em }

Vissza a hivatkozó oldalra

5.4.8 'line-height'

Értéke lehet: normal | szám | hossz | százalékos
Alapértelmezés: normal
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Viszonyítási alap az elem fontmérete

Ez a tulajdonság állítja be a két szomszédos sor alapvonalának távolságát.

Ha numerikus érték van meghatározva, a sormagasságot a fontméret és a szám szorzata adja meg. Ez a megoldás a százalékos értékmegadástól az öröklődésben különbözik: számérték megadásakor a leszármazott elemek magát a számot öröklik, nem az eredményt.
Negatív értékek nem alkalmazhatóak.

A következő példában szereplő három deklaráció eredménye ugyanaz a sormagasság: 

DIV { line-height: 1,2; font-size: 10pt }       /* számérték  */
DIV { line-height: 1,2em; font-size: 10pt }     /* hossz      */
DIV { line-height: 120%; font-size: 10pt }      /* százalékos */

A normal érték a line-height tulajdonság értékét az alkalmazott fonthoz képest ésszerű méretre állítja be.

Példa

előző  tetejére  következő