CSS - Formßtovßnφ textu

V tomto dφle si probereme formßtovßnφ textu ve strßnce pomocφ CSS styl∙. NauΦφme se text zarovnßvat, m∞nit font, barvu, velikost, styl, tlou╣╗ku, podtr╛enφ a je╣t∞ mnohem vφce.

Zarovnßnφ

Jednou z klφΦov²ch vlastnostφ textu je jeho zarovnßnφ. CSS nßm umo╛≥uje zarovnßvat text doleva, doprava, na st°ed a do bloku. Tyto parametry nastavujeme u vlastnosti text-align:

Typ pφsma, barva, styl

Dal╣φ rozliΦnΘ vlastnosti m∙╛eme nastavovat u pφsma jako takovΘho. M∙╛eme urΦit barvu, font, velikost, barvu, tlou╣╗ku, podtr╛enφ, prolo╛enφ, dokonce i vzdßlenost jednotliv²ch pφsmen.

Typ pφsma

Typ pφsma se nastavuje pomocφ font-family. M∙╛eme urΦit p°esn² font (Arial, Times, Helvetica, Courier, atd.), nebo jen vybrat druh (patkovΘ, bezpatkovΘ, s pevnou ╣φ°kou) a prohlφ╛eΦ u╛ dosadφ vlastnφ pφsmo. Jeliko╛ nikdy nem∙╛eme v∞d∞t, jakß pφsma jsou na poΦφtaΦi nainstalovanß, m∙╛eme jich napsat vφce za sebou a prohlφ╛eΦ se zastavφ u prvnφ dostupnΘ mo╛nosti:

font-family:Arial,Helvetica,Tahoma;

Pro p°φpady, kdy na poΦφtaΦi nenφ ani jedno z pφsem, bychom m∞li je╣t∞ na konec tohoto v²Φtu uvΘst samotn² druh fontu:

Zßpis pak bude vypadat t°eba takto:

font-family:Arial,Helvetica,sans-serif;

Tlou╣╗ka pφsma

CSS umo╛≥uje definovat tlou╣╗ku pφsma velmi detailn∞. To se d∞lß pomocφ vlastnosti font-weight. M∙╛eme urΦit, aby pφsmo bylo normßlnφ, tuΦnΘ, nebo jen tuΦn∞j╣φ, nebo lehΦφ. P°esnou tlou╣╗ku m∙╛eme takΘ urΦit Φφslem (100 - 900). Bohu╛el, podpora tΘto ╣kßly nastavenφ nenφ v prohlφ╛eΦφch p°φli╣ uspokojivß, tak╛e v souΦasnΘ dob∞ lze doporuΦit jen pou╛φvßnφ pφsma normßlnφho a tuΦnΘho.

Styl pφsma

U stylu pφsma, neboli font-style m∙╛eme urΦit nastavenφ sklonu pφsma. Mßme t°i mo╛nosti:

Mezery mezi pφsmeny

Mezery mezi jednotliv²mi pφsmeny se urΦujφ vlastnostφ letter-spacing. Tu m∙╛eme nastavit bu∩ na normal, nebo jφ m∙╛eme urΦit pomocφ dΘlkov²ch jednotek.

Mezery mezi °ßdky

Mezery mezi jednotliv²mi °ßdky se urΦujφ vlastnostφ line-height. Ta dovoluje nastavenφ normal, nebo pomocφ dΘlkov²ch jednotek, m∙╛eme ale urΦit vzdßlenost i procentußln∞.

Barva pφsma

V CSS m∙╛eme nastavit i barvu pφsma. Pou╛φvßme k tomu pouze urΦovßnφ barev.

Velikost textu

Velmi podstatnΘ nastavenφ textu je jeho velikost. Tu urΦujeme vlastnostφ font-size. SprßvnΘ nastavenφ velikosti textu je velmi d∙le╛itΘ, proto╛e p°φli╣ mal² text m∙╛e vΘst k neΦitelnosti celΘho webu, p°φli╣ velk² text naopak siln∞ naru╣uje design strßnek. Pokud chcete mφt opravdu p°φstupn² web, m∞li byste se ale vyvarovat zadßvßnφ velikosti textu pomocφ pixel∙. Ten potom prohlφ╛eΦ neumφ ani zv∞t╣it, ani zmen╣it (vyjφmkou je prohlφ╛eΦ Mozilla). LidΘ s r∙zn²mi oΦnφmi vadami (a divili byste se, kolik jich je), nebo lidΘ star╣φ toti╛ majφ se Φtenφm men╣φch text∙ velkΘ problΘmy. Pokud jsou zrovna na internetu, mohou si velikost textu zvolit a tφm si ho p°izp∙sobit. Neberme jim tu mo╛nost. Pokud ale d∞lßte pixel-perfect design, pravd∞podobn∞ Vßm nic jinΘho nezbyde.

Nastavenφ takΘ m∙╛eme provΘst procentußln∞, nebo pomocφ dΘlkov²ch jednotek.

Zkrßcen² zßpis

V∞t╣inu v²╣e uveden²ch vlastnostφ pφsma lze zapsat takΘ zkrßcen²m zßpisem vlastnostφ font. Prvky jsou zastoupeny v tomto po°adφ:

font-style font-variant font-weight font-size line-height font-family

font-vyriant jsme se neuvßd∞li - nechte jej nastaven² na normal

P°φklad zkrßcenΘho zßpisu:

p { font: italic normal bold 12pt 2px sans-serif; }

Dekorace a transformace

Dekorace textu

Pod zßhadn²m pojmem dekorace textu se neskr²vß nic jinΘho, ne╛ podtr╛enφ, nadtr╛enφ, nebo p°e╣krtnutφ. Lze sice nastavit je╣t∞ blikßnφ, to se ale nesetkalo s velkou podporou dne╣nφch prohlφ╛eΦ∙. V tabulce nφ╛e jsou mo╛nΘ hodnoty vlastnosti text-decoration:

Transformace textu

Aby toho nebylo mßlo, m∙╛eme pomocφ vlastnosti text-transform urΦit transformaci textu, tedy jestli majφ b²t v╣echna pφsmena malß, velkß, nebo kapitßlky:

Norma CSS sice umo╛≥uje nastavovßnφ dal╣φch zajφmav²ch vlastnostφ (stφnovßnφ, layout atd.), ty jsem ale pro tentokrßt vynechal, jeliko╛ je je╣t∞ dne╣nφ prohlφ╛eΦe nepodporujφ.

Marek Soldßt, marek@soldat.cz

Autor je ╣Θfredaktorem serveru Einstein.cz.