Home >> CSS návod >> CSS Úprava textu (2.část)

CSS Úprava textu (2.část)

Tato lekce navazuje na předchozí lekci o úpravě textu v CSS. Přiblížíme si další možnosti úpravy textu.

Barva textu


<p style="color:green;">Tento text je zelený.</p>

Výsledek:

Tento text je zelený.

Zarovnání textu


<p style="text-align:center;">Tento text je zarovnaný na střed.</p>

Výsledek:

Tento text je zarovnaný na střed.

Odsazení textu

Používá se pro první řádek v odstavci, další řádky již odsazené nejsou.


<p style="text-indent:80px;">Tento text je odsazený 80 px od levého kraje stránky pomocí atributu text-indent. Tento atribut platí pouze pro první řádek odstavce. Další řádky jsou již zobrazeny bez odsazení.</p>

Výsledek:

Tento text je odsazený 80 px od levého kraje stránky pomocí atributu text-indent. Tento atribut platí pouze pro první řádek odstavce, následující řádky jsou již zobrazeny bez odsazení.

Mezery mezi jednotlivými znaky


<p style="letter-spacing:7px;">Mezi jednotlivými znaky v tomto textu jsou mezery
o velikosti 7 px.</p>

Výsledek:

Mezi jednotlivými znaky v tomto textu jsou mezery o velikosti 7 px.

Mezery mezi jednotlivými slovy


<p style="word-spacing:30px;">Mezi jednotlivými slovy v tomto textu jsou mezery
o velikosti 30 px.</p>

Výsledek:

Mezi jednotlivými slovy v tomto textu jsou mezery o velikosti 30 px.

Dekorace textu


<p style="text-decoration:overline;">Nad tímto textem je vodorovná čára.</p>
<p style="text-decoration:line-through;">Tento text je přeškrtnutý.</p>
<p style="text-decoration:underline;">Pod tímto textem je vodorovná čára.</p>
<a style="text-decoration:none;" a href="" >Tento odkaz není podtrhnutý.</a>

Výsledek:

Nad tímto textem je vodorovná čára.

Tento text je přeškrtnutý.

Pod tímto textem je vodorovná čára.

Tento odkaz není podtrhnutý.

Transformace textu


<p style="text-transform:uppercase;">tento text je transformován na velká 
písmena.</p>
<p style="text-transform:lowercase;">TENTO TEXT JE TRANSFORMOVÁN NA MALÁ PÍSMENA.</p>
<p style="text-transform:capitalize;">každé slovo v tomto textu začíná velkým
 písmenem.</p>

Výsledek:

tento text je transformován na velká písmena.

TENTO TEXT JE TRANSFORMOVÁN NA MALÁ PÍSMENA.

každé slovo v tomto textu začíná velkým písmenem.

Samozřejmě, že v CSS existují ještě další možnosti úpravy textu, ovšem možnosti, ketré jsme si uvedli by měli být dostačující.

Další lekce >>

<< Předchozí lekce