Ú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

1. 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.

2. 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ů).

3. 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.

Úloha

Zadání (kontext úlohy)

Napiš CSS pravidla, která využívají různé typy selektorů:

• selektor pro element (např. p),

• selektor pro třídu (např. .highlight),

• selektor pro ID (např. #main),

• univerzální selektor *,

• kombinovaný selektor (např. div p).

Cíl úlohy

Upevníš si znalost syntaxe CSS a naučíš se rozlišovat jednotlivé typy selektorů.

Vstupní podmínky

• Máš připravený HTML dokument, který obsahuje:

  • několik základních elementů (např. <div>, <p>, <h1>),

  • u některých prvků jsou již přiřazené atributy id a class.

• K dispozici máš soubor styles.css, do kterého budeš zapisovat CSS pravidla.

Požadovaný výstup

• Stylopis (styles.css) obsahující alespoň 5 různých typů selektorů.

• Každý selektor musí ovlivnit viditelný výstup stránky (např. barvu textu, velikost písma, okraje apod.).

Soubory

Odkaz na css soubor
Odkaz na html soubor

Řešení úlohy

Co je zde splněno:

• Element selektor (p) → všechny odstavce budou tmavě modré a větší.

• Třída (.highlight) → zvýrazněné prvky mají žluté pozadí a tučný text.

• ID (#main) → hlavní kontejner má rámeček, padding a světle šedé pozadí.

• Univerzální (*) → celé stránce se nastaví jednotný font.

• Kombinovaný (div p) → všechny odstavce uvnitř <div> mají odsazení a kurzívu.