Tvorba webu » CSS » Vlastnosti textu v CSS

Vlastnosti textu v CSS

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

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

Ozdoba textu - text-decoration

Pomocí vlastnosti text-decoration lze nastavit ozdobu textu, například podtržení (text-decoration: underline), přeškrtnutí (text-decoration: line-through), nadtržení (text-decoration: overline) nebo blikání (text-decoration: blink). Blikání podporují pouze některé prohlížeče.

Použitelné hodnoty jsou v seznamu.

• none
• underline
• overline
• line-through
• blink

Příklad

Podle příkladu bude element span s třídou potrhnout 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 text zarovnáte do bloku (justify), slova budou začínat vždy na začátku řádku a končit na jeho konci. Mezi slovy se proto vytvoří mezery. Zarovnání do bloku by se nemělo používat v úzkých sloupcích textu, ve kterých by mohly vznikat velké mezery mezi slovy; naopak se hodí pro široké sloupce.

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 u inline elementů, jako jsou span, b, i nebo 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 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 mezery mezi písmeny - letter-spacing

Vlastnost letter-spacing určuje mezery mezi jednotlivými písmeny. 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-indent

Vlastnost text-indent určuje, o kolik se odsadí 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. Hodí se především ke zvětšení výšky řádku, aby se zvýš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ísmene 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