KASKÁDOVÉ STYLY - PÍSMO Název školy
Obchodní akademie, Vyšší odborná škola a Jazyková škola s právem státní jazykové zkoušky Uherské Hradiště
Název DUMu
Kaskádové styly – písmo
Autor Datum
Zdeněk Hrdina 8.4.2014
Stupeň a typ vzdělávání Odvětví / Vzdělávací oblast Vzdělávací obor Tematická oblast Druh učebního materiálu Cílová skupina Anotace a popis způsobu použití ve výuce
Střední odborné vzdělávání -- dle RVP.cz --- Informační technologie --- Grafika a web-Výukový materiál Žák, 15 – 19 let Výukový materiál určen k frontální prezentaci učitelem, případně jako materiál pro samostudium, nutno doplnit výkladem, náplň: nastavení rodin písma na webových stránkách
Vybavení, pomůcky Klíčová slova
- PC učebna, projektor, software pro tvorbu webových stránek CSS, HTML, písmo, rodina písma
Číslo projektu Název šablony
CZ.1.07/1.5.00/34.0534 III/2 – Inovace a zkvalitnění výuky prostřednictvím ICT
ZLÍNSKÝ KRAJ
ÚVOD Výukový materiál ve formě pracovního listu se stručným výkladem tématu Kaskádové styly v hodinách APS. Je možno jej také využít v předmětech DAS, APW na oboru IT nebo předmětu ITE na oboru OA. Prezentace doprovází výklad učitele a aktivně zapojuje žáky.
PÍSMO U písma se dá pomocí nastavit velké množství parametrů. Mezi ty nejpoužívanější patří: • rodina písma (font-family) • velikost (font-size) • tučnost (font-weight) • kurzíva (font-style) • kapitálky (font-variant)
FONT-FAMILY • Rodinou písma rozumíme typ jako třeba Arial, Verdana, Times New Roman apod. • Aby se stránka zobrazila v daném písmu, musí být tento typ písma v počítači nainstalovaný. Proto se doporučuje používat standardní typy písma (pozn. existuje i způsob zadání vlastního písma, který je ale nad úrovní tohoto materiálu) • Pro každý prvek mohu nastavit i více písem najednou. V případě, že první písmo nebude nainstalováno, zobrazí se stránka v písmu uvedeném na druhé pozici
• nadpis H1 bude písmem Verdana, pokud není tak Arialem, pokud ani ten není, pak obecným bezpatkovým písmem.
FONT-FAMILY Obecné typy písem: • sans-serif – bezpatkové písmo – Arial, Verdana apod. • serif – patkové písemo – např. Times New Roman
Na obrázku je porovnání textu bezpatkovým a patkovým písmem.
Existují i další varianty, které se ale používají méně (monospace – písmo jako na psacím stroji, cursive – psací písmo)
FONT-SIZE Velikost písma udáváme v různých jednotkách: • pixely – obrazovkové body, zkratka px • body – typografické body, zkratka pt • milimetry – zkratka mm • palce – zkratka in • výška písmena M – zkratka em • procenta – zkratka % • slovně – xx-small, x-small, small, medium, large, x-large, xx-large
FONT-WEIGHT, FONT-STYLE tučné písmo se nastavuje pomocí vlastnosti bold, obyčejné písmo pomocí normal další možnosti jsou zadávat hodnoty tučnosti číselně, nepoužívá se to tak často kurzíva se zadává pomocí vlastnosti font-style: italic, obyčejné písmo pak pomocí normal
FONT-VARIANT pomocí vlastnosti font-variant můžeme nastavit kapitálky (hodnota small-caps) Kapitálky mají velká písmena (napsaná se shiftem) zvýšená proti ostatním písmenům (která jsou také velkými písmeny)
PETR
- kapitálky (P bylo psáno se shiftem ostatní bez) PETR – všechna velká
PROCVIČENÍ Vytvořte nadpisy, které budou vypadat následovně: • písmo Verdana, případně bezpatkové, velikost písma large, tučné, kapitálky – nadpis H1 • písmo Verdana, případně Arial, případně bezpatkové, velikost 12 pixelů, netučné, kurzíva – nadpis H2 • vytvořte jednoduchou stránku, kde budou uvedené nadpisy zobrazeny.
POUŽITÉ ZDROJE www stránky: 1. JANOVSKÝ, Dušan. Jak psát web: Font-family. Jak psát web [online]. [cit. 2014-04-08]. Dostupné z: http://www.jakpsatweb.cz/css/font-family.html 2. JANOVSKÝ, Dušan. Jak psát web: Font-size. Jak psát web [online]. [cit. 2014-04-08]. Dostupné z: http://www.jakpsatweb.cz/css/font-size.html 3. JANOVSKÝ, Dušan. Jak psát web: Font-variant. Jak psát web [online]. [cit. 2014-04-08]. Dostupné z: http://www.jakpsatweb.cz/css/font-variant.html 4. JANOVSKÝ, Dušan. Jak psát web: Font-weight. Jak psát web [online]. [cit. 2014-04-08]. Dostupné z: http://www.jakpsatweb.cz/css/font-weight.html obrázky: zdroj vlastní
