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

Číslo projektu CZ.1.07/1.5.00/ Čí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 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 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 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 1. atribut style Příklady: Nadpis nějaký text odstavce

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 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 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 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 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 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;}

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

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 Přehled vlastností CSS Kompletní přehled vlastností CSS a jejich možných hodnot naleznete na

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

GRAFIKA Obr. 1: CSS box model (on-line) Dostupné na: Ostatní obrázky v prezentaci použité jsou dílem autora. Použité zdroje 16