| Einstein.cz | O Životě.cz | All4web | Chat4U | Soldát.cz |
Tvorba WWW
 
Odběr emailů

Aktuality
Články
 
 
Partnerské weby
 JakNaWeb.com - vše pro tvorbu webu - HTML, PHP, MySQL, ASP, CSS,
XML, JavaScripty, PHP
 
Informace o serveru
šéfredaktor
Marek Soldát

hostujeme u
WEB4U

kontaktní email
marek@soldat.cz

ISSN 1214-0082
 
Hledání
 
 
 
Anketa
Jakého používáte mobilního operátora?

Eurotel (20%)


T-Mobile (21%)


Oskar (26%)


Jiný (12%)


Nemám mobil (21%)



Celkem hlasovalo 110 lidí.
 
Co s článkem ?
 
Už jste četli...?
 
Ikonka serveru
 

CSS - Formátování textu

vydáno : 10. 02. 2003, autor : Marek Soldát, kategorie : Tvorba WWW - CSS

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:

zarovnání CSS kód
doleva text-align:left;
doprava text-align:left;
na střed text-align:left;
do bloku text-align:left;
* Zarovnání do bloku je podobné, jako zarovnání doleva, dochází ale k zarovnání i pravých konců řádků

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:

název popis ukázka
monospace s pevnou šířkou písmene ukázka
serif patkové písmo ukázka
sans-serif bezpatkové písmo ukázka

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.

hodnota popis ukázka
normal normální tloušťka ukázka
bold tučné písmo ukázka
lighter lehčí písmo ukázka
bolder tučnější písmo ukázka
100 100 bodová tloušťka ukázka
200 200 bodová tloušťka ukázka
300 300 bodová tloušťka ukázka
... . ..
900 900 bodová tloušťka ukázka

Styl písma

U stylu písma, neboli font-style můžeme určit nastavení sklonu písma. Máme tři možnosti:

hodnota popis ukázka
normal bez naklonění ukázka
italic naklonění kurzíva ukázka
oblique šikmé písmo - zobrazuje se jako kurzíva ukázka

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.

hodnota popis ukázka
medium střední velikost ukázka
larger větší text ukázka
smaller menší text ukázka
large velký text ukázka
x-large ještě větší text ukázka
xx-large opravdu velký text ukázka
small malý text ukázka
x-small ještě menší text ukázka
xx-small opravdu malý text ukázka

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:

hodnota popis ukázka
none bez dekorace ukázka
underline podtržení ukázka
overline nadtržení ukázka
line-through přeškrtnutí ukázka
blink blikání ukázka

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:

hodnota popis ukázka
none bez transformace ukázka ukázka
uppercase všechna velká ukázka ukázka
lowercase všechna malá ukázka ukázka
capitalize kapitálky (první písmeno velké, další malá) ukázka ukázka

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í.

Fotografie autora
Marek Soldát, marek@soldat.cz
Autor je šéfredaktorem serveru Einstein.cz.
 
Tento článek je součástí seriálu CSS
 
Komentáře
VěcAutorDatum a čas

K článku nejsou žádné komentáře.

Zobrazit Vše | Přidat nový