Kaskádové styly základy grafiky

Rozměr: px

Začít zobrazení ze stránky:

Download "Kaskádové styly základy grafiky"

Klára Havlíčková
před 8 lety
Počet zobrazení:

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 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 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: <p><font color= blue >Text zarovnaný do bloku</font></p> tohle

3 3 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: <p><font color= blue >Text zarovnaný do bloku</font></p> 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 CSS pojmy V souvislosti s CSS se musíme naučit a zapamatovat tři pojmy: Selektor: Vlastnost: Hodnota: Příklad: určení prvku v dokumentu, kterého se daný styl týká druh vzhledu, na kterou se

4 4 CSS pojmy V souvislosti s CSS se musíme naučit a zapamatovat tři pojmy: Selektor: Vlastnost: Hodnota: Příklad: určení prvku v dokumentu, kterého se daný styl týká druh vzhledu, na kterou se následující hodnota použije (například color = barva) Hodnota, která se pro zvolenou Vlastnost použije. Jednotlivé hodnoty jsou odděleny středníkem selektor vlastnost hodnota P { font-size:12px; color: red;}

5 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.

5 5 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 </style>. 3. Použitím externího stylopisu - to je soubor *.css, na který se stránka odkazuje tagem <link>. 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 6 CSS příklady zápisů Jak už víme, jde to třemi způsoby: Chci udělat odstavec červeným písmem pomocí CSS. Přímý zápis Do zdroje se napíše tato deklarace odstavce: <p style="color: red">tento odstavec bude červený.</p> Vysvětlení: <p> 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>: <style> p {color: red} </style> a do těla stránky se mohou psát odstavce: <p>tento odstavec bude červený. </p> <p>tento mimochodem také, protože červené budou všechny.</p> Externím CSS souborem Tento způsob zápisu si necháme na další hodiny

7 7 CSS Syntaxe 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 CSS První kompletní příklad <html> <head> <title>pokus s nadpisy</title> <style> body { background-color:#cccccc;} h1 {color:#0066cc; font-size:14px; font-family:verdana;} h2 {color:#cc6600;

8 8 CSS První kompletní příklad <html> <head> <title>pokus s nadpisy</title> <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;} </style> </head> <body> <h1>první nadpis</h1> <h2>druhý nadpis</h2> <h3>třetí nadpis</h3> <h1>první nadpis znova</h1> </body> </html>

Podobné dokumenty

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem CSS styly - úvod Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem Formátování HTML Každý text má obsah a formu. Když mluvím o formátu