Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.

Prezentace na téma: "Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1."— Transkript prezentace:

1 Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1

2 Číslo projektu CZ.1.07/1.5.00/34.0266 Číslo materiálu VY_12_INOVACE_PoP_IN_4E_19 Autor Petr Polách Tematický celek Informační gramotnost Ročník 4. Datum tvorby 11. 5. 2013 Anotace Prezentace slouží jako podpora při výuce tvorby webových stránek Metodický pokyn Prezentace slouží jako podpora při výuce s použitím projektoru nebo programu typu Master Eye. 2

3 3 CSS 1 Vznik 1997 CSS - Cascading Style Sheets, česky „kaskádové styly“ CSS - popis vlastností elementů stránky Pomocí CSS lze formátovat každý element, u kterého to má smysl. Syntaxe: vlastnost:hodnota; color:red; (barva písma) background-color:white; (barva pozadí)

4 4 CSS 2 Použití CSS (lze kombinovat): 1.atributem v textu zdroje u formátovaného elementu style="..." 2.interní stylopis v hlavičce stránky seznam stylů tagem a 3.externí stylopis -- to je soubor *.css, na který se stránka odkazuje tagem – může využívat více stránek => jednotný vzhled celého webulink

5 5 1. atribut style Příklady: Nadpis nějaký text odstavce

6 2. interní stylopis tagem Upravuje vlastnosti všem elementům na stránce určeným selektorem. Píše se do hlavičky stránky. h1 { color:orange; background- color:lightblue; margin-left:50px; font-size:30px; font-weight:bold; letter-spacing:3px; } p { font-family: calibri; color:blue; margin-bottom:0px; font-size:12px; text-indent: 30px; } 6 SELEKTOR

7 7 3. externí stylopis – soubor *.css Totéž co je na předchozím snímku mezi tagy se napíše do samostatného textového souboru např. styly.css Volání externího stylopisu na každé stránce v hlavičce: Lze volat i více stylopisů současně: Změnou v souboru styly.css pak změníme vlastnosti elementu na všech stránkách, které stylopis volají

8 8 Elementy div a span Univerzální párové elementy (kontejnery) DIV blokový element SPAN řádkový element Pozn.: Blokový element nesmí být umístěn v řádkovém elementu

9 9 Třídy a Identifikátory Jména tříd začínají ve stylopisu tečkou. Příklad použití: … Jména identifikátorů začínají ve stylopisu #. (Alt-35) Příklad použití: … Identifikátor musí být na stránce jedinečný, má význam jedinečného jména elementu (např. pro javascript).

10 10 Složené deklarace 1.Hromadná deklarace - pro více elementů najednou: H1, H2, H3 {color: green;} 2.Kontextová deklarace H3 A {font-style: italic;} – formátovány budou pouze odkazy v Nadpisech 3 3.Kombinace více tříd:.zlutepozadi {background-color: yellow;}.vlevo {text-align: left; width: 150px;} a prvek dostane obě třídy: obsah prvku

11 11 Práce s odkazy Nastavení vlastností odkazů: a {font-weight: bold; text-decoration: none;} Nastavení barev odkazů: a:link {color: blue;} nenavštívený odkaz a:visited {color: purple;} navštívený odkaz Změna odkazu po najetí myší na odkaz: a:hover { border: 1px solid black;}

12 Rozměry, některé jednotky JednotkaPopis pxpixels (a dot on the computer screen) %procent nadřízeného elementu inangl. palec cmcentimetr mmmilimetr 12

13 Rozměry, Ohraničení a jiné Příklady: margin: 0; padding: 10px; margin: 0px 10px 5px 20px; border-left: 5px double red; Čáry ohraničení: dotted dashed solid double groove ridge inset outset 13

14 14 Přehled vlastností CSS Kompletní přehled vlastností CSS a jejich možných hodnot naleznete na http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html

15 Cvičení informační gramotnosti 1.Zobrazte si zdrojový kód stránek Vaší školy 2.Zjistěte název souboru s externími styly pro tyto stránky. 3.Tento soubor si nechte zobrazit v prohlížeči a prostudujte jej. 15

16 GRAFIKA Obr. 1: CSS box model (on-line). 11. 5. 2013 Dostupné na: http://imagecss.com/box.htmlhttp://imagecss.com/box.html Ostatní obrázky v prezentaci použité jsou dílem autora. Použité zdroje 16