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

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

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