V minulé lekci našeho výukového seriálu jsme vytvořili úvodní stránku našeho webu - index.html. Dnes si doplníme některé další styly, kterými upravíme vzhled textu.
Nejprve si v prohlížeči otevřeme již zpracovanou stránku index.html. Během minulé lekce jsme do ní vložili text. Pro text jsme dosud nezadali jakékoli vlastnosti, nevytvořili jsme styl. Z toho důvodu prohlížeč interpretuje text určitým standardním způsobem. Chtěli bychom však změnit vzhled textu - a to pokud se týká vzhledu nadpisu i pokud se týká ostatních odstavců.
Otevřeme tedy soubor styly.css pomocí programu TopStyle Lite, který používáme pro zpracování stylů. Pokud chceme, aby se ve veškerých prvcích, umístěných v těle stránky, používal jeden určitý druh písma (font), zadáme jej jako vlastnost značky body. Vytvoříme si tedy nový prázdný řádek za vlastností body-color - viz obrázek.
Nyní použijeme seznam StyleInspector, kde najdeme vlastnost font-family a nastavíme ji podle následujícího obrázku:
Z tohoto seznamu fontů bychom mohli vybrat také konkrétní jednotlivý font. Je však lepší vybrat skupinu fontů - jako na obrázku. To zajistí, že písmo se bude zobrazovat správně bez ohledu na operační systém počítače (naše stránky si mohou prohlížet také uživatelé počítačů MacIntosh apod.). Mohli bychom pokračovat i definicí dalších vlastností písma (např. velikost font-size, řez font-style, tučnost font-weight apod.), tyto vlastnosti je však vhodné definovat později u stylů, které budeme vytvářet pro konkrétní značky (např. pro nadpisy <h1>...<h2> apod.).
V prohlížeči si aktualizujeme stránku index.html, abychom zjistili, jak vypadá písmo nyní.
Na stránce (později i na ostatních stránkách) využíváme nadpisy, které se v HTML kódu zapisují pomocí značky <h1> (nadpis 1. úrovně, pro nadpisy dalších úrovní potom můžeme využívat značky <h2>, <h3> až <h6>).
Pokračujeme tedy s prací v souboru…
