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/ CSS

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/  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

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/  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

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/  Přímý inline zápis  Pomocí " stylopisu " (angl. "stylesheet") v hlavičce stránky  Použitím externího stylopisu -- to je soubor *.css

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/ Přímý inline zápis  Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". Tento odstavec bude zelený.

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/ 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é

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/ 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

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/  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

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/  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é.

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/  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:

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/  Příklad - zdrojový kódzdrojový kód  Soubor styly.cssstyly.css  Stránka v prohlížečiprohlížeči

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/  KOSEK, Jiří. Vytváříme si domovskou stránku [online] [cit ]. Dostupné z:  JANOVSKÝ, Dušan. Jak psát web [online]. 1999, [cit ]. Dostupné z:  Jak dobře začít s tvorbou webu - po lopatě [online] [cit ]. Dostupné z:  Tvorba webu [online] [cit ]. Dostupné z:  Kaskádové styly. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: styly styly

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/  FOLINI, Franco. Soubor:Håkon Wium Lie.jpg [online] [cit ]. Dostupné z: A5kon_Wium_Lie.jpg A5kon_Wium_Lie.jpg  VIGNONI, David. Soubor:Nuvola mimetypes source css.png [online] [cit ]. Dostupné z: mimetypes_source_css.png mimetypes_source_css.png