CSS styly 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. Největší výhodou je, že lze oddělit formátování stránky do samostatného souboru.

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

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

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

Definice CSS stylů inline zápis 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í. <p style="color: red">Tento odstavec bude červený.</p>

Definice CSS stylů stylopis Stylopis se zapisuje v hlavičce HTML stránky párovou značkou <style>. 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. <style> p { color: red; } h1 { font-size: 20pt; color: blue; } </style>

Definice CSS stylů externí stylopis 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. WWW stránka musí obsahovat link na tento soubor. <link rel="stylesheet" href="styl.css" type="text/css" />

Definice CSS stylů 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. Soubor styl.css  p { color: red; } h1 { font-size: 20pt; color: blue; }

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

Zápis externího CSS stylu h2 {color: green; font-style: italic; } h2 je selektor = jméno tagu {} 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 font-style je další vlastnost a italic je její hodnota (řez-fontu: kurzíva) Dvě deklarace se oddělují středníkem

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

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