11. CSS - vlastnosti písma

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_ 1ICT9roč_11

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - vlastnosti písma

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Použití vybraných CSS vlastností pro nastavení písma.

Klíčová slova: font, font-family, font-style, font-variant, font-size, font-weight.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení písma.

Ověřeno: 21. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

nastaví typ písma (font)
hodnotou je přesný název písma (např. Arial, Verdana, Tahoma, Times New Roman, atd.)
písmo musí být nainstalované v počítači (pozor na exotická písma), doporučuje se používat běžná písma (viz. Bezpečné webové fonty II. (CZ-pro.cz)
lze zapsat více typů písma najednou, použije se vždy první v pořadí (oddělují se čárkou)
doporučuje se uvádět i skupinu písma (serif - patkové, sans-serif - bezpatkové, monospace - strojopis)

selektor {font-family: Arial, Verdana, sans-serif}

nastaví velikost písma
hodnotou může být:
- klíčové slovo (xx-small, x-small, small, medium, large, x-large, xx-large),
- procento (vzhledem k nadřazenému prvku),
- obrazový bod (px) - velikost záleží na rozlišení monitoru,
- textový bod (pt) - jako ve Wordu (není stejné jako pixel), jeden textový bod je 0,35 mm.

selektor {font-size: 14pt}
selektor {font-size: 18px}
selektor {font-size: medium}
selektor {font-size: 125%}

ztuční písmo (nahrazuje HTML element <b> nebo <strong>)
hodnotou může být:
- klíčové slovo (lighter, normal, bold, bolder)
- číslo (100, 200, ... , 900)

selektor {font-weight: bold}

nastaví písmu kurzívu (nahrazuje HTML element <i> nebo <em>)
hodnotou může být
- italic (nastaví kurzívu)
- normal (zruší kurzívu) - není povinné

selektor {font-style: italic}

nastaví písmu kapitálky (malá písmena zobrazí jako velká písmena, ale jejich výška bude zachována)
hodnotou může být:
- small-caps (nastaví kapitálky)
- normal (zruší kapitálky) - není povinné

selektor {font-variant: small-caps}

Vlastnosti písma lze nastavit přímo pomocí jednoho zápisu, je však potřeba dávat si pozor na přesné pořadí zápisu hodnot.

přesné pořadí: [font-style] [font-variant] [font-weight] [font-size] [font-family]
lze vynechat, ale dodržet následné pořadí

selektor {font: italic small-caps bold 16pt Tahoma, sans-serif}
selektor {font: bold 12pt Arial, sans-serif}