Strukturování textů - styly

Druhá kapitola o CSS je odbočkou -- zabývá se obecnou problematikou stylů textu. Nastíním, k čemu je to vůbec dobré, přičemž si všimnu i třeba i textových editorů typu Wordu. A začnu příkladem strukturovaného textu.

Příklad s nadpisy

Většina serióznějších textů má nadpis. Tento text má kupříkladu nadpis "Strukturování textů - styly". Dále existují podnadpisy, které většinou uvádějí kapitoly nebo důležitější odstavce. Tento odstavec má podnadpis "Příklad s nadpisy". Text s nadpisy a podnadpisy je nejjednodušší a nejčastější příklad strukturovaného textu. Vizte diagram:

              Nadpis 1. úrovně
                     |
  ---------------------------------------
  |                  |                  |
text          Nadpis 2. úrovně   Nadpis 2. úrovně
                     |                  |
       -----------------------        text
       |                     |
     text             Nadpis 3. úrovně
                             |
                           text

Diagram není přesný ani vyčerpávající. Má pouze ilustrovat, jakým způsobem mohou být strukturovány odstavce s nadpisy a textem. Úrovní nadpisů může být libovolně mnoho (HTML jich například podporuje 6), ale zřídka se použijí více jak tři. Ostatně příliš mnoho úrovní nadpisů působí matoucím dojmem. Aby čtenář poznal, jaké úrovně je ten který nadpis, jsou odlišně formátovány (velikost písma, font, odsazení, barva atd.) -- a to zpravidla tak, aby úrovňově vyšší nadpis byl výraznější než nižší; všechny nadpisy jsou pak výraznější než běžný text.

Pojem stylu

Než budu uvádět další příklady strukturovaných textů, řeknu něco teoretického, totiž svoji definici stylu textu:
Dva kusy textu mají různý styl, pokud se logicky liší jejich role při předávání informace. Dva různé styly se obvykle liší formátováním.

Například text nadpisu má jiný styl než normální text, protože se zřejmě liší jeho "role" v textu: nadpis má uvozovat následující obsah -- normální text je oním vlastním obsahem. Nadpis a text jsou zpravidla odlišně formátovány.

Příklady stylů textu

Styly nejsou jen nadpisy a normální text, zde jsou další náhodné příklady:

Další příklady

A tak dále, stylů existuje velmi mnoho. Chcete-li si najít další příklady stylů, otevřete si nějaké seriózní noviny. Kromě různých úrovní nadpisů najdete podtitulky, nadtitulky, podpisy autorů, popisky tabulek a grafů, tiráž, úvodník, reklamy, sloupeček s obsahem listu, čísla stran a jiné zvláštní styly. Skoro všechny jsou formátovány jinak než běžný text.

K čemu to je dobré?

Jednotný vzhled textů

Je dobré, když například všechny nadpisy stejné úrovně vypadají stejně, písmo má vždy stejný font a podobně. Kdo nevěří, pro toho mám tři důvody:

  1. Je to hezké. Vážně. Přeplácané nebo příliš chudé dokumenty působí amatérsky.
  2. Čtenář se může snáze orientovat, pokud pochopí formátovací konvence. Brzy pozná, co je podnadpis nebo poznámka atd.
  3. Rychlá identifikace textu podle jednotného rázu všech souvisejících textů. Já například poznám druh novin už jenom podle použitého písma a papíru. Takové rozpoznání je obzvláště důležité na Internetu, kde často není poznat, na jakých stránkách zrovna brouzdám.

Snadno se to píše

Autor nemusí při psaní vůbec přemýšlet nad tím, jaký font nebo velikost použije -- stačí, když textům přiřadí nějaký styl. Třeba řekne "tohle bude nadpis".

Jak bude styl vypadat, může rozhodnout později (může to rozhodnout až sazeč / grafik), nebo může použít starší šablonu. Celý vzhled textů se později může snadno měnit předefinováním stylů.

Ale hlavně:

