My Terrarium
``` **Co tento kód dělá:** - **Aplikuje** červenou barvu přímo na `` prvek pomocí inline stylu
- **Používá** atribut `style` pro vložení CSS přímo do HTML
- **Vytváří** styl s nejvyšší prioritou pro tento konkrétní prvek
Dále přidejte toto pravidlo do vašeho souboru `style.css`:
```css
h1 {
color: blue;
}
```
**V uvedeném jsme:**
- **Definovali** CSS pravidlo, které cílí na všechny `` prvky
- **Nastavili** barvu textu na modrou pomocí externího stylopisu
- **Vytvořili** pravidlo s nižší prioritou oproti inline stylům
✅ **Ověření znalostí**: Jaká barva se zobrazí ve vaší webové aplikaci? Proč tato barva vyhraje? Můžete vymyslet situace, kdy byste chtěli styly přepsat?
```mermaid
flowchart TD
A["Prohlížeč narazí na prvek h1"] --> B{"Kontrola vložených stylů"}
B -->|Nalezeno| C["style='color: red'"]
B -->|Žádné| D{"Kontrola pravidel podle ID"}
C --> E["Použij červenou barvu (1000 bodů)"]
D -->|Nalezeno| F["#heading { color: green }"]
D -->|Žádné| G{"Kontrola pravidel podle třídy"}
F --> H["Použij zelenou barvu (100 bodů)"]
G -->|Nalezeno| I[".title { color: blue }"]
G -->|Žádné| J{"Kontrola pravidel podle elementu"}
I --> K["Použij modrou barvu (10 bodů)"]
J -->|Nalezeno| L["h1 { color: purple }"]
J -->|Žádné| M["Použij výchozí nastavení prohlížeče"]
L --> N["Použij fialovou barvu (1 bod)"]
style C fill:#ff6b6b
style F fill:#51cf66
style I fill:#339af0
style L fill:#9775fa
```
> 💡 **Pořadí priority CSS (od nejvyšší po nejnižší):**
> 1. **Inline styly** (atribut style)
> 2. **ID selektory** (#myId)
> 3. **Třídy** (.myClass) a atributy
> 4. **Element selektory** (h1, div, p)
> 5. **Výchozí styly prohlížeče**
## CSS dědičnost v praxi
CSS dědičnost funguje jako genetika – prvky dědí určité vlastnosti od svých rodičovských prvků. Pokud nastavíte font family na element ``, veškerý text uvnitř automaticky používá stejný font. Je to podobné, jako charakteristická čelist habsburské rodiny, která se objevila v několika generacích, aniž by byla definována pro každého jednotlivce.
Není však všechno dědičné. Textové styly jako fonty a barvy ano, ale rozvržení jako okraje a rámečky se nedědí. Stejně jako děti mohou zdědit fyzické rysy, ale ne oblečení svých rodičů.
### Pozorování dědičnosti fontu
Podívejme se na dědičnost v akci nastavením font family na element ``:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**Co se zde děje:**
- **Nastavuje** font family pro celou stránku cílením na element ``
- **Používá** font stack s náhradními možnostmi pro lepší kompatibilitu
- **Aplikuje** moderní systémové fonty, které vypadají skvěle na různých operačních systémech
- **Zajišťuje**, že všechny podřízené prvky dědí tento font, pokud není specificky přepsán
Otevřete nástroje pro vývojáře prohlížeče (F12), přejděte na záložku Elements a prohlédněte si váš `` element. Uvidíte, že dědí font family od těla:
✅ **Zkouška**: Vyzkoušejte nastavit další děditelné vlastnosti na element ``, např. `color`, `line-height` nebo `text-align`. Co se stane s vaším nadpisem a dalšími prvky?
> 📝 **Mezi děditelné vlastnosti patří**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **Mezi neděditelné vlastnosti patří**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Pedagogická kontrola**
**Pochopení základů CSS**: Než přejdeme k selektorům, ujistěte se, že umíte:
- ✅ Vysvětlit rozdíl mezi kaskádou a dědičností
- ✅ Předpovědět, který styl vyhraje při konfliktu specifičnosti
- ✅ Identifikovat vlastnosti děditelné z rodičovských prvků
- ✅ Správně propojit CSS soubory s HTML
**Rychlý test**: Pokud máte tyto styly, jakou barvu bude mít `` uvnitř ``?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Odpověď: Červená (element selektor přímo cílí na h1)*
## Ovládání CSS selektorů
CSS selektory jsou způsob, jak cílit na konkrétní prvky pro stylování. Fungují jako přesné instrukce – místo „dům“ řeknete „modrý dům s červenými dveřmi v ulici Maple“.
CSS nabízí různé způsoby, jak být specifický, a správný výběr selektoru je jako výběr správného nástroje pro práci. Někdy potřebujete stylovat všechny dveře v okolí, jindy jen jedny konkrétní.
### Element selektory (tagy)
Element selektory cílí na HTML prvky podle jejich značky. Jsou ideální pro nastavení základních stylů, které se mají aplikovat široce na stránce:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Rozbor těchto stylů:**
- **Nastavuje** konzistentní typografii pro celou stránku pomocí selektoru `body`
- **Odstraňuje** výchozí okraje a padding prohlížeče pro lepší kontrolu
- **Styluje** všechny nadpisové elementy barvou, zarovnáním a odsazením
- **Používá** jednotky `rem` pro škálovatelné, přístupné velikosti písma
Zatímco element selektory fungují dobře pro obecné stylování, budete potřebovat specifičtější selektory pro stylování jednotlivých komponent jako jsou rostliny ve vašem terráriu.
### ID selektory pro unikátní prvky
ID selektory používají symbol `#` a cílí na prvky se specifickým atributem `id`. Protože ID musí být na stránce unikátní, jsou ideální pro stylování izolovaných, speciálních prvků jako naše levé a pravé kontejnery rostlin.
Vytvořme stylování pro postranní kontejnery našeho terrária, kde rostliny budou:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Co tento kód umí:**
- **Umísťuje** kontejnery k levému a pravému okraji pomocí `absolute` pozicování
- **Používá** jednotky `vh` (výška viewportu) pro responzivní výšku přizpůsobující se velikosti obrazovky
- **Aplikuje** `box-sizing: border-box` tak, aby padding byl zahrnut v celkové šířce
- **Odstraňuje** zbytečné `px` jednotky u nulových hodnot kvůli čistšímu kódu
- **Nastavuje** jemné pozadí, které je příjemnější pro oči než ostrá šedá
✅ **Výzva k optimalizaci kódu**: Všimněte si, že tento CSS porušuje zásadu DRY (Don’t Repeat Yourself). Dokážete jej refaktorovat pomocí kombinace ID a třídy?
**Lepší přístup:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Třídní selektory pro opakované styly
Třídní selektory používají symbol `.` a jsou perfektní, když chcete aplikovat stejné styly na více prvků. Na rozdíl od ID lze třídy používat opakovaně v celém HTML, což je ideální pro konzistentní stylování vzorů.
V našem terráriu každá rostlina potřebuje podobné stylování, ale také individuální umístění. Použijeme kombinaci tříd pro společné styly a ID pro jedinečné pozice.
**Toto je HTML struktura každé rostliny:**
```html
```
**Vysvětlení klíčových prvků:**
- **Používá** `class="plant-holder"` pro konzistentní stylování kontejneru u všech rostlin
- **Aplikuje** `class="plant"` pro společné styly obrázku a chování
- **Obsahuje** unikátní `id="plant1"` pro individuální pozici a JavaScriptovou interakci
- **Poskytuje** popisný alt text pro přístupnost čteček obrazovky
Nyní přidejte tyto styly do vašeho souboru `style.css`:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Co tyto styly dělají:**
- **Vytváří** relativní pozicování pro držitele rostliny, aby byl kontext pozicování
- **Nastavuje** výšku každého držitele rostliny na 13 %, aby všechny rostliny vešly vertikálně bez posouvání
- **Posouvá** držitele mírně doleva pro lepší vystředění rostlin v kontejnerech
- **Umožňuje** rostlinám škálovat se responzivně pomocí `max-width` a `max-height`
- **Používá** `z-index` pro vrstvení rostlin nad ostatní prvky v terráriu
- **Přidává** jemný hover efekt s CSS přechody pro lepší interakci uživatele
✅ **Kritické myšlení**: Proč potřebujeme oba selektory `.plant-holder` a `.plant`? Co by se stalo, kdybychom použili jen jeden?
> 💡 **Designový vzor**: Kontejner (`.plant-holder`) kontroluje rozvržení a pozicování, zatímco obsah (`.plant`) kontroluje vzhled a škálování. Toto rozdělení dělá kód udržitelnějším a flexibilnějším.
## Pochopení CSS pozicování
CSS pozicování je jako být režisérem divadelní hry – určujete, kde každý herec stojí a jak se pohybuje po jevišti. Někteří herci následují základní formaci, zatímco jiní potřebují specifické umístění pro dramatický efekt.
Jakmile pochopíte pozicování, mnohé výzvy rozvržení se stanou zvládnutelnými. Potřebujete navigační lištu, která zůstane nahoře, když uživatelé scrollují? O to se postará pozicování. Chcete tooltip, který se objeví na konkrétním místě? To je taky pozicování.
### Pět hodnot pozice
```mermaid
quadrantChart
title Strategie pozicování v CSS
x-axis Tok dokumentu --> Odstraněno z toku
y-axis Statická pozice --> Přesná kontrola
quadrant-1 Absolutní
quadrant-2 Pevná
quadrant-3 Statická
quadrant-4 Lepivá
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Hodnota pozice | Chování | Použití |
|----------------|----------|----------|
| `static` | Výchozí tok, ignoruje top/left/right/bottom | Normální uspořádání dokumentu |
| `relative` | Pozicováno relativně k vlastní normální pozici | Malé úpravy, vytváření kontextu pozicování |
| `absolute` | Pozicováno relativně k nejbližšímu pozicovanému předkovi | Přesné umístění, překryvy |
| `fixed` | Pozicováno relativně k viewportu | Navigační lišty, plovoucí prvky |
| `sticky` | Přepíná mezi relativním a fixním na základě scrollování | Hlavičky, které zůstávají při scrollování přilepené |
### Pozicování v našem terráriu
Naše terrárium používá strategickou kombinaci typů pozicování k vytvoření požadovaného rozvržení:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Vysvětlení strategie pozicování:**
- **Absolutní kontejnery** jsou odstraněny z normálního toku dokumentu a přilepeny k okrajům obrazovky
- **Relativní držitelé rostlin** vytváří kontext pozicování, ale zůstávají v toku dokumentu
- **Absolutní rostliny** lze přesně umístit v rámci relativních kontejnerů
- **Tato kombinace** umožňuje skládání rostlin vertikálně a zároveň jejich individuální pozicování
> 🎯 **Proč je to důležité**: Prvky „plant“ potřebují absolutní pozicování, aby mohly být tažitelné v další lekci. Absolutní pozicování je odstraní z normálního layoutu a umožní drag-and-drop interakce.
✅ **Experiment**: Vyzkoušejte změnit hodnoty pozicování a pozorujte výsledky:
- Co se stane, pokud změníte `.container` z `absolute` na `relative`?
- Jak se změní rozvržení, pokud `.plant-holder` používá `absolute` místo `relative`?
- Co se stane, když přepnete `.plant` na `relative` pozicování?
### 🔄 **Pedagogická kontrola**
**Mistrovství v CSS pozicování**: Zastavte se a ověřte si své porozumění:
- ✅ Dokážete vysvětlit, proč rostliny potřebují absolutní pozicování pro drag-and-drop?
- ✅ Rozumíte, jak relativní kontejnery vytvářejí kontext pozicování?
- ✅ Proč boční kontejnery používají absolutní pozicování?
- ✅ Co by se stalo, kdybyste úplně odstranili deklarace pozicování?
**Spojení s reálným světem**: Zamyslete se, jak CSS pozicování odráží reálné rozvržení:
- **Static**: Knihy na polici (přirozené pořadí)
- **Relative**: Posunutí knihy trochu, ale zachování jejího místa
- **Absolute**: Umístění záložky na přesné číslo stránky
- **Fixed**: Lepicí lístek, který zůstává viditelný při převracení stránek
## Tvorba terária pomocí CSS
Nyní vytvoříme skleněnou nádobu pouze pomocí CSS – bez obrázků nebo grafického softwaru.
Vytváření realisticky vypadajícího skla, stínů a hloubkových efektů pomocí pozicování a průhlednosti demonstruje vizuální schopnosti CSS. Tato technika odráží způsob, jakým architekti z Bauhausu používali jednoduché geometrické tvary k vytvoření složitých a krásných struktur. Jakmile tato pravidla pochopíte, rozpoznáte CSS techniky za mnoha webovými designy.
```mermaid
flowchart LR
A[Víčko sklenice] --> E[Dokončené terárium]
B[Stěny sklenice] --> E
C[Vrstvy půdy] --> E
D[Spodní část sklenice] --> E
F[Skleněné efekty] --> E
A1["50% šířka
5% výška
Horní pozice"] --> A
B1["60% šířka
80% výška
Zaoblené rohy
0.5 neprůhlednost"] --> B
C1["60% šířka
5% výška
Tmavě hnědá
Spodní vrstva"] --> C
D1["50% šířka
1% výška
Spodní pozice"] --> D
F1["Jemné stíny
Průhlednost
Vrstevnice Z-indexu"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Tvorba komponent skleněné nádoby
Pojďme sestavit terárium kousek po kousku. Každá část využívá absolutní pozicování a procentuální rozměry pro responzivní design:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**Pochopení konstrukce terária:**
- **Používá** rozměry v procentech pro responzivní škálování na všech obrazovkách
- **Pozicuje** prvky absolutně, aby se přesně stohovaly a zarovnávaly
- **Aplikuje** různé hodnoty průhlednosti k vytvoření efektu skla
- **Implementuje** vrstvení pomocí `z-index`, aby rostliny byly uvnitř nádoby
- **Přidává** jemné stíny a upravené zaoblení rohů pro realistický vzhled
### Responzivní design s procenty
Všimněte si, že všechny rozměry jsou v procentech místo pevných pixelů:
**Proč je to důležité:**
- **Zajišťuje**, že terárium se proporčně škáluje na jakékoliv obrazovce
- **Udržuje** vizuální vztahy mezi komponenty nádoby
- **Poskytuje** konzistentní zážitek od mobilů po velké monitory
- **Umožňuje** designu adaptovat se bez rozbití vizuálního rozvržení
### Použití CSS jednotek v praxi
Používáme jednotky `rem` pro border-radius, které se škálují relativně ke kořenové velikosti písma. To vytváří přístupnější designy respektující uživatelské preference fontů. Více o [relativních jednotkách CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) v oficiální specifikaci.
✅ **Vizualní experimenty**: Zkuste upravit tyto hodnoty a pozorujte efekty:
- Změňte průhlednost nádoby z 0.5 na 0.8 – jak to ovlivní vzhled skla?
- Upravte barvu hlíny z `#3a241d` na `#8B4513` – jaký to má vizuální dopad?
- Změňte `z-index` hlíny na 2 – co se stane s vrstvením?
### 🔄 **Pedagogická kontrola**
**Porozumění vizuálnímu designu v CSS**: Potvrďte své znalosti vizuálního CSS:
- ✅ Jak procentuální rozměry vytvářejí responzivní design?
- ✅ Proč průhlednost vytváří efekt skleněné průhlednosti?
- ✅ Jakou roli hraje z-index při vrstvení prvků?
- ✅ Jak zaoblení rohů (border-radius) vytváří tvar nádoby?
**Princip designu**: Všimněte si, jak stavíme složité vizuály z jednoduchých tvarů:
1. **Obdélníky** → **Zaoblené obdélníky** → **Komponenty nádoby**
2. **Plné barvy** → **Průhlednost** → **Efekt skla**
3. **Jednotlivé prvky** → **Vrstvená kompozice** → **3D vzhled**
---
## Výzva GitHub Copilot Agenta 🚀
Použijte režim Agenta k dokončení následující výzvy:
**Popis:** Vytvořte CSS animaci, která jemně houpá rostliny v teráriu ze strany na stranu, simulujíc přirozený vánek. Pomůže vám procvičit CSS animace, transformace a klíčové snímky a zároveň zlepší vizuální atraktivitu terária.
**Pokyn:** Přidejte CSS animace klíčových snímků, které jemně houpají rostliny v teráriu ze strany na stranu. Vytvořte houpavou animaci, která mírně (2-3 stupně) otáčí každou rostlinu doleva a doprava v délce 3-4 sekund, a aplikujte ji na třídu `.plant`. Zajistěte, aby animace běžela nekonečně a měla easing pro přirozený pohyb.
Více o [režimu agenta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) se dozvíte zde.
## 🚀 Výzva: Přidání skleněných odlesků
Připraveni vylepšit vaše terárium o realistické skleněné odlesky? Tato technika přidá designu hloubku a realističnost.
Vytvoříte jemné odlesky, které simulují, jak se světlo odráží od skleněných povrchů. Tento přístup je podobný tomu, jak renesanční malíři jako Jan van Eyck používali světlo a odraz k vytvoření trojrozměrného dojmu malovaného skla. Takto to chcete dosáhnout:
**Vaše výzva:**
- **Vytvořit** jemné bílé nebo světlé oválné tvary pro skleněné odlesky
- **Umístit** je strategicky na levé straně nádoby
- **Aplikovat** vhodné průhlednosti a rozostření pro realistický odraz světla
- **Použít** `border-radius` k vytvoření organických, bublinových tvarů
- **Experimentovat** s přechody nebo stíny pro lepší realističnost
## Kvíz po přednášce
[Kvíz po přednášce](https://ff-quizzes.netlify.app/web/quiz/18)
## Rozšiřte své znalosti CSS
CSS může být zpočátku složité, ale pochopení těchto základních pojmů poskytuje pevné základy pro pokročilé techniky.
**Vaše další oblasti učení CSS:**
- **Flexbox** - zjednodušuje zarovnání a distribuci prvků
- **CSS Grid** - nabízí výkonné nástroje pro tvorbu složitých rozvržení
- **CSS Proměnné** - snižují opakování a zlepšují udržovatelnost
- **Responzivní design** - zajišťuje dobrou funkčnost na různých zařízeních
### Interaktivní vzdělávací zdroje
Procvičujte tyto koncepty pomocí těchto zábavných a praktických her:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Ovládněte Flexbox pomocí zábavných úkolů
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Naučte se CSS Grid pěstováním virtuálních mrkví
- 🎯 [CSS Battle](https://cssbattle.dev/) - Otestujte své CSS dovednosti v kódovacích výzvách
### Další učení
Pro komplexní základy CSS dokončete modul Microsoft Learn: [Stylujte svou HTML aplikaci pomocí CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Co můžete udělat během následujících 5 minut**
- [ ] Otevřít DevTools a prozkoumat CSS styly na jakékoliv stránce pomocí panelu Elements
- [ ] Vytvořit jednoduchý CSS soubor a propojit ho s HTML stránkou
- [ ] Zkusit měnit barvy pomocí různých metod: hex, RGB, a pojmenovaných barev
- [ ] Procvičit box model přidáním paddingu a marginu k divu
### 🎯 **Co můžete zvládnout během této hodiny**
- [ ] Dokončit kvíz po lekci a zopakovat základy CSS
- [ ] Stylovat HTML stránku pomocí fontů, barev a odsazení
- [ ] Vytvořit jednoduché rozvržení pomocí flexboxu nebo gridu
- [ ] Experimentovat s CSS přechody pro plynulé efekty
- [ ] Procvičit responzivní design s media queries
### 📅 **Vaše týdenní CSS dobrodružství**
- [ ] Dokončit zadání pro stylování terária s kreativním přístupem
- [ ] Ovládnout CSS Grid tvorbou galerie fotografií
- [ ] Naučit se CSS animace pro oživení svých designů
- [ ] Prozkoumat CSS preprocesory jako Sass nebo Less
- [ ] Studovat principy designu a aplikovat je v CSS
- [ ] Analyzovat a znovu vytvořit zajímavé designy online
### 🌟 **Vaše měsíční mistrovství v designu**
- [ ] Vytvořit kompletní systém responsivního webdesignu
- [ ] Naučit se CSS-in-JS nebo utility-first frameworky jako Tailwind
- [ ] Přispívat do open source projektů se zlepšeními CSS
- [ ] Ovládnout pokročilé koncepty CSS jako vlastní vlastnosti a containment
- [ ] Vytvořit znovupoužitelné knihovny komponent s modulárním CSS
- [ ] Mentorovat další, kdo se učí CSS, a sdílet designové znalosti
## 🎯 Váš časový plán zvládnutí CSS
```mermaid
timeline
title Progres učení CSS
section Základy (10 minut)
File Connection: Propojení CSS s HTML
: Pochopení pravidel kaskády
: Naučit se základy dědičnosti
section Selektory (15 minut)
Targeting Elements: Selektory elementů
: Vzory tříd
: Specifičnost ID
: Kombinátory
section Box Model (20 minut)
Layout Fundamentals: Okraje a vnitřní odsazení
: Vlastnosti rámečku
: Velikost obsahu
: Chování box-sizing
section Positioning (25 minut)
Element Placement: Statické vs relativní
: Absolutní pozicování
: Vrstva Z-index
: Responsivní jednotky
section Visual Design (30 minut)
Styling Mastery: Barvy a průhlednost
: Stíny a efekty
: Přechody
: Vlastnosti transformace
section Responsive Design (45 minut)
Multi-Device Support: Mediální dotazy
: Flexibilní rozvržení
: Přístup mobile-first
: Optimalizace viewportu
section Advanced Techniques (1 týden)
Modern CSS: Flexbox rozvržení
: CSS Grid systémy
: Vlastní vlastnosti
: Klíčové snímky animací
section Professional Skills (1 měsíc)
CSS Architecture: Vzory komponent
: Udržovatelný kód
: Optimalizace výkonu
: Kompatibilita mezi prohlížeči
```
### 🛠️ Shrnutí vašeho CSS nástroje
Po dokončení této lekce máte nyní:
- **Porozumění kaskádě**: Jak se styly dědí a přepisují
- **Mistrovství selektorů**: Precizní cílení na elementy, třídy a ID
- **Dovednosti pozicování**: Strategické umisťování a vrstvení prvků
- **Vizuální design**: Vytváření skleněných efektů, stínů a průhlednosti
- **Responzivní techniky**: Rozvržení založená na procentech, která se přizpůsobí obrazovce
- **Organizace kódu**: Čistá, udržitelná struktura CSS
- **Moderní přístupy**: Používání relativních jednotek a přístupných designových vzorů
**Další kroky**: Vaše terárium má nyní strukturu (HTML) i styl (CSS). Závěrečná lekce přidá interaktivitu pomocí JavaScriptu!
## Zadání
[CSS Refactoring](assignment.md)
---
**Prohlášení o vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí služby automatického překladu AI [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoli nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.
` element. Uvidíte, že dědí font family od těla:
✅ **Zkouška**: Vyzkoušejte nastavit další děditelné vlastnosti na element ``, např. `color`, `line-height` nebo `text-align`. Co se stane s vaším nadpisem a dalšími prvky?
> 📝 **Mezi děditelné vlastnosti patří**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **Mezi neděditelné vlastnosti patří**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Pedagogická kontrola**
**Pochopení základů CSS**: Než přejdeme k selektorům, ujistěte se, že umíte:
- ✅ Vysvětlit rozdíl mezi kaskádou a dědičností
- ✅ Předpovědět, který styl vyhraje při konfliktu specifičnosti
- ✅ Identifikovat vlastnosti děditelné z rodičovských prvků
- ✅ Správně propojit CSS soubory s HTML
**Rychlý test**: Pokud máte tyto styly, jakou barvu bude mít `` uvnitř ``?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Odpověď: Červená (element selektor přímo cílí na h1)*
## Ovládání CSS selektorů
CSS selektory jsou způsob, jak cílit na konkrétní prvky pro stylování. Fungují jako přesné instrukce – místo „dům“ řeknete „modrý dům s červenými dveřmi v ulici Maple“.
CSS nabízí různé způsoby, jak být specifický, a správný výběr selektoru je jako výběr správného nástroje pro práci. Někdy potřebujete stylovat všechny dveře v okolí, jindy jen jedny konkrétní.
### Element selektory (tagy)
Element selektory cílí na HTML prvky podle jejich značky. Jsou ideální pro nastavení základních stylů, které se mají aplikovat široce na stránce:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Rozbor těchto stylů:**
- **Nastavuje** konzistentní typografii pro celou stránku pomocí selektoru `body`
- **Odstraňuje** výchozí okraje a padding prohlížeče pro lepší kontrolu
- **Styluje** všechny nadpisové elementy barvou, zarovnáním a odsazením
- **Používá** jednotky `rem` pro škálovatelné, přístupné velikosti písma
Zatímco element selektory fungují dobře pro obecné stylování, budete potřebovat specifičtější selektory pro stylování jednotlivých komponent jako jsou rostliny ve vašem terráriu.
### ID selektory pro unikátní prvky
ID selektory používají symbol `#` a cílí na prvky se specifickým atributem `id`. Protože ID musí být na stránce unikátní, jsou ideální pro stylování izolovaných, speciálních prvků jako naše levé a pravé kontejnery rostlin.
Vytvořme stylování pro postranní kontejnery našeho terrária, kde rostliny budou:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Co tento kód umí:**
- **Umísťuje** kontejnery k levému a pravému okraji pomocí `absolute` pozicování
- **Používá** jednotky `vh` (výška viewportu) pro responzivní výšku přizpůsobující se velikosti obrazovky
- **Aplikuje** `box-sizing: border-box` tak, aby padding byl zahrnut v celkové šířce
- **Odstraňuje** zbytečné `px` jednotky u nulových hodnot kvůli čistšímu kódu
- **Nastavuje** jemné pozadí, které je příjemnější pro oči než ostrá šedá
✅ **Výzva k optimalizaci kódu**: Všimněte si, že tento CSS porušuje zásadu DRY (Don’t Repeat Yourself). Dokážete jej refaktorovat pomocí kombinace ID a třídy?
**Lepší přístup:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Třídní selektory pro opakované styly
Třídní selektory používají symbol `.` a jsou perfektní, když chcete aplikovat stejné styly na více prvků. Na rozdíl od ID lze třídy používat opakovaně v celém HTML, což je ideální pro konzistentní stylování vzorů.
V našem terráriu každá rostlina potřebuje podobné stylování, ale také individuální umístění. Použijeme kombinaci tříd pro společné styly a ID pro jedinečné pozice.
**Toto je HTML struktura každé rostliny:**
```html
```
**Vysvětlení klíčových prvků:**
- **Používá** `class="plant-holder"` pro konzistentní stylování kontejneru u všech rostlin
- **Aplikuje** `class="plant"` pro společné styly obrázku a chování
- **Obsahuje** unikátní `id="plant1"` pro individuální pozici a JavaScriptovou interakci
- **Poskytuje** popisný alt text pro přístupnost čteček obrazovky
Nyní přidejte tyto styly do vašeho souboru `style.css`:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Co tyto styly dělají:**
- **Vytváří** relativní pozicování pro držitele rostliny, aby byl kontext pozicování
- **Nastavuje** výšku každého držitele rostliny na 13 %, aby všechny rostliny vešly vertikálně bez posouvání
- **Posouvá** držitele mírně doleva pro lepší vystředění rostlin v kontejnerech
- **Umožňuje** rostlinám škálovat se responzivně pomocí `max-width` a `max-height`
- **Používá** `z-index` pro vrstvení rostlin nad ostatní prvky v terráriu
- **Přidává** jemný hover efekt s CSS přechody pro lepší interakci uživatele
✅ **Kritické myšlení**: Proč potřebujeme oba selektory `.plant-holder` a `.plant`? Co by se stalo, kdybychom použili jen jeden?
> 💡 **Designový vzor**: Kontejner (`.plant-holder`) kontroluje rozvržení a pozicování, zatímco obsah (`.plant`) kontroluje vzhled a škálování. Toto rozdělení dělá kód udržitelnějším a flexibilnějším.
## Pochopení CSS pozicování
CSS pozicování je jako být režisérem divadelní hry – určujete, kde každý herec stojí a jak se pohybuje po jevišti. Někteří herci následují základní formaci, zatímco jiní potřebují specifické umístění pro dramatický efekt.
Jakmile pochopíte pozicování, mnohé výzvy rozvržení se stanou zvládnutelnými. Potřebujete navigační lištu, která zůstane nahoře, když uživatelé scrollují? O to se postará pozicování. Chcete tooltip, který se objeví na konkrétním místě? To je taky pozicování.
### Pět hodnot pozice
```mermaid
quadrantChart
title Strategie pozicování v CSS
x-axis Tok dokumentu --> Odstraněno z toku
y-axis Statická pozice --> Přesná kontrola
quadrant-1 Absolutní
quadrant-2 Pevná
quadrant-3 Statická
quadrant-4 Lepivá
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Hodnota pozice | Chování | Použití |
|----------------|----------|----------|
| `static` | Výchozí tok, ignoruje top/left/right/bottom | Normální uspořádání dokumentu |
| `relative` | Pozicováno relativně k vlastní normální pozici | Malé úpravy, vytváření kontextu pozicování |
| `absolute` | Pozicováno relativně k nejbližšímu pozicovanému předkovi | Přesné umístění, překryvy |
| `fixed` | Pozicováno relativně k viewportu | Navigační lišty, plovoucí prvky |
| `sticky` | Přepíná mezi relativním a fixním na základě scrollování | Hlavičky, které zůstávají při scrollování přilepené |
### Pozicování v našem terráriu
Naše terrárium používá strategickou kombinaci typů pozicování k vytvoření požadovaného rozvržení:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Vysvětlení strategie pozicování:**
- **Absolutní kontejnery** jsou odstraněny z normálního toku dokumentu a přilepeny k okrajům obrazovky
- **Relativní držitelé rostlin** vytváří kontext pozicování, ale zůstávají v toku dokumentu
- **Absolutní rostliny** lze přesně umístit v rámci relativních kontejnerů
- **Tato kombinace** umožňuje skládání rostlin vertikálně a zároveň jejich individuální pozicování
> 🎯 **Proč je to důležité**: Prvky „plant“ potřebují absolutní pozicování, aby mohly být tažitelné v další lekci. Absolutní pozicování je odstraní z normálního layoutu a umožní drag-and-drop interakce.
✅ **Experiment**: Vyzkoušejte změnit hodnoty pozicování a pozorujte výsledky:
- Co se stane, pokud změníte `.container` z `absolute` na `relative`?
- Jak se změní rozvržení, pokud `.plant-holder` používá `absolute` místo `relative`?
- Co se stane, když přepnete `.plant` na `relative` pozicování?
### 🔄 **Pedagogická kontrola**
**Mistrovství v CSS pozicování**: Zastavte se a ověřte si své porozumění:
- ✅ Dokážete vysvětlit, proč rostliny potřebují absolutní pozicování pro drag-and-drop?
- ✅ Rozumíte, jak relativní kontejnery vytvářejí kontext pozicování?
- ✅ Proč boční kontejnery používají absolutní pozicování?
- ✅ Co by se stalo, kdybyste úplně odstranili deklarace pozicování?
**Spojení s reálným světem**: Zamyslete se, jak CSS pozicování odráží reálné rozvržení:
- **Static**: Knihy na polici (přirozené pořadí)
- **Relative**: Posunutí knihy trochu, ale zachování jejího místa
- **Absolute**: Umístění záložky na přesné číslo stránky
- **Fixed**: Lepicí lístek, který zůstává viditelný při převracení stránek
## Tvorba terária pomocí CSS
Nyní vytvoříme skleněnou nádobu pouze pomocí CSS – bez obrázků nebo grafického softwaru.
Vytváření realisticky vypadajícího skla, stínů a hloubkových efektů pomocí pozicování a průhlednosti demonstruje vizuální schopnosti CSS. Tato technika odráží způsob, jakým architekti z Bauhausu používali jednoduché geometrické tvary k vytvoření složitých a krásných struktur. Jakmile tato pravidla pochopíte, rozpoznáte CSS techniky za mnoha webovými designy.
```mermaid
flowchart LR
A[Víčko sklenice] --> E[Dokončené terárium]
B[Stěny sklenice] --> E
C[Vrstvy půdy] --> E
D[Spodní část sklenice] --> E
F[Skleněné efekty] --> E
A1["50% šířka
5% výška
Horní pozice"] --> A
B1["60% šířka
80% výška
Zaoblené rohy
0.5 neprůhlednost"] --> B
C1["60% šířka
5% výška
Tmavě hnědá
Spodní vrstva"] --> C
D1["50% šířka
1% výška
Spodní pozice"] --> D
F1["Jemné stíny
Průhlednost
Vrstevnice Z-indexu"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Tvorba komponent skleněné nádoby
Pojďme sestavit terárium kousek po kousku. Každá část využívá absolutní pozicování a procentuální rozměry pro responzivní design:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**Pochopení konstrukce terária:**
- **Používá** rozměry v procentech pro responzivní škálování na všech obrazovkách
- **Pozicuje** prvky absolutně, aby se přesně stohovaly a zarovnávaly
- **Aplikuje** různé hodnoty průhlednosti k vytvoření efektu skla
- **Implementuje** vrstvení pomocí `z-index`, aby rostliny byly uvnitř nádoby
- **Přidává** jemné stíny a upravené zaoblení rohů pro realistický vzhled
### Responzivní design s procenty
Všimněte si, že všechny rozměry jsou v procentech místo pevných pixelů:
**Proč je to důležité:**
- **Zajišťuje**, že terárium se proporčně škáluje na jakékoliv obrazovce
- **Udržuje** vizuální vztahy mezi komponenty nádoby
- **Poskytuje** konzistentní zážitek od mobilů po velké monitory
- **Umožňuje** designu adaptovat se bez rozbití vizuálního rozvržení
### Použití CSS jednotek v praxi
Používáme jednotky `rem` pro border-radius, které se škálují relativně ke kořenové velikosti písma. To vytváří přístupnější designy respektující uživatelské preference fontů. Více o [relativních jednotkách CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) v oficiální specifikaci.
✅ **Vizualní experimenty**: Zkuste upravit tyto hodnoty a pozorujte efekty:
- Změňte průhlednost nádoby z 0.5 na 0.8 – jak to ovlivní vzhled skla?
- Upravte barvu hlíny z `#3a241d` na `#8B4513` – jaký to má vizuální dopad?
- Změňte `z-index` hlíny na 2 – co se stane s vrstvením?
### 🔄 **Pedagogická kontrola**
**Porozumění vizuálnímu designu v CSS**: Potvrďte své znalosti vizuálního CSS:
- ✅ Jak procentuální rozměry vytvářejí responzivní design?
- ✅ Proč průhlednost vytváří efekt skleněné průhlednosti?
- ✅ Jakou roli hraje z-index při vrstvení prvků?
- ✅ Jak zaoblení rohů (border-radius) vytváří tvar nádoby?
**Princip designu**: Všimněte si, jak stavíme složité vizuály z jednoduchých tvarů:
1. **Obdélníky** → **Zaoblené obdélníky** → **Komponenty nádoby**
2. **Plné barvy** → **Průhlednost** → **Efekt skla**
3. **Jednotlivé prvky** → **Vrstvená kompozice** → **3D vzhled**
---
## Výzva GitHub Copilot Agenta 🚀
Použijte režim Agenta k dokončení následující výzvy:
**Popis:** Vytvořte CSS animaci, která jemně houpá rostliny v teráriu ze strany na stranu, simulujíc přirozený vánek. Pomůže vám procvičit CSS animace, transformace a klíčové snímky a zároveň zlepší vizuální atraktivitu terária.
**Pokyn:** Přidejte CSS animace klíčových snímků, které jemně houpají rostliny v teráriu ze strany na stranu. Vytvořte houpavou animaci, která mírně (2-3 stupně) otáčí každou rostlinu doleva a doprava v délce 3-4 sekund, a aplikujte ji na třídu `.plant`. Zajistěte, aby animace běžela nekonečně a měla easing pro přirozený pohyb.
Více o [režimu agenta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) se dozvíte zde.
## 🚀 Výzva: Přidání skleněných odlesků
Připraveni vylepšit vaše terárium o realistické skleněné odlesky? Tato technika přidá designu hloubku a realističnost.
Vytvoříte jemné odlesky, které simulují, jak se světlo odráží od skleněných povrchů. Tento přístup je podobný tomu, jak renesanční malíři jako Jan van Eyck používali světlo a odraz k vytvoření trojrozměrného dojmu malovaného skla. Takto to chcete dosáhnout:
**Vaše výzva:**
- **Vytvořit** jemné bílé nebo světlé oválné tvary pro skleněné odlesky
- **Umístit** je strategicky na levé straně nádoby
- **Aplikovat** vhodné průhlednosti a rozostření pro realistický odraz světla
- **Použít** `border-radius` k vytvoření organických, bublinových tvarů
- **Experimentovat** s přechody nebo stíny pro lepší realističnost
## Kvíz po přednášce
[Kvíz po přednášce](https://ff-quizzes.netlify.app/web/quiz/18)
## Rozšiřte své znalosti CSS
CSS může být zpočátku složité, ale pochopení těchto základních pojmů poskytuje pevné základy pro pokročilé techniky.
**Vaše další oblasti učení CSS:**
- **Flexbox** - zjednodušuje zarovnání a distribuci prvků
- **CSS Grid** - nabízí výkonné nástroje pro tvorbu složitých rozvržení
- **CSS Proměnné** - snižují opakování a zlepšují udržovatelnost
- **Responzivní design** - zajišťuje dobrou funkčnost na různých zařízeních
### Interaktivní vzdělávací zdroje
Procvičujte tyto koncepty pomocí těchto zábavných a praktických her:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Ovládněte Flexbox pomocí zábavných úkolů
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Naučte se CSS Grid pěstováním virtuálních mrkví
- 🎯 [CSS Battle](https://cssbattle.dev/) - Otestujte své CSS dovednosti v kódovacích výzvách
### Další učení
Pro komplexní základy CSS dokončete modul Microsoft Learn: [Stylujte svou HTML aplikaci pomocí CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Co můžete udělat během následujících 5 minut**
- [ ] Otevřít DevTools a prozkoumat CSS styly na jakékoliv stránce pomocí panelu Elements
- [ ] Vytvořit jednoduchý CSS soubor a propojit ho s HTML stránkou
- [ ] Zkusit měnit barvy pomocí různých metod: hex, RGB, a pojmenovaných barev
- [ ] Procvičit box model přidáním paddingu a marginu k divu
### 🎯 **Co můžete zvládnout během této hodiny**
- [ ] Dokončit kvíz po lekci a zopakovat základy CSS
- [ ] Stylovat HTML stránku pomocí fontů, barev a odsazení
- [ ] Vytvořit jednoduché rozvržení pomocí flexboxu nebo gridu
- [ ] Experimentovat s CSS přechody pro plynulé efekty
- [ ] Procvičit responzivní design s media queries
### 📅 **Vaše týdenní CSS dobrodružství**
- [ ] Dokončit zadání pro stylování terária s kreativním přístupem
- [ ] Ovládnout CSS Grid tvorbou galerie fotografií
- [ ] Naučit se CSS animace pro oživení svých designů
- [ ] Prozkoumat CSS preprocesory jako Sass nebo Less
- [ ] Studovat principy designu a aplikovat je v CSS
- [ ] Analyzovat a znovu vytvořit zajímavé designy online
### 🌟 **Vaše měsíční mistrovství v designu**
- [ ] Vytvořit kompletní systém responsivního webdesignu
- [ ] Naučit se CSS-in-JS nebo utility-first frameworky jako Tailwind
- [ ] Přispívat do open source projektů se zlepšeními CSS
- [ ] Ovládnout pokročilé koncepty CSS jako vlastní vlastnosti a containment
- [ ] Vytvořit znovupoužitelné knihovny komponent s modulárním CSS
- [ ] Mentorovat další, kdo se učí CSS, a sdílet designové znalosti
## 🎯 Váš časový plán zvládnutí CSS
```mermaid
timeline
title Progres učení CSS
section Základy (10 minut)
File Connection: Propojení CSS s HTML
: Pochopení pravidel kaskády
: Naučit se základy dědičnosti
section Selektory (15 minut)
Targeting Elements: Selektory elementů
: Vzory tříd
: Specifičnost ID
: Kombinátory
section Box Model (20 minut)
Layout Fundamentals: Okraje a vnitřní odsazení
: Vlastnosti rámečku
: Velikost obsahu
: Chování box-sizing
section Positioning (25 minut)
Element Placement: Statické vs relativní
: Absolutní pozicování
: Vrstva Z-index
: Responsivní jednotky
section Visual Design (30 minut)
Styling Mastery: Barvy a průhlednost
: Stíny a efekty
: Přechody
: Vlastnosti transformace
section Responsive Design (45 minut)
Multi-Device Support: Mediální dotazy
: Flexibilní rozvržení
: Přístup mobile-first
: Optimalizace viewportu
section Advanced Techniques (1 týden)
Modern CSS: Flexbox rozvržení
: CSS Grid systémy
: Vlastní vlastnosti
: Klíčové snímky animací
section Professional Skills (1 měsíc)
CSS Architecture: Vzory komponent
: Udržovatelný kód
: Optimalizace výkonu
: Kompatibilita mezi prohlížeči
```
### 🛠️ Shrnutí vašeho CSS nástroje
Po dokončení této lekce máte nyní:
- **Porozumění kaskádě**: Jak se styly dědí a přepisují
- **Mistrovství selektorů**: Precizní cílení na elementy, třídy a ID
- **Dovednosti pozicování**: Strategické umisťování a vrstvení prvků
- **Vizuální design**: Vytváření skleněných efektů, stínů a průhlednosti
- **Responzivní techniky**: Rozvržení založená na procentech, která se přizpůsobí obrazovce
- **Organizace kódu**: Čistá, udržitelná struktura CSS
- **Moderní přístupy**: Používání relativních jednotek a přístupných designových vzorů
**Další kroky**: Vaše terárium má nyní strukturu (HTML) i styl (CSS). Závěrečná lekce přidá interaktivitu pomocí JavaScriptu!
## Zadání
[CSS Refactoring](assignment.md)
---
**Prohlášení o vyloučení odpovědnosti**:
Tento dokument byl přeložen pomocí služby automatického překladu AI [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoli nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.
`?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Odpověď: Červená (element selektor přímo cílí na h1)*
## Ovládání CSS selektorů
CSS selektory jsou způsob, jak cílit na konkrétní prvky pro stylování. Fungují jako přesné instrukce – místo „dům“ řeknete „modrý dům s červenými dveřmi v ulici Maple“.
CSS nabízí různé způsoby, jak být specifický, a správný výběr selektoru je jako výběr správného nástroje pro práci. Někdy potřebujete stylovat všechny dveře v okolí, jindy jen jedny konkrétní.
### Element selektory (tagy)
Element selektory cílí na HTML prvky podle jejich značky. Jsou ideální pro nastavení základních stylů, které se mají aplikovat široce na stránce:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**Rozbor těchto stylů:**
- **Nastavuje** konzistentní typografii pro celou stránku pomocí selektoru `body`
- **Odstraňuje** výchozí okraje a padding prohlížeče pro lepší kontrolu
- **Styluje** všechny nadpisové elementy barvou, zarovnáním a odsazením
- **Používá** jednotky `rem` pro škálovatelné, přístupné velikosti písma
Zatímco element selektory fungují dobře pro obecné stylování, budete potřebovat specifičtější selektory pro stylování jednotlivých komponent jako jsou rostliny ve vašem terráriu.
### ID selektory pro unikátní prvky
ID selektory používají symbol `#` a cílí na prvky se specifickým atributem `id`. Protože ID musí být na stránce unikátní, jsou ideální pro stylování izolovaných, speciálních prvků jako naše levé a pravé kontejnery rostlin.
Vytvořme stylování pro postranní kontejnery našeho terrária, kde rostliny budou:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**Co tento kód umí:**
- **Umísťuje** kontejnery k levému a pravému okraji pomocí `absolute` pozicování
- **Používá** jednotky `vh` (výška viewportu) pro responzivní výšku přizpůsobující se velikosti obrazovky
- **Aplikuje** `box-sizing: border-box` tak, aby padding byl zahrnut v celkové šířce
- **Odstraňuje** zbytečné `px` jednotky u nulových hodnot kvůli čistšímu kódu
- **Nastavuje** jemné pozadí, které je příjemnější pro oči než ostrá šedá
✅ **Výzva k optimalizaci kódu**: Všimněte si, že tento CSS porušuje zásadu DRY (Don’t Repeat Yourself). Dokážete jej refaktorovat pomocí kombinace ID a třídy?
**Lepší přístup:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### Třídní selektory pro opakované styly
Třídní selektory používají symbol `.` a jsou perfektní, když chcete aplikovat stejné styly na více prvků. Na rozdíl od ID lze třídy používat opakovaně v celém HTML, což je ideální pro konzistentní stylování vzorů.
V našem terráriu každá rostlina potřebuje podobné stylování, ale také individuální umístění. Použijeme kombinaci tříd pro společné styly a ID pro jedinečné pozice.
**Toto je HTML struktura každé rostliny:**
```html
```
**Vysvětlení klíčových prvků:**
- **Používá** `class="plant-holder"` pro konzistentní stylování kontejneru u všech rostlin
- **Aplikuje** `class="plant"` pro společné styly obrázku a chování
- **Obsahuje** unikátní `id="plant1"` pro individuální pozici a JavaScriptovou interakci
- **Poskytuje** popisný alt text pro přístupnost čteček obrazovky
Nyní přidejte tyto styly do vašeho souboru `style.css`:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**Co tyto styly dělají:**
- **Vytváří** relativní pozicování pro držitele rostliny, aby byl kontext pozicování
- **Nastavuje** výšku každého držitele rostliny na 13 %, aby všechny rostliny vešly vertikálně bez posouvání
- **Posouvá** držitele mírně doleva pro lepší vystředění rostlin v kontejnerech
- **Umožňuje** rostlinám škálovat se responzivně pomocí `max-width` a `max-height`
- **Používá** `z-index` pro vrstvení rostlin nad ostatní prvky v terráriu
- **Přidává** jemný hover efekt s CSS přechody pro lepší interakci uživatele
✅ **Kritické myšlení**: Proč potřebujeme oba selektory `.plant-holder` a `.plant`? Co by se stalo, kdybychom použili jen jeden?
> 💡 **Designový vzor**: Kontejner (`.plant-holder`) kontroluje rozvržení a pozicování, zatímco obsah (`.plant`) kontroluje vzhled a škálování. Toto rozdělení dělá kód udržitelnějším a flexibilnějším.
## Pochopení CSS pozicování
CSS pozicování je jako být režisérem divadelní hry – určujete, kde každý herec stojí a jak se pohybuje po jevišti. Někteří herci následují základní formaci, zatímco jiní potřebují specifické umístění pro dramatický efekt.
Jakmile pochopíte pozicování, mnohé výzvy rozvržení se stanou zvládnutelnými. Potřebujete navigační lištu, která zůstane nahoře, když uživatelé scrollují? O to se postará pozicování. Chcete tooltip, který se objeví na konkrétním místě? To je taky pozicování.
### Pět hodnot pozice
```mermaid
quadrantChart
title Strategie pozicování v CSS
x-axis Tok dokumentu --> Odstraněno z toku
y-axis Statická pozice --> Přesná kontrola
quadrant-1 Absolutní
quadrant-2 Pevná
quadrant-3 Statická
quadrant-4 Lepivá
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| Hodnota pozice | Chování | Použití |
|----------------|----------|----------|
| `static` | Výchozí tok, ignoruje top/left/right/bottom | Normální uspořádání dokumentu |
| `relative` | Pozicováno relativně k vlastní normální pozici | Malé úpravy, vytváření kontextu pozicování |
| `absolute` | Pozicováno relativně k nejbližšímu pozicovanému předkovi | Přesné umístění, překryvy |
| `fixed` | Pozicováno relativně k viewportu | Navigační lišty, plovoucí prvky |
| `sticky` | Přepíná mezi relativním a fixním na základě scrollování | Hlavičky, které zůstávají při scrollování přilepené |
### Pozicování v našem terráriu
Naše terrárium používá strategickou kombinaci typů pozicování k vytvoření požadovaného rozvržení:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**Vysvětlení strategie pozicování:**
- **Absolutní kontejnery** jsou odstraněny z normálního toku dokumentu a přilepeny k okrajům obrazovky
- **Relativní držitelé rostlin** vytváří kontext pozicování, ale zůstávají v toku dokumentu
- **Absolutní rostliny** lze přesně umístit v rámci relativních kontejnerů
- **Tato kombinace** umožňuje skládání rostlin vertikálně a zároveň jejich individuální pozicování
> 🎯 **Proč je to důležité**: Prvky „plant“ potřebují absolutní pozicování, aby mohly být tažitelné v další lekci. Absolutní pozicování je odstraní z normálního layoutu a umožní drag-and-drop interakce.
✅ **Experiment**: Vyzkoušejte změnit hodnoty pozicování a pozorujte výsledky:
- Co se stane, pokud změníte `.container` z `absolute` na `relative`?
- Jak se změní rozvržení, pokud `.plant-holder` používá `absolute` místo `relative`?
- Co se stane, když přepnete `.plant` na `relative` pozicování?
### 🔄 **Pedagogická kontrola**
**Mistrovství v CSS pozicování**: Zastavte se a ověřte si své porozumění:
- ✅ Dokážete vysvětlit, proč rostliny potřebují absolutní pozicování pro drag-and-drop?
- ✅ Rozumíte, jak relativní kontejnery vytvářejí kontext pozicování?
- ✅ Proč boční kontejnery používají absolutní pozicování?
- ✅ Co by se stalo, kdybyste úplně odstranili deklarace pozicování?
**Spojení s reálným světem**: Zamyslete se, jak CSS pozicování odráží reálné rozvržení:
- **Static**: Knihy na polici (přirozené pořadí)
- **Relative**: Posunutí knihy trochu, ale zachování jejího místa
- **Absolute**: Umístění záložky na přesné číslo stránky
- **Fixed**: Lepicí lístek, který zůstává viditelný při převracení stránek
## Tvorba terária pomocí CSS
Nyní vytvoříme skleněnou nádobu pouze pomocí CSS – bez obrázků nebo grafického softwaru.
Vytváření realisticky vypadajícího skla, stínů a hloubkových efektů pomocí pozicování a průhlednosti demonstruje vizuální schopnosti CSS. Tato technika odráží způsob, jakým architekti z Bauhausu používali jednoduché geometrické tvary k vytvoření složitých a krásných struktur. Jakmile tato pravidla pochopíte, rozpoznáte CSS techniky za mnoha webovými designy.
```mermaid
flowchart LR
A[Víčko sklenice] --> E[Dokončené terárium]
B[Stěny sklenice] --> E
C[Vrstvy půdy] --> E
D[Spodní část sklenice] --> E
F[Skleněné efekty] --> E
A1["50% šířka
5% výška
Horní pozice"] --> A B1["60% šířka
80% výška
Zaoblené rohy
0.5 neprůhlednost"] --> B C1["60% šířka
5% výška
Tmavě hnědá
Spodní vrstva"] --> C D1["50% šířka
1% výška
Spodní pozice"] --> D F1["Jemné stíny
Průhlednost
Vrstevnice Z-indexu"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### Tvorba komponent skleněné nádoby Pojďme sestavit terárium kousek po kousku. Každá část využívá absolutní pozicování a procentuální rozměry pro responzivní design: ```css .jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; } ``` **Pochopení konstrukce terária:** - **Používá** rozměry v procentech pro responzivní škálování na všech obrazovkách - **Pozicuje** prvky absolutně, aby se přesně stohovaly a zarovnávaly - **Aplikuje** různé hodnoty průhlednosti k vytvoření efektu skla - **Implementuje** vrstvení pomocí `z-index`, aby rostliny byly uvnitř nádoby - **Přidává** jemné stíny a upravené zaoblení rohů pro realistický vzhled ### Responzivní design s procenty Všimněte si, že všechny rozměry jsou v procentech místo pevných pixelů: **Proč je to důležité:** - **Zajišťuje**, že terárium se proporčně škáluje na jakékoliv obrazovce - **Udržuje** vizuální vztahy mezi komponenty nádoby - **Poskytuje** konzistentní zážitek od mobilů po velké monitory - **Umožňuje** designu adaptovat se bez rozbití vizuálního rozvržení ### Použití CSS jednotek v praxi Používáme jednotky `rem` pro border-radius, které se škálují relativně ke kořenové velikosti písma. To vytváří přístupnější designy respektující uživatelské preference fontů. Více o [relativních jednotkách CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) v oficiální specifikaci. ✅ **Vizualní experimenty**: Zkuste upravit tyto hodnoty a pozorujte efekty: - Změňte průhlednost nádoby z 0.5 na 0.8 – jak to ovlivní vzhled skla? - Upravte barvu hlíny z `#3a241d` na `#8B4513` – jaký to má vizuální dopad? - Změňte `z-index` hlíny na 2 – co se stane s vrstvením? ### 🔄 **Pedagogická kontrola** **Porozumění vizuálnímu designu v CSS**: Potvrďte své znalosti vizuálního CSS: - ✅ Jak procentuální rozměry vytvářejí responzivní design? - ✅ Proč průhlednost vytváří efekt skleněné průhlednosti? - ✅ Jakou roli hraje z-index při vrstvení prvků? - ✅ Jak zaoblení rohů (border-radius) vytváří tvar nádoby? **Princip designu**: Všimněte si, jak stavíme složité vizuály z jednoduchých tvarů: 1. **Obdélníky** → **Zaoblené obdélníky** → **Komponenty nádoby** 2. **Plné barvy** → **Průhlednost** → **Efekt skla** 3. **Jednotlivé prvky** → **Vrstvená kompozice** → **3D vzhled** --- ## Výzva GitHub Copilot Agenta 🚀 Použijte režim Agenta k dokončení následující výzvy: **Popis:** Vytvořte CSS animaci, která jemně houpá rostliny v teráriu ze strany na stranu, simulujíc přirozený vánek. Pomůže vám procvičit CSS animace, transformace a klíčové snímky a zároveň zlepší vizuální atraktivitu terária. **Pokyn:** Přidejte CSS animace klíčových snímků, které jemně houpají rostliny v teráriu ze strany na stranu. Vytvořte houpavou animaci, která mírně (2-3 stupně) otáčí každou rostlinu doleva a doprava v délce 3-4 sekund, a aplikujte ji na třídu `.plant`. Zajistěte, aby animace běžela nekonečně a měla easing pro přirozený pohyb. Více o [režimu agenta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) se dozvíte zde. ## 🚀 Výzva: Přidání skleněných odlesků Připraveni vylepšit vaše terárium o realistické skleněné odlesky? Tato technika přidá designu hloubku a realističnost. Vytvoříte jemné odlesky, které simulují, jak se světlo odráží od skleněných povrchů. Tento přístup je podobný tomu, jak renesanční malíři jako Jan van Eyck používali světlo a odraz k vytvoření trojrozměrného dojmu malovaného skla. Takto to chcete dosáhnout:  **Vaše výzva:** - **Vytvořit** jemné bílé nebo světlé oválné tvary pro skleněné odlesky - **Umístit** je strategicky na levé straně nádoby - **Aplikovat** vhodné průhlednosti a rozostření pro realistický odraz světla - **Použít** `border-radius` k vytvoření organických, bublinových tvarů - **Experimentovat** s přechody nebo stíny pro lepší realističnost ## Kvíz po přednášce [Kvíz po přednášce](https://ff-quizzes.netlify.app/web/quiz/18) ## Rozšiřte své znalosti CSS CSS může být zpočátku složité, ale pochopení těchto základních pojmů poskytuje pevné základy pro pokročilé techniky. **Vaše další oblasti učení CSS:** - **Flexbox** - zjednodušuje zarovnání a distribuci prvků - **CSS Grid** - nabízí výkonné nástroje pro tvorbu složitých rozvržení - **CSS Proměnné** - snižují opakování a zlepšují udržovatelnost - **Responzivní design** - zajišťuje dobrou funkčnost na různých zařízeních ### Interaktivní vzdělávací zdroje Procvičujte tyto koncepty pomocí těchto zábavných a praktických her: - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Ovládněte Flexbox pomocí zábavných úkolů - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Naučte se CSS Grid pěstováním virtuálních mrkví - 🎯 [CSS Battle](https://cssbattle.dev/) - Otestujte své CSS dovednosti v kódovacích výzvách ### Další učení Pro komplexní základy CSS dokončete modul Microsoft Learn: [Stylujte svou HTML aplikaci pomocí CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **Co můžete udělat během následujících 5 minut** - [ ] Otevřít DevTools a prozkoumat CSS styly na jakékoliv stránce pomocí panelu Elements - [ ] Vytvořit jednoduchý CSS soubor a propojit ho s HTML stránkou - [ ] Zkusit měnit barvy pomocí různých metod: hex, RGB, a pojmenovaných barev - [ ] Procvičit box model přidáním paddingu a marginu k divu ### 🎯 **Co můžete zvládnout během této hodiny** - [ ] Dokončit kvíz po lekci a zopakovat základy CSS - [ ] Stylovat HTML stránku pomocí fontů, barev a odsazení - [ ] Vytvořit jednoduché rozvržení pomocí flexboxu nebo gridu - [ ] Experimentovat s CSS přechody pro plynulé efekty - [ ] Procvičit responzivní design s media queries ### 📅 **Vaše týdenní CSS dobrodružství** - [ ] Dokončit zadání pro stylování terária s kreativním přístupem - [ ] Ovládnout CSS Grid tvorbou galerie fotografií - [ ] Naučit se CSS animace pro oživení svých designů - [ ] Prozkoumat CSS preprocesory jako Sass nebo Less - [ ] Studovat principy designu a aplikovat je v CSS - [ ] Analyzovat a znovu vytvořit zajímavé designy online ### 🌟 **Vaše měsíční mistrovství v designu** - [ ] Vytvořit kompletní systém responsivního webdesignu - [ ] Naučit se CSS-in-JS nebo utility-first frameworky jako Tailwind - [ ] Přispívat do open source projektů se zlepšeními CSS - [ ] Ovládnout pokročilé koncepty CSS jako vlastní vlastnosti a containment - [ ] Vytvořit znovupoužitelné knihovny komponent s modulárním CSS - [ ] Mentorovat další, kdo se učí CSS, a sdílet designové znalosti ## 🎯 Váš časový plán zvládnutí CSS ```mermaid timeline title Progres učení CSS section Základy (10 minut) File Connection: Propojení CSS s HTML : Pochopení pravidel kaskády : Naučit se základy dědičnosti section Selektory (15 minut) Targeting Elements: Selektory elementů : Vzory tříd : Specifičnost ID : Kombinátory section Box Model (20 minut) Layout Fundamentals: Okraje a vnitřní odsazení : Vlastnosti rámečku : Velikost obsahu : Chování box-sizing section Positioning (25 minut) Element Placement: Statické vs relativní : Absolutní pozicování : Vrstva Z-index : Responsivní jednotky section Visual Design (30 minut) Styling Mastery: Barvy a průhlednost : Stíny a efekty : Přechody : Vlastnosti transformace section Responsive Design (45 minut) Multi-Device Support: Mediální dotazy : Flexibilní rozvržení : Přístup mobile-first : Optimalizace viewportu section Advanced Techniques (1 týden) Modern CSS: Flexbox rozvržení : CSS Grid systémy : Vlastní vlastnosti : Klíčové snímky animací section Professional Skills (1 měsíc) CSS Architecture: Vzory komponent : Udržovatelný kód : Optimalizace výkonu : Kompatibilita mezi prohlížeči ``` ### 🛠️ Shrnutí vašeho CSS nástroje Po dokončení této lekce máte nyní: - **Porozumění kaskádě**: Jak se styly dědí a přepisují - **Mistrovství selektorů**: Precizní cílení na elementy, třídy a ID - **Dovednosti pozicování**: Strategické umisťování a vrstvení prvků - **Vizuální design**: Vytváření skleněných efektů, stínů a průhlednosti - **Responzivní techniky**: Rozvržení založená na procentech, která se přizpůsobí obrazovce - **Organizace kódu**: Čistá, udržitelná struktura CSS - **Moderní přístupy**: Používání relativních jednotek a přístupných designových vzorů **Další kroky**: Vaše terárium má nyní strukturu (HTML) i styl (CSS). Závěrečná lekce přidá interaktivitu pomocí JavaScriptu! ## Zadání [CSS Refactoring](assignment.md) --- **Prohlášení o vyloučení odpovědnosti**: Tento dokument byl přeložen pomocí služby automatického překladu AI [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoli nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.
5% výška
Horní pozice"] --> A B1["60% šířka
80% výška
Zaoblené rohy
0.5 neprůhlednost"] --> B C1["60% šířka
5% výška
Tmavě hnědá
Spodní vrstva"] --> C D1["50% šířka
1% výška
Spodní pozice"] --> D F1["Jemné stíny
Průhlednost
Vrstevnice Z-indexu"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### Tvorba komponent skleněné nádoby Pojďme sestavit terárium kousek po kousku. Každá část využívá absolutní pozicování a procentuální rozměry pro responzivní design: ```css .jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; } ``` **Pochopení konstrukce terária:** - **Používá** rozměry v procentech pro responzivní škálování na všech obrazovkách - **Pozicuje** prvky absolutně, aby se přesně stohovaly a zarovnávaly - **Aplikuje** různé hodnoty průhlednosti k vytvoření efektu skla - **Implementuje** vrstvení pomocí `z-index`, aby rostliny byly uvnitř nádoby - **Přidává** jemné stíny a upravené zaoblení rohů pro realistický vzhled ### Responzivní design s procenty Všimněte si, že všechny rozměry jsou v procentech místo pevných pixelů: **Proč je to důležité:** - **Zajišťuje**, že terárium se proporčně škáluje na jakékoliv obrazovce - **Udržuje** vizuální vztahy mezi komponenty nádoby - **Poskytuje** konzistentní zážitek od mobilů po velké monitory - **Umožňuje** designu adaptovat se bez rozbití vizuálního rozvržení ### Použití CSS jednotek v praxi Používáme jednotky `rem` pro border-radius, které se škálují relativně ke kořenové velikosti písma. To vytváří přístupnější designy respektující uživatelské preference fontů. Více o [relativních jednotkách CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) v oficiální specifikaci. ✅ **Vizualní experimenty**: Zkuste upravit tyto hodnoty a pozorujte efekty: - Změňte průhlednost nádoby z 0.5 na 0.8 – jak to ovlivní vzhled skla? - Upravte barvu hlíny z `#3a241d` na `#8B4513` – jaký to má vizuální dopad? - Změňte `z-index` hlíny na 2 – co se stane s vrstvením? ### 🔄 **Pedagogická kontrola** **Porozumění vizuálnímu designu v CSS**: Potvrďte své znalosti vizuálního CSS: - ✅ Jak procentuální rozměry vytvářejí responzivní design? - ✅ Proč průhlednost vytváří efekt skleněné průhlednosti? - ✅ Jakou roli hraje z-index při vrstvení prvků? - ✅ Jak zaoblení rohů (border-radius) vytváří tvar nádoby? **Princip designu**: Všimněte si, jak stavíme složité vizuály z jednoduchých tvarů: 1. **Obdélníky** → **Zaoblené obdélníky** → **Komponenty nádoby** 2. **Plné barvy** → **Průhlednost** → **Efekt skla** 3. **Jednotlivé prvky** → **Vrstvená kompozice** → **3D vzhled** --- ## Výzva GitHub Copilot Agenta 🚀 Použijte režim Agenta k dokončení následující výzvy: **Popis:** Vytvořte CSS animaci, která jemně houpá rostliny v teráriu ze strany na stranu, simulujíc přirozený vánek. Pomůže vám procvičit CSS animace, transformace a klíčové snímky a zároveň zlepší vizuální atraktivitu terária. **Pokyn:** Přidejte CSS animace klíčových snímků, které jemně houpají rostliny v teráriu ze strany na stranu. Vytvořte houpavou animaci, která mírně (2-3 stupně) otáčí každou rostlinu doleva a doprava v délce 3-4 sekund, a aplikujte ji na třídu `.plant`. Zajistěte, aby animace běžela nekonečně a měla easing pro přirozený pohyb. Více o [režimu agenta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) se dozvíte zde. ## 🚀 Výzva: Přidání skleněných odlesků Připraveni vylepšit vaše terárium o realistické skleněné odlesky? Tato technika přidá designu hloubku a realističnost. Vytvoříte jemné odlesky, které simulují, jak se světlo odráží od skleněných povrchů. Tento přístup je podobný tomu, jak renesanční malíři jako Jan van Eyck používali světlo a odraz k vytvoření trojrozměrného dojmu malovaného skla. Takto to chcete dosáhnout:  **Vaše výzva:** - **Vytvořit** jemné bílé nebo světlé oválné tvary pro skleněné odlesky - **Umístit** je strategicky na levé straně nádoby - **Aplikovat** vhodné průhlednosti a rozostření pro realistický odraz světla - **Použít** `border-radius` k vytvoření organických, bublinových tvarů - **Experimentovat** s přechody nebo stíny pro lepší realističnost ## Kvíz po přednášce [Kvíz po přednášce](https://ff-quizzes.netlify.app/web/quiz/18) ## Rozšiřte své znalosti CSS CSS může být zpočátku složité, ale pochopení těchto základních pojmů poskytuje pevné základy pro pokročilé techniky. **Vaše další oblasti učení CSS:** - **Flexbox** - zjednodušuje zarovnání a distribuci prvků - **CSS Grid** - nabízí výkonné nástroje pro tvorbu složitých rozvržení - **CSS Proměnné** - snižují opakování a zlepšují udržovatelnost - **Responzivní design** - zajišťuje dobrou funkčnost na různých zařízeních ### Interaktivní vzdělávací zdroje Procvičujte tyto koncepty pomocí těchto zábavných a praktických her: - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Ovládněte Flexbox pomocí zábavných úkolů - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Naučte se CSS Grid pěstováním virtuálních mrkví - 🎯 [CSS Battle](https://cssbattle.dev/) - Otestujte své CSS dovednosti v kódovacích výzvách ### Další učení Pro komplexní základy CSS dokončete modul Microsoft Learn: [Stylujte svou HTML aplikaci pomocí CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **Co můžete udělat během následujících 5 minut** - [ ] Otevřít DevTools a prozkoumat CSS styly na jakékoliv stránce pomocí panelu Elements - [ ] Vytvořit jednoduchý CSS soubor a propojit ho s HTML stránkou - [ ] Zkusit měnit barvy pomocí různých metod: hex, RGB, a pojmenovaných barev - [ ] Procvičit box model přidáním paddingu a marginu k divu ### 🎯 **Co můžete zvládnout během této hodiny** - [ ] Dokončit kvíz po lekci a zopakovat základy CSS - [ ] Stylovat HTML stránku pomocí fontů, barev a odsazení - [ ] Vytvořit jednoduché rozvržení pomocí flexboxu nebo gridu - [ ] Experimentovat s CSS přechody pro plynulé efekty - [ ] Procvičit responzivní design s media queries ### 📅 **Vaše týdenní CSS dobrodružství** - [ ] Dokončit zadání pro stylování terária s kreativním přístupem - [ ] Ovládnout CSS Grid tvorbou galerie fotografií - [ ] Naučit se CSS animace pro oživení svých designů - [ ] Prozkoumat CSS preprocesory jako Sass nebo Less - [ ] Studovat principy designu a aplikovat je v CSS - [ ] Analyzovat a znovu vytvořit zajímavé designy online ### 🌟 **Vaše měsíční mistrovství v designu** - [ ] Vytvořit kompletní systém responsivního webdesignu - [ ] Naučit se CSS-in-JS nebo utility-first frameworky jako Tailwind - [ ] Přispívat do open source projektů se zlepšeními CSS - [ ] Ovládnout pokročilé koncepty CSS jako vlastní vlastnosti a containment - [ ] Vytvořit znovupoužitelné knihovny komponent s modulárním CSS - [ ] Mentorovat další, kdo se učí CSS, a sdílet designové znalosti ## 🎯 Váš časový plán zvládnutí CSS ```mermaid timeline title Progres učení CSS section Základy (10 minut) File Connection: Propojení CSS s HTML : Pochopení pravidel kaskády : Naučit se základy dědičnosti section Selektory (15 minut) Targeting Elements: Selektory elementů : Vzory tříd : Specifičnost ID : Kombinátory section Box Model (20 minut) Layout Fundamentals: Okraje a vnitřní odsazení : Vlastnosti rámečku : Velikost obsahu : Chování box-sizing section Positioning (25 minut) Element Placement: Statické vs relativní : Absolutní pozicování : Vrstva Z-index : Responsivní jednotky section Visual Design (30 minut) Styling Mastery: Barvy a průhlednost : Stíny a efekty : Přechody : Vlastnosti transformace section Responsive Design (45 minut) Multi-Device Support: Mediální dotazy : Flexibilní rozvržení : Přístup mobile-first : Optimalizace viewportu section Advanced Techniques (1 týden) Modern CSS: Flexbox rozvržení : CSS Grid systémy : Vlastní vlastnosti : Klíčové snímky animací section Professional Skills (1 měsíc) CSS Architecture: Vzory komponent : Udržovatelný kód : Optimalizace výkonu : Kompatibilita mezi prohlížeči ``` ### 🛠️ Shrnutí vašeho CSS nástroje Po dokončení této lekce máte nyní: - **Porozumění kaskádě**: Jak se styly dědí a přepisují - **Mistrovství selektorů**: Precizní cílení na elementy, třídy a ID - **Dovednosti pozicování**: Strategické umisťování a vrstvení prvků - **Vizuální design**: Vytváření skleněných efektů, stínů a průhlednosti - **Responzivní techniky**: Rozvržení založená na procentech, která se přizpůsobí obrazovce - **Organizace kódu**: Čistá, udržitelná struktura CSS - **Moderní přístupy**: Používání relativních jednotek a přístupných designových vzorů **Další kroky**: Vaše terárium má nyní strukturu (HTML) i styl (CSS). Závěrečná lekce přidá interaktivitu pomocí JavaScriptu! ## Zadání [CSS Refactoring](assignment.md) --- **Prohlášení o vyloučení odpovědnosti**: Tento dokument byl přeložen pomocí služby automatického překladu AI [Co-op Translator](https://github.com/Azure/co-op-translator). I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoli nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.