Kaskádové styly – formátujeme texty

V předchozích dílech seriálu jsem podrobně popsal, jak se nastavují fonty, velikost písma, a další vlastnosti. Z hlediska práce s textem ještě velmi chybí popsat možnosti zarovnávání textu doleva, na střed, doprava apod. Tím se také bude zabývat tento díl.

Základní vlastností, která se používá pro zarovnávání textu je vlastnost text-align:

p { text-align: justify; }

V zápisu pomocí text-align můžete použít celkem čtyři hodnoty, a to left, center, right a justify. Left způsobuje zarovnání textu doleva, center doprostřed, right doprava a justify do bloku.

Ačkoli vlastnost text-align uvádím v souvislosti se zarovnáváním textu, je potřeba napsat, že její použití je daleko širší. Vlastnost text-align totiž slouží k zarovnávání libovolného blokového elementu. Jednoduše řečeno, pomocí vlastnosti text-align snadno zarovnáte nejenom odstavec textu, ale můžete jej použít třeba na tabulky, jednotlivé buňky tabulky, oblasti ohraničené pomocí značky <div>, a mnohé další.

Z toho také vyplývá, že pokud potřebuje zarovnat všechny tabulky v HTML stránce na střed, uděláte to pomocí kaskádových stylů velice snadno:

table { text-align: center; }

Takto zarovnat tabulku si můžete snadno zkusit v Internet Exploreru. Bohužel možnosti ovládání tabulek pomocí kaskádových stylů v Netscape Navigatoru jsou zatím prakticky nulové, takže tam to pracovat nebude. Uvidíme, co přinese projekt Mozilla (nástupce Navigatora).

Pokud se vrátíme k textu, tak jistě uznáte, že k dokonalému textu patří i dobře provedené odstavce. Podle zvyklostí má být první řádek odstavce mírně osazen vpravo, asi takto:

      Toto je ukázka odstavce, který má první řádku mírně odsazenou vpravo. Každý odstavec by měl začínat první řádkou, která je takto odsazena vpravo. Další řádky už by odsazené být neměly.

Za normálních okolností prohlížeč odsazení neprovádí. Donutit ho k tomu můžete pomocí vlastnosti text-indent. Například takto odsadíte první řádku každého odstavce vpravo o 1 cm:

p { text-indent:1cm; }

U vlastnosti text-indent můžete použít všechny jednotky, které jsem zmínil v díle o nastavování velikost písma. Takže následující zápisy jsou také správné:

p { text-indent:150%; }
p { text-indent:2em; }

Další vlastností je řádkování. Řádkováním vlastně řídíte výšku řádku, jinak řečeno říkáte, jaké budou výškové mezery mezi řádky. Toto se nastavuje vlastností line-height:

p { line-height:120%; }

Za slovo line-height můžete napsat buď číslo, nebo jakoukoli jednotku, která je použita v díle o nastavování velikost písma. Pokud použijete {line-height:1}, nebo {line-height:100%}, potom budou řádky "nalepeny" na sebe:

Toto je první řádek.
Toto je druhý řádek.

Pokud použijete {line-height:2}, nebo {line-height:200%}, potom bude výška řádku dvakrát tak vysoká, než v předchozím případě:

Toto je první řádek.
Toto je druhý řádek.
Podobně je to s jinými hodnotami pro vlastnost line-height.

Všechny, tomto díle uvedené vlastnosti, patří mezi naprosto základní kameny kaskádových stylů, a proto s jejich podporou u prohlížečů nebývají žádné větší problémy. Pro formátování textů a odstavců je podporují jak Netscape Navigator, tak i Internet Explorer naprosto bez problémů. Podobné to bude i u dalších prohlížečů, které proklamují podporu kaskádových stylů CSS. Pokud chcete použít dnes uvedené vlastnosti na jiné blokové elementy, jako jsou tabulky, potom už podpora prohlížečů nebývá tak jednoznačná. Například Internet Explorer většinou pracuje, ale Netscape Navigator (mám verzi 4.51) je nezobrazuje. Ale jak říkám, pro texty a odstavce fungují oba prohlížeče dobře.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.