1 1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů2 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku Pojem CSS by...
Kaskádové styly – základy grafiky •Vymezení pojmů •Historie •Základy stylů
Informatika, 9. ročník, CSS
2 Informatika, 9. ročník, CSS
Co je to CSS? • Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod pro formátování webových stránek". Česky se tomu obecně říká kaskádové styly. V originále je to název Cascading Style Sheets. • Proč kaskádové? Kaskádové proto, že se jednotlivé stylování dá vršit na sebe do pomyslných kaskád.
Co vlastně CSS dělá? • CSS formátují webové stránky, podle toho, jak uživatel chce, a také zajišťují další variabilní úpravu stránek takto stylovaných. Některé vlastnosti se dají nahradit také klasikou - definování HTML tagů. • Abychom lépe pochopili jak se CSS používá, ukážeme si to na příkladu…
3 Informatika, 9. ročník, CSS
CSS – příklad 1 Pokud chceme, aby text ve všech odstavcích dokumentu měl modrou barvu musíme v každém odstavci použít zápis:
Text zarovnaný do bloku
tohle píšete u každého odstavce . Nebo jednou do CSS v hlavičce uvedete vlastnost
p {color: blue;} • Tento zvláštní zápis si na následujících snímcích vysvětlíme. Nejprve si ale definujme některé pojmy.
4 Informatika, 9. ročník, CSS
CSS – pojmy V souvislosti s CSS se musíme naučit a zapamatovat tři pojmy: Selektor:
určení prvku v dokumentu, kterého se daný styl týká
Vlastnost:
druh vzhledu, na kterou se následující hodnota použije (například color = barva)
Hodnota:
Hodnota, která se pro zvolenou Vlastnost použije. Jednotlivé hodnoty jsou odděleny středníkem
Příklad:
selektor
vlastnost
P { font-size:12px;
hodnota
color: red;}
5 Informatika, 9. ročník, CSS
CSS – trojí použití Styl se může deklarovat třemi způsoby: 1. Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tomu se říká přímý styl. Je to nešikovné, ale občas se to používá. Pro jednoduchost s tímto způsobem zápisu začneme. 2. Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky. Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například že nadpisy mají být zelené. Do hlavičky se stylopis píše mezi tagy <style> a . 3. Použitím externího stylopisu - to je soubor *.css, na který se stránka odkazuje tagem . V souboru je umístěný stylopis. Hlavní výhoda je v tom, že na jeden takový soubor se dá nalinkovat mnoho stránek, takže pak všechny mohou vypadat stejně. My se v hodinách budeme věnovat prvním dvěma zápisům.
6 Informatika, 9. ročník, CSS
CSS – příklady zápisů Chci udělat odstavec červeným písmem pomocí CSS. Jak už víme, jde to třemi způsoby: Přímý zápis • Do zdroje se napíše tato deklarace odstavce: •
Tento odstavec bude červený.
• Vysvětlení:
je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut použitelný u každého prvku. Color znamená barva a red je červená. Stylopisem • Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style>: • <style> p {color: red} • a do těla stránky se mohou psát odstavce: •
Tento odstavec bude červený.
Tento mimochodem také, protože červené budou všechny.
Externím CSS souborem • Tento způsob zápisu si necháme na další hodiny
7
CSS – Syntaxe
Informatika, 9. ročník, CSS
• CSS nejsou součástí HTML, a tak se zapisují zcela jiným způsobem, jak už jste si možná všimli.
• Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky. Pokud si některé znaménko popletete, nebude to pravděpodobně fungovat. Příklad správného zápisu: h2 {color: green; background-color: yellow} • Mezery a konce řádků příliš velkou roli nehrají, mohou se přidávat a vypouštět. Velikost písmen nehraje roli. • Hodnoty, které prohlížeč nezná, ignoruje.
8 Informatika, 9. ročník, CSS
CSS – První kompletní příklad Pokus s nadpisy <style> body { background-color:#CCCCCC;} h1 {color:#0066CC; font-size:14px; font-family:Verdana;} h2 {color:#CC6600; font-size:12px; font-family:Verdana;} h3 {color:#669933; font-size:9px; font-family:Verdana;}
