Summary of HTML and CSS Fundamentals
HTML and CSS Fundamentals: Comprehensive Student Guide
Úvod
CSS (Cascading Style Sheets) je jazyk pro popis vzhledu a rozvržení dokumentů na webu. Tento materiál se zaměřuje na hlavní koncepty CSS: syntax, hodnoty a jednotky, model boxu, typy elementů (display), barvy, písma, moderní layouty (Flexbox, Grid) a proměnné (custom properties). Cílem je poskytnout praktické příklady a srozumitelné vysvětlení pro univerzitní úroveň studia.
Definice: CSS je jazyk pro stylování elementů dokumentu; odděluje prezentaci od obsahu.
1. Základní syntax a selektory
Syntax
selector { property: value; }
- Selector určuje, kterým elementům se styl aplikuje.
- Property je vlastnost (např. color, margin).
- Value je hodnota vlastnosti (např. red, 16px).
Definice: Selektor je výraz, který vybírá elementy v dokumentu pro aplikaci stylů.
Typy selektorů
- Element: p, div, h1
- Třída: .class
- ID: #id
- Složené: div > p, a:hover
Tabulka: Porovnání běžných selektorů
| Selektor | Význam | Příklad použití |
|---|---|---|
| element | přímo podle značky | p { line-height: 1.5 } |
| .class | podle třídy | .btn { padding: 8px } |
| #id | unikátní identifikátor | #header { height: 60px } |
| pseudo-class | stav elementu | a:hover { color: red } |
2. Cascade a specificita
- Pravidlo: vyšší specificita přepíše nižší
- Pořadí: inline styly > ID > třída/pseudo-class > element
Definice: Specificita určuje, která pravidla zvítězí při konfliktu stylů.
V praxi: když #nav p { color: blue } a .highlight { color: red } platí modře pro elementy v #nav, pokud není použit inline styl.
3. Hodnoty, jednotky a barvy
Barvy
- Jména: red, blue
- RGB: rgb(0,255,0)
- Hex: #00FF00 nebo #0F0
- RGBA: rgba(255,0,0,0.5) — poslední kanál je alfa (průhlednost)
Definice: Barva v CSS může být vyjádřena různými formáty: jméno, hex, rgb(a) nebo moderní HSL.
Příklad použití:
.mybox { background-color: rgba(255,0,0,0.2); }
Jednotky
- Absolutní: px
- Relativní: em, rem
- Procenta a viewport: %, vh, vw
Tabulka: Kdy použít jakou jednotku
| Jednotka | Použití | Výhoda |
|---|---|---|
| px | přesné rozměry | prediktabilní vzhled |
| em | vztah k rodiči | vhodné pro škálování textu |
| rem | vztah k root | konzistentní škálování |
| % | relativní vůči kontejneru | flexibilní layout |
| vh/vw | relativní k viewportu | responzivní rozložení |
4. Box model
- Skládá se z: content, padding, border, margin
- box-sizing: content-box (výchozí) nebo border-box (doporučeno pro praktičnost)
Definice: Box model popisuje, jak se počítá celková šířka a výška elementu včetně paddingu a ohraničení.
Příklad:
.box { box-sizing: border-box; width: 300px; padding: 20px; border: 2px solid #000; }
Výpočet (při border-box) zajišťuje, že celková šířka zůstane 300px.
5. Typy prvků podle display
- block: zabírá celou šířku (např. article, div).
- inline-block: chová se jako inline prvek, ale lze mu nastavit šířku/výšku.
- inline: řadí se v řádku (např. a, span).
Tabulka: Rozdíly mezi display typy
| Display | Chování | Může mít width/height |
|---|---|---|
| block | nový blok, plná šířka | ano |
| inline-block | vedle sebe, blokové vlastnosti | ano |
| inline | v řádku, neblokové | ne (většinou) |
Praktický příklad: tlačítka a navigace často používají inline-block pro zachování řádkového zalomení a zároveň možnosti nastavit padding.
6. Písma a font-face
- Vlastnost: font-family: Arial, Verdana, sans-serif;
- Vždy uveďte generickou rodinu jako poslední rezervu
@font-face příklad:
@font-face { font-family: 'MyFont'; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); }
.myText { font-family: 'MyFont', sans-serif; }
Definice: @font-face umožňuje načíst vlastní fonty, které nejsou
Zaregistruj se pro celé shrnutíAlready have an account? Sign in
CSS Základy
Klíčové pojmy: CSS syntax: selector { property: value }, Specificita: inline > ID > class > element, Barvy: name, hex, rgb(), rgba() with alpha, Jednotky: px, em, rem, %, vh, vw, Box model: content, padding, border, margin; use border-box, Display types: block, inline-block, inline, Use @font-face for custom fonts and always include generic family, Flexbox for 1D layouts; Grid for 2D layouts, Declare CSS custom properties in :root and use var(), Prefer rem for font sizing and box-sizing: border-box for predictable layouts