Úloha 2 – Základy CSS selektorů a syntaxe

Úvod k úloze

Když už víme, jak připojit CSS do stránky, můžeme se začít zabývat samotnou syntaxí CSS. Základem všeho je porozumět tomu, jak fungují selektory a deklarace. Selektory určují, na které prvky na stránce se styly aplikují, a deklarace popisují, jaký styl bude použit (barva, velikost, okraje apod.). Pokud se naučíte správně používat různé druhy selektorů, získáte obrovskou kontrolu nad vzhledem celé stránky.

Teorie a principy

Základní struktura pravidla
Každé CSS pravidlo má tuto podobu:

selektor – určuje, na které elementy se pravidlo vztahuje.
vlastnost: hodnota; – říká, jak se má změnit vzhled (např. color: red;).
Více deklarací oddělujeme středníkem.

Druhy selektorů

Element (tag):

Ovlivní všechny odstavce <p>
Třída (class):

Ovlivní všechny prvky s atributem class="zvyrazneny".
ID (id):

Ovlivní prvek s konkrétním id="hlavniNadpis".
Univerzální selektor *:

Ovlivní všechny prvky na stránce (často používaný pro „reset“ stylů).

Kombinované selektory

Vícenásobné selektory (oddělené čárkou):

Stejný styl pro více elementů.
Vnořené selektory (potomek):

Ovlivní pouze <ul> uvnitř <nav>
Selektor potomka s třídou:

Ovlivní jen prvky s třídou .zvyrazneny, které jsou uvnitř odstavce <p>

Praktické příklady kódu

HTML část

CSS část

Typické chyby / záludnosti

Zapomenutá složená závorka nebo středník – jeden chybějící znak může zneplatnit celé pravidlo.
Záměna . a # – . se používá pro třídy, # pro ID.
Používání více stejných ID na stránce – ID má být jedinečné.
Zbytečné používání univerzálního selektoru * – může zpomalovat načítání a neočekávaně ovlivnit všechny prvky.
Příliš složité kombinace selektorů – čím jednodušší, tím lépe pro čitelnost i výkon.

Shrnutí

CSS pravidlo = selektor + blok deklarací.
Existují různé typy selektorů: element, třída, ID, univerzální.
Selektory lze kombinovat (čárkou, vnořením atd.).
Dodržujte syntaxi ({}, ;) a nezaměňujte ID a třídy.
Jednoduché a logické selektory zajišťují přehledný a dobře udržovatelný kód.