Tvorba webu » CSS » Vlastnosti textu v CSS

Vlastnosti textu v CSS

Pomocí kaskádových stylů můžeme nastavit u textu: mezery mezi písmeny a slovy, ozdobu textu, zarovnání, výšku řádky a transformaci.

Popis všech vlastností textu je shrnut v přehledných tabulkách.

Ozdoba textu - text-decoration

Pomocí vlastnosti text-decoration se může nastavit dekorace (ozdoba) textu a to buď: podtržení (text-decoration:underline), přeškrtnutí (text-decoration:line-throught), nadtržení (text-decoration:overline),nebo blikání (text-decoration:blink) které podporují pouze prohlížeče: nové verze prohlížečů Mozilla, Firefox, Opera a Netscape.

Použitelné hodnoty jsou v seznamu.

• none
• underline
• overline
• line-throught
• blink

Příklad

Podle příkladu element span s třídou potrhnout bude podtržen výsledek bude stejný jako kdyby se použil element "U".

span.potrhnout{text-decoration : underline;}

Zarovnání textu - text-align

Pomocí CSS lze text zarovnat: vlevo (text-align:left), vpravo(text-align:right), na střed(text-align:center) nebo do bloku(text-align:justify).

Pokud písmo zarovnáte do bloku (justify) písmo se zarovná tak aby slova začínaly vždy na začátku řádku a končily na konci to znamená že se mezi slovy vytvoří mezery z toho vyplívá že zarovnání do bloku by se nemělo používat na úzké sloupce textu kde kde by mohly být veliké mezery mezi slovy, ale naopak může se použít na široké sloupce textu.

Použitelné hodnoty jsou v seznamu.

• left
• right
• center
• justify

Příklad

Všechny odstavce s třídou center se vycentrují výsledek bude stejný jako kdyby se použilo align="center".

p.center{text-align : center;}

Vertikální zarovnání - vertical-align

Vertikální zarovnání v CSS umožňuje zarovnat text na výšku, ale pouze inline elementy jako je: span, b, i, em...

Použitelné hodnoty i s vysvětlením jsou v seznamu.

• baseline - zarovnání na účaří
• sub - zarovnání jako dolní index
• super - zarovnání jako horní index
• top - zarovnání nejvýš
• text-top - zarovnání horní hrany inline prvku s vrškem písma.
• middle - zarovnání na střed
• bottom - zarovnání dolní hrany inline prvku s dolní hranou rodičovského boxu.
• text-bottom - zarovnání dolní hrany inline prvku s se spodkem písma rodičovského prvku.
• procenta - při použití kladné hodnoty se box posune výš a při použití záporné hodnoty se box posune níž.

Příklad

Element span s třídou dolu se zobrazí níže.

span.dolu{vertical-align : sub;}

Velikost mezery mezi slovy - word-spacing

Vlastnost word-spacing nastavuje minimální mezery mezi jednotlivými slovy jako hodnoty se mohou použít pouze délky nebo normal.

Použitelné hodnoty jsou v seznamu.

• normal
• délka

Příklad

Elementy p s třídou mezery budou mít mezi jednotlivými slovy mezery 30 pixelů.

p.mezery{word-spacing : 30px;}

Velikost mezeri mezi písmeny - letter-spacing

Vlastnost letter-spacing určuje mezery mezi jednotlivými písmenu jako hodnoty se používají délky nebo normal.

Použitelné hodnoty jsou v seznamu.

• normal
• délka

Příklad

Všechny elementy s třídou mezery budou mít mezery mezi písmeny 10 pixelů.

p.mezery{letter-spacing : 10px;}

Velikost odstavcové zarážky - text-idented

Vlastnost text-idented určuje o kolik se odstaví první řádek blokového elementu jako hodnoty se uvádějí délky nebo procenta.

Použitelné hodnoty jsou v seznamu.

• délka
• procento

Příklad

Velikost odstavcové zarážky u odstavců s třídou zarazka bude 40 pixelů.

p.zarazka{text-indent : 40px;}

Výška řádku - line-height

Vlastnost line-height nastavuje výšku řádku tato vlastnost se hodí především k zvětšení výšky řádku aby se zvětšila čitelnost textu v širokých sloupcích.

Použitelné hodnoty jsou v seznamu.

• normal
• délka
• procenta
• číslo

Příklad

p.vyska-radky{line-height : 15px;}

Transformace textu - text-transform

Pomocí vlastnosti text-transform lze nastavit u každého elementu : Velká písmena u prvního písmena každého slova(text-transform:capitalize), všechna velká písmena (text-transform:uppercase), nebo všechna malá písmena (text-transform:lowercase).

Použitelné hodnoty jsou v seznamu.

• capitalize
• uppercase
• lowercase
• none

Příklad

Počáteční písmena elementu span s třídou kapitalky se zobrazí velkými písmeny.

span.kapitalky{text-transform : capitalize;}

Reklama