Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Kaskádové styly (CSS.

Podobné prezentace


Prezentace na téma: "CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Kaskádové styly (CSS."— Transkript prezentace:

1 CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují prohlížeče od verze IE 4.0. Je to kolekce metod pro grafickou úpravu webových stránek. Technologii CSS podporují prohlížeče od verze IE 4.0. Je to kolekce metod pro grafickou úpravu webových stránek. Největší výhodou je, že lze oddělit formátování stránky do samostatného souboru. Největší výhodou je, že lze oddělit formátování stránky do samostatného souboru.

2 Nástin možností CSS Nastavení libovolné a přesné velikost písma, prokládání, kapitálek Nastavení libovolné a přesné velikost písma, prokládání, kapitálek Odsazení prvního řádku odstavce, zvětšení řádkování Odsazení prvního řádku odstavce, zvětšení řádkování Zrušení nebo zvětšení prázdného prostoru po odstavci Zrušení nebo zvětšení prázdného prostoru po odstavci Automatické formátování nadpisů Automatické formátování nadpisů Zvýrazňování odkazů po přejetí myší Zvýrazňování odkazů po přejetí myší Automaticky grafické odrážky Automaticky grafické odrážky Zneviditelnění, zprůhlednění nebo nezobrazení určité části textu Zneviditelnění, zprůhlednění nebo nezobrazení určité části textu

3 Nástin možností CSS Předefinování grafického významu běžných tagů Předefinování grafického významu běžných tagů Nastavení pozadí čehokoliv Nastavení pozadí čehokoliv Umístění libovolného objektu kamkoliv do stránky Umístění libovolného objektu kamkoliv do stránky Přidání rolovacích lišt Přidání rolovacích lišt Orámování a nastavení okrajů Orámování a nastavení okrajů Dynamické prvky na stránce Dynamické prvky na stránce

4 Definice CSS stylů CSS styl lze definovat třemi způsoby: CSS styl lze definovat třemi způsoby: in-line zápis (přímý zápis) in-line zápis (přímý zápis) stylopis – zapisuje se v hlavičce HTML stránky stylopis – zapisuje se v hlavičce HTML stránky externí stylopis – externí soubor externí stylopis – externí soubor

5 Definice CSS stylů inline zápis in-line zápis (přímý zápis) – slouží k nastavení parametrů konkrétní značky. in-line zápis (přímý zápis) – slouží k nastavení parametrů konkrétní značky. Za požadovanou značkou se použije parametr style=“ “. Hodnotou tohoto parametru je seznam atributů, které tuto značku ovlivní. Za požadovanou značkou se použije parametr style=“ “. Hodnotou tohoto parametru je seznam atributů, které tuto značku ovlivní. Tento odstavec bude červený. Tento odstavec bude červený.

6 Definice CSS stylů stylopis Stylopis se zapisuje v hlavičce HTML stránky párovou značkou. Uvnitř této značky se definuje požadovaná značka a ve složených závorkách za touto značkou je seznam atributů. Jednotlivé atributy se oddělují středníkem. Stylopis se zapisuje v hlavičce HTML stránky párovou značkou. Uvnitř této značky se definuje požadovaná značka a ve složených závorkách za touto značkou je seznam atributů. Jednotlivé atributy se oddělují středníkem.

7 Definice CSS stylů externí stylopis Externí stylopis se používá pro více WWW stránek. Externí stylopis se používá pro více WWW stránek. Tento stylopis je tvořen externím souborem (např. styl.css), vněmž je styl definován. Tento stylopis je tvořen externím souborem (např. styl.css), vněmž je styl definován. WWW stránka musí obsahovat link na tento soubor. WWW stránka musí obsahovat link na tento soubor.

8 Definice CSS stylů externí stylopis Pro přehlednost a budoucí úpravy vytvořených stránek se doporučuje používat externí stylopis. Pro přehlednost a budoucí úpravy vytvořených stránek se doporučuje používat externí stylopis. Pro více stránek může být jeden stylopis (Stránka vždy musí obsahovat příslušný link) nebo každá stránka může mít stylopis v jiném souboru. Pro více stránek může být jeden stylopis (Stránka vždy musí obsahovat příslušný link) nebo každá stránka může mít stylopis v jiném souboru. Soubor styl.css Soubor styl.css p { color: red; } h1 { font-size: 20pt; color: blue; }

9 Definice CSS stylů Pro větší přehlednost stylopisu je vhodné používat komentáře. Tyto komentáře jsou zapsány mezi oddělovače /* komentář */. Parametry a hodnoty jsou psány písmeny malými. Pro větší přehlednost stylopisu je vhodné používat komentáře. Tyto komentáře jsou zapsány mezi oddělovače /* komentář */. Parametry a hodnoty jsou psány písmeny malými. Pokud je potřeba nastavit společnou vlastnost pro více značek najednou, musí se značky od sebe oddělovat čárkou. Pokud je potřeba nastavit společnou vlastnost pro více značek najednou, musí se značky od sebe oddělovat čárkou. h1, h2, h3, h4 { color: red; }

10 Zápis externího CSS stylu h2 {color: green; font-style: italic; } h2 je selektor = jméno tagu h2 je selektor = jméno tagu {} složené závorky vymezují deklaraci formátu onoho selektoru {} složené závorky vymezují deklaraci formátu onoho selektoru color je vlastnost a blue jeho hodnota (barva: modrá), vlastnost a hodnota jsou odděleny dvojtečkou a mezerou color je vlastnost a blue jeho hodnota (barva: modrá), vlastnost a hodnota jsou odděleny dvojtečkou a mezerou font-style je další vlastnost a italic je její hodnota (řez-fontu: kurzíva) font-style je další vlastnost a italic je její hodnota (řez-fontu: kurzíva) Dvě deklarace se oddělují středníkem Dvě deklarace se oddělují středníkem

11 Otázky k opakování 1. K jakým účelům slouží CSS styly? 2. Jaké možnosti dává použití CCS stylů? 3. Jak lze definovat CSS styly?

12 Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, BLÁBOLIL, Roman. Podpora výuky: „Tvorba www stránek“ [online]. 5. února :30. Dostupný z WWW: Použité obrázky: Vlastní


Stáhnout ppt "CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Kaskádové styly (CSS."

Podobné prezentace


Reklamy Google