1 / 12

CSS styly

CSS styly. Kaskádové styly (CSS – C ascading S tyle S heets ) 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.

marlow
Download Presentation

CSS styly

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS styly • Kaskádové styly (CSS – CascadingStyle 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.

  2. 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

  3. 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

  4. 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

  5. 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>

  6. 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>

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

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

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

  10. 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

  11. 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?

  12. 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í

More Related