VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS.

Prezentace na téma: "VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS."— Transkript prezentace:

1 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS

2 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  Každý text má obsah a formu  Formátování - barva a velikost písma, pozadí, zarovnání atd. Všechno, co nepatří do obsahu.  Starší způsob používá přímo HTML tagy (například kurzíva se dělá pomocí tagů a : kurzíva ).  Novější způsob -- CSS styly -- používá tag a obecný atribut "style", kterému se přiřazuje nějaká definice

3 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  V anglickém originále Cascading Style Sheets  Česky "kaskádové styly“  Jazyk byl navržen standardizační organizací W3C  Autorem prvotního návrhu byl Håkon Wium Lie.  Oddělení vzhledu dokumentu od jeho struktury a obsahu

4 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  Přímý inline zápis  Pomocí " stylopisu " (angl. "stylesheet") v hlavičce stránky  Použitím externího stylopisu -- to je soubor *.css

5 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 Přímý inline zápis  Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tento odstavec bude zelený.

6 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky  Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy p {color: green} Všechny odstavce na stránce budou zelené

7 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 Použitím externího stylopisu -- to je soubor *.css  Vytvoří se soubor, který se pojmenuje například styly.css. V něm bude pouze tento text: p {color: green}  Do hlavičky html dokumentu se musí napsat odkaz na tento soubor:  Budeme používat tento způsob – extérní stylopis

8 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  Otevřete PSPad editor  Vyberte „Vytvořit nový soubor“/ Cascading Style Sheet  Soubor uložíme do složky html_4 pod názvem styly.css

9 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  Do souboru styly.css napište: body {background: silver url(obrazek.jpg)} je totéž jako body {background-color: silver ; background- image: url("pozadi.jpg")} Na pozadí bude obrázek a pokud se nezobrazí, tak bude pozadí šedé.

10 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  Do souboru styly.css napište: h1 {color: green; text-align: center} h2 {color: blue; font-style: italic} p {text-indent: 30px; color: #A1F2D3; font-size: 24px; margin: 0px 0px 0px 0px; } Text-indent je odsazení prvního řádku, color je barva písma, size je velikost písma a margin jsou okraje - zde nastavené všude na nulu.  Do souboru index.html do hlavičky napište:

11 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  Příklad - zdrojový kódzdrojový kód  Soubor styly.cssstyly.css  Stránka v prohlížečiprohlížeči

12 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  KOSEK, Jiří. Vytváříme si domovskou stránku [online]. 1999 [cit. 2012-10-17]. Dostupné z: http://www.kosek.cz/clanky/html/index.html http://www.kosek.cz/clanky/html/index.html  JANOVSKÝ, Dušan. Jak psát web [online]. 1999, 14. 10. 2012 [cit. 2012-10-17]. Dostupné z: http://www.jakpsatweb.cz/http://www.jakpsatweb.cz/  Jak dobře začít s tvorbou webu - po lopatě [online]. 2006 [cit. 2012-11-03]. Dostupné z: http://polopate.jakpsatweb.cz/index.php?page=uvod http://polopate.jakpsatweb.cz/index.php?page=uvod  Tvorba webu [online]. 2003 [cit. 2012-11-03]. Dostupné z: http://www.tvorba-webu.cz/xhtml/ http://www.tvorba-webu.cz/xhtml/  Kaskádové styly. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2004-2012 [cit. 2012-11-21]. Dostupné z: http://cs.wikipedia.org/wiki/Kask%C3%A1dov%C3%A9_ styly http://cs.wikipedia.org/wiki/Kask%C3%A1dov%C3%A9_ styly

13 VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501  FOLINI, Franco. Soubor:Håkon Wium Lie.jpg [online]. 2007 [cit. 2012-11-11]. Dostupné z: http://cs.wikipedia.org/wiki/Soubor:H%C3% A5kon_Wium_Lie.jpg http://cs.wikipedia.org/wiki/Soubor:H%C3% A5kon_Wium_Lie.jpg  VIGNONI, David. Soubor:Nuvola mimetypes source css.png [online]. 2005 [cit. 2012-11-11]. Dostupné z: http://cs.wikipedia.org/wiki/Soubor:Nuvola_ mimetypes_source_css.png http://cs.wikipedia.org/wiki/Soubor:Nuvola_ mimetypes_source_css.png