návaznost na předchozí práci a uvedení problému „Selektory, dědičnost a kaskáda“. 5–12 min: teoretické minimum – selektor, třída, identifikátor, dědičnost, kaskáda, priorita. 12–18 min: společná ukázka principu a kontrolních kritérií. 18–36 min: samostatná práce nebo práce ve dvojici – Opravit konfliktní pravidla a vytvořit přehledné třídy. 36–41 min: test, vzájemná kontrola nebo cílená konzultace. 41–45 min: uložení výstupu (Opravený styl s vysvětlením), krátká reflexe a určení dalšího kroku.
Strukturovaný a publikovatelný digitální obsah · 45 minut
Selektory, dědičnost a kaskáda
Předvídá použití stylovacích pravidel a opraví konflikt.
00
ČASOVÁ OSA
Struktura 45minutové hodiny
01
VIDEO LEKCE
Ukázka a vysvětlení postupu
▶
Video je připravené k doplnění
Video ukáže princip, první kroky, kontrolu a typickou chybu. Nebude obsahovat celý hotový upravitelný úkol.
provider: youtube · youtubeId: ""02
STUDIJNÍ MATERIÁL
Výklad: z čeho se učíš
Téma „Selektory, dědičnost a kaskáda“ patří do celku „Strukturovaný a publikovatelný digitální obsah“. Nejde pouze o ovládání nástroje: cílem je porozumět rozhodnutím, která vedou od zadání k ověřitelnému digitálnímu výstupu.
Klíčové pojmy selektor, třída, identifikátor popisují základní stavební prvky dnešní práce. Pojmy dědičnost, kaskáda, priorita pomáhají výsledek kontrolovat, vysvětlit nebo porovnat s jinou variantou. Každý pojem proto použij v konkrétním kroku, nikoli jen v definici.
Pracovat budeš v prostředí „CSS nebo stylovací prostředí“. Nejprve si uchovej původní podklady, potom vytvoř pracovní kopii a změny prováděj po menších ověřitelných krocích. Po každé důležité změně výsledek otevři, spusť nebo porovnej s požadovaným chováním.
Praktické zadání zní: Opravit konfliktní pravidla a vytvořit přehledné třídy. Výsledkem je „Opravený styl s vysvětlením“. Nestačí, aby výstup pouze existoval; musí být možné doložit, že splňuje cíl: Předvídá použití stylovacích pravidel a opraví konflikt.
Kvalitu posuzuj podle těchto hledisek: Správný výsledek a omezení zbytečné specificity. Před odevzdáním zkontroluj názvy a strukturu souborů, funkčnost na čistém nebo cílovém prostředí a připoj stručnou reflexi rozhodnutí, testu a případné opravy.
Slovníček pojmů
selektor
Zápis v CSS určující, na které prvky se má pravidlo použít.
třída
Pojem „třída“ označuje konkrétní prvek nebo pravidlo používané při tématu této lekce; jeho význam se ověřuje na pracovním příkladu a podle výsledného výstupu.
identifikátor
Pojem „identifikátor“ označuje konkrétní prvek nebo pravidlo používané při tématu této lekce; jeho význam se ověřuje na pracovním příkladu a podle výsledného výstupu.
dědičnost
Přenášení některých vlastností z rodičovského prvku na jeho potomky.
kaskáda
Pravidla, podle kterých prohlížeč rozhoduje mezi více CSS deklaracemi působícími na stejný prvek.
priorita
Pojem „priorita“ označuje konkrétní prvek nebo pravidlo používané při tématu této lekce; jeho význam se ověřuje na pracovním příkladu a podle výsledného výstupu.
03
ŘÍZENÁ PRÁCE
Postup krok za krokem
- 01
Otevři prostředí „CSS nebo stylovací prostředí“ a vytvoř si vlastní pracovní složku s číslem lekce. Původní podklady neměň; nejprve je zkopíruj do pracovní verze.
- 02
Přečti zadání a napiš si jednou větou očekávaný výsledek: Opravený styl s vysvětlením. Označ vstupy, omezení a nejméně tři kontrolní kritéria.
- 03
Otevři startovní webový balíček. Zkontroluj odkazy mezi soubory a spusť `index.html` v prohlížeči.
- 04
Uprav strukturu, obsah nebo styl po malých krocích. Po každé změně obnov stránku a zkontroluj konzoli a odkazy.
- 05
Proveď sebekontrolu podle kritérií: Správný výsledek a omezení zbytečné specificity. Zaznamenej alespoň jeden test nebo porovnání.
- 06
Ulož zdrojovou i výslednou verzi pod jednoznačnými názvy. Odevzdej „Opravený styl s vysvětlením“ a krátce popiš, jak jsi ověřil/a správnost.
04
PRACOVNÍ PODKLADY
Stáhni si soubory, se kterými budeš pracovat
Náhled ukazuje pouze strukturu a typ výsledku. Hotové upravitelné řešení ve studentské části není.
Důležité: Podklady jsou vstupy k práci, nikoli kompletní řešení. Vlastní výsledek musí vzniknout podle zadání, testu a reflexe.
05
OTEVŘENÉ ODPOVĚDI
Pracovní list
1. Výchozí představaNapiš konkrétní příklad, ne pouze obecný dojem.
Co už o tématu „Selektory, dědičnost a kaskáda“ víš a kde ses s ním setkal/a?
2. Práce s pojmyKe každému pojmu přidej situaci, ve které ovlivňuje rozhodnutí.
Vysvětli vlastními slovy alespoň tři pojmy: selektor, třída, identifikátor, dědičnost, kaskáda, priorita.
3. Rozhodovací situaceUveď kritérium, důkaz a možné omezení.
Jaké dvě možné varianty řešení připadají v úvahu a podle čeho mezi nimi rozhodneš? Téma: Selektory, dědičnost a kaskáda.
4. Plán praktické prácePostup musí obsahovat vstup, konkrétní kroky, kontrolu a výstup.
Rozepiš vlastní postup k zadání: Opravit konfliktní pravidla a vytvořit přehledné třídy.
5. SebekontrolaFormuluj kontrolní otázky, které lze skutečně zodpovědět ano/ne nebo měřením.
Jak ověříš, že je výstup „Opravený styl s vysvětlením“ správný? Vycházej z kritérií: Správný výsledek a omezení zbytečné specificity.
6. Exit ticketOdpověď má být konkrétní a vztahovat se k dnešní práci.
Napiš jeden princip, jednu provedenou kontrolu a jeden další krok.
06
PRAKTICKÁ PRÁCE
Selektory, dědičnost a kaskáda
Opravit konfliktní pravidla a vytvořit přehledné třídy.
Očekávaný výstup
Opravený styl s vysvětlením
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Opravený styl s vysvětlením
Odevzdej výstup „Opravený styl s vysvětlením“. Přilož zdrojové soubory nebo export a krátce popiš, jak jsi výsledek zkontroloval/a.
Zatím nebyl vybrán žádný soubor.
Offline verze ukládá pouze odpovědi a názvy vybraných souborů v prohlížeči; skutečný upload provede Studio po napojení API.
08
ZÁVĚREČNÁ KONTROLA
Test
09
REFLEXE
Co si z lekce odnášíš
Dokončeno neznamená pouze vytvořeno. Výsledek je dokončený tehdy, když je uložený, otevřitelný, otestovaný a vysvětlitelný podle kritérií. Zapiš jednu provedenou kontrolu, jednu opravu a jeden další krok.