
Eurotel (20%)


T-Mobile (21%)


Oskar (26%)


Jiný (12%)


Nemám mobil (21%)



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:
zarovnání | CSS kód |
doleva | text-align:left; |
doprava | text-align:left; |
na střed | text-align:left; |
do bloku | text-align:left; |
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í.
Věc | Autor | Datum a čas |
K článku nejsou žádné komentáře. | ||
Zobrazit Vše | Přidat nový |