TNPW1 Technologie pro publikování na webu

Prezentace na téma: "TNPW1 Technologie pro publikování na webu"— Transkript prezentace:

1 TNPW1 Technologie pro publikování na webu
Cvičení č. 6 CSS – kaskádové styly Martin Adámek

2 TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)
CSS styly – smysl výhody CSS pro formátování elementů hromadně – obdobně jako styly ve Wordu výhody CSS pro definici rozložení plovoucí, přizpůsobující se snadné přepínání vzhledu dle požadavků rozlišení kontrast, barvy, témata např. v TNPW1 povoleny pouze styly definované v připojeném externím CSS souboru, ne přímo v XHTML ! TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

3 CSS styly – propojení CSS a XHTML
v hlavičce XHTML pomocí link rel připojen CSS soubor, ve kterém jsou styly definovány např. <link href="styly.css" rel="stylesheet" type="text/css" media="all" title=„Základní styl" /> TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

4 CSS styly – principy definice
základní možnosti napojení element v XHTML: typ elementu v CSS: přímo název elementu např.: h1 třída název třídy si určuje autor, nemá žádný další význam v XHTML: parametr „class“ možnost přiřadit jednomu elementu více tříd (na pořadí tříd nezáleží) např.: <td class=„levy lichy dolni"> </td> v CSS: předchází tečka (příp. *.) např.: .skryte jeden konkrétní element v XHTML: parametr „id“ v CSS: předchází křížek např.: #menu TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

5 TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)
CSS styly – příklad příklad části CSS kódu h1, .h0 { text-align: center; background-color: white; color: black; border: black 1px solid; margin: 0.5em; } /*****jakákoliv poznámka**/ k dispozici Bradbury TopStyle Lite TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

6 CSS styly – principy kombinací
a zároveň (omezení, užší určení) element tečka třída (bez mezery!) např. h2.skryte ul.menu nebo (pro více různých možností) oddělení čárkou h1, h2, .podnadpis, div.vpravo, #menu ul, ol vnoření pro definované prvky obsažené v definovaných prvcích oddělení mezerami ul.menu li styl se týká právě elementů „li“, které jsou vloženy v elementu „ul“, který má třídu „menu“ div img styl se týká právě elementů img (=obrázků) vložených v elementu div TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

7 CSS styly – principy kombinací – příklady
h1, .dulezite, #menu {color: red;} /* čárka: následuje další, nezávislé určení, pro které elementy tato definice stylu platí nic: typ elementu tečka: třída křížek: id */ ul li {color: black;} /* mezera: pouze pro li, které je částí ul (nikoliv pro jiné li) */ p.ukazka {font-weight: bold;} /* tečka: pouze pro odstavec, který má nastavenu třídu ukazka */ TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

8 Drobná upozornění – prevence chyb – 1. nadpisy
Obrázkový nadpis (webu, stránky, části stránky) je důležitý, není dekorace musí být zobrazen i bez stylů, v čistém XHTML => nesmí být maskován jako dekorace v CSS => musí být vložen v <img> v XHTML text nadpisu musí být opsaný v parametru alt dle povahy nadpisu je obrázek s nadpisem celý vložen v h1, h2, apod. – jako by to byl textový nadpis TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

9 Drobná upozornění – prevence chyb – 1. nadpisy
správné provedení nadpisů je důležité pro sémantiku! případné zrealizování nadpisu celého webu pouze obrázkem v CSS způsobí bodovou ztrátu na asi třech místech hodnotící tabulky protože jednou ranou způsobí několik různých potíží za různých situací TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

10 Drobná upozornění – prevence chyb – 2. písma
patkové x bezpatkové neproporciální x proporciální iiii x iiii mmmm x mmmm příklady a vhodnost bezpatkových x patkových písem pro konkrétní použití vizte TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

11 Drobná upozornění – prevence chyb – 2. písma
generická rodina písem je např. Serif (Arial, Times, apod. jsou konkrétní písma) v jedné definici nemíchejte patková a bezpatková písma pro kapitálky (z okrasných důvodů) používejte definici v CSS, nikoliv Shift či CapsLock v XHTML neplatí pro běžné zkratky, které mají být velké z podstaty TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

12 Drobná upozornění – prevence chyb – 3. barvy
volte dostatečný kontrast mezi popředím a pozadím představte si své dílo monochromaticky (např. černobíle) např. tmavě červená nebo tmavě modrá nemusí být např. na černé viditelná pro každého vyzkoušejte a vylaďte i zobrazení při vypnutých/nedostupných obrázcích ve Firefoxu aby bylo možné přečíst alt text obrázku nastavte obrázku nebo odkazu barvu textu kontrastní s barvou podkladu při nastavení obrázkového pozadí pod textem nastavte současně barvu pozadí blízkou barvu obrázku aby bylo možné přečíst text i v případě, že se obrázek, který má být na pozadí, nestáhne příklad=? TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)

13 Bodovaný úkol – dnešní zadání
Vytvořte stránku s použitím prvků: různé texty (např. nadpisy, odkazy, strong, em, ...) připojený externí soubor CSS vazby stylů definovány přes typ elementu – např. „p“ třída (class) – např. „.uvod“ konkrétní ID – např. „#menu“ kombinace různých pravidel vnoření – typu „ul li” element určité třídy – typu „p.uvod” definované CSS styly budou v XHTML kódu použity, budou se na stránce viditelně projevovat nezapomeňte na validitu XHTML ohodnocení úkolu: 2 body obecná pravidla jsou na webu TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT)