Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


Prezentace na téma: "TNPW1 Technologie pro publikování na webu Cvičení č. 6 CSS – kaskádové styly Martin Adámek."— 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) 2 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 !

3 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ř. –např.

4 TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT) 4 CSS styly – principy definice základní možnosti napojení 1.element v XHTML: typ elementu v CSS: přímo název elementu –např.: h1 2.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ř.: např.: v CSS: předchází tečka (příp. *.) –např.:.skryte 3.jeden konkrétní element v XHTML: parametr „id“ v CSS: předchází křížek –např.: #menu

5 TNPW1, cv. č. 6 – Ing. Martin Adámek (UHK-FIM-KIT) 5 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

6 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.skryteul.menu nebo (pro více různých možností) –oddělení čárkou –např. h1, h2,.podnadpis, div.vpravo, #menu ul, ol vnoření –pro definované prvky obsažené v definovaných prvcích –oddělení mezerami –např. 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

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

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

9 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í

10 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

11 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

12 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=?

13 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 webu


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

Podobné prezentace


Reklamy Google