Všechny moderní textové editory podporují definici a užívání jednotných stylů. Stejně tak jazyk HTML, o to více ve spojení s CSS.

Jak to dělat špatně

Snad všichni při psaní používáme nadpisy. Většina se i snaží mít je stejné -- určitým písmem, tučné, velké třeba 16 bodů. Mnozí na to jdou úplně špatně -- při psaní udělají nový odstavec, napíšou text a pak jej ručně a postupně zformátují do žádané podoby. To samozřejmě jde. Někdy je to tak lepší. Ale jsou s tím spojené tři problémy:

Tomuto způsobu stylování se říká přímý formát a prakticky to žádné pořádné stylování není.

Jak to dělat lépe

Praktické stylování se dělá ve dvou krocích.

Všechny modernější textové editory umožňují snadné stylování při psaní. Například Word 95, FP Editor a FP Express.

Přiřazování stylu ve Wordu
Volba stylu ve FP Editoru
Volba stylu v FrontPage Expressu

Každý styl má svoje jméno, které jej jednoznačně identifikuje. Dále má sadu formátovacích vlastností, které určují, jak bude text vypadat. Napříkla já mám ve Wordu styl "Nadpis 1" písmem Times New Roman, 20 bodů velké, tučné, zarovnané na střed.

Šablony a stylopisy

Člověk by se zbláznil, kdyby měl pro každý dokument znovu deklarovat vlastnosti stylů. Proto existují šablony (na webu stylopisy) -- to jsou vlastně kolekce několika stylů, které se k sobě navzájem hodí. S programy bývají dodávány nějaké šablony, lepší je ale tvořit si vlastní (kdyžtak je to v helpce k tomu programu).

V každém programu je nějaká přednastavená (defaultní) šablona, která se použije, pokud není řečeno jinak. Takové šablony obsahují jen velmi málo základních stylů, totiž jenom normální text a pár úrovní nadpisů. I Internetové prohlížeče mají nějaký přednastavený způsob zobrazování základních stylů.

Technologie CSS umožňuje tento přednastavený způsob zobrazování HTML souborů měnit a definovat další vlastní styly.

Další: CSS prakticky. Předchozí: úvod do CSS
Vizte též: třídy a identifikátory v HTML, o co jde na webu -- obsah/forma, stylistika stránek

Píše Yuhů
dusan@pc-slany.cz
mail formulářem
Jak psát web O tvorbě, údržbě a zlepšování internetových stránek.

Základy HTML CSS FrontPage Hledání

Obsah

Hlavní stránka

Novinky

FAQ

Download

Zdroje

Hledání


Rozšířené

Základní kurs

Jak udělat stránku

Základy HTML

Publikování

Zásady psaní

Editory

Různé prohlížeče

Editory

FrontPage 2000

FP Editor 98

Word 97

FrontPage Express

HTML tipy

Příprava obrázků

Obrázky

Odkazy

Vychytávky odkazů

Záložky

Aktivní mail

Tabulky

Úprava tabulek

Novinky tabulek

Design tabulkami

Rámy

Formátování rámů

Rámy nepoužívat

Iframe

Formuláře

Formuláře v HTML

Dokonalé formuláře

Zápis barev

Seznam definic

Formátovací chyby

Jak udělat levé menu

Provoz webu

Rychlost stránek

Vzdálené služby

Vyhledávače

Katalogy

Správa souborů

Obsah / forma

Čeština

Chyby češtiny

Tabulky kódování

Meta tagy

Nastavení serveru

Programování stránek

Používání prohlížeče

CSS styly

CSS styly

Úvod do CSS

Struktura textu

CSS prakticky

Přehled vlastností

Složitější deklarace

Délkové jednotky

Pozicování

Sloupce pozicováním

Okraje objektů

Odlišení prohlížečů

Omezení CSS

Odlišný tisk

Dynamické HTML

Filtry

Příklady filtrů

Různé barvy odkazů

Barva rolovací lišty

 


Jak psát web: http://dusan.pc-slany.cz/internet/

Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz

Poslední aktualizace 27.07.2001