Na této stránce pomocí CSS
stylujeme naše `` nadpisy (dále navrhuju číst há dvojky) a odstavce tak,
že všechny `` jsou zelené a všechny odstavce jsou fialové.
Ale co kdybychom chtěli vybrat jen první `` nadpis
nebo nastylovat jen druhý odstavec?
Musíme najít způsob, jak prohlížeči říct,
které z elementů chceme vybrat,
aby se styly nepoužily všude, jako doposud.
Prvním způsobem je výběr pomocí identifikátoru, neboli ID.
Můžeme libovolnému tagu na naší stránce přiřadit jedinečné ID
a potom můžeme CSS říct,
"Poslouchej: Chceme použít tyto styly jen pro element s tímto ID,
pro žádné jiné ne."
Abychom toho dosáhli, musíme nejprve upravit HTML kód
a přidat naše atributy id k tagům, které chceme vybrat.
Začneme tady s druhým odstavcem.
Pro přidání atributu id posuneme náš kurzor
na začátek tagu `` hned za p,
přidáme jednu mezeru a za ní `id = "`
Teď musíme vyplnit náš atribut id nějakou hodnotou.
Jaké ID mu mám dát?
No, mělo by být popisné a jedinečné.
Nic na této stránce nesmí mít stejné ID.
Protože naše písnička je o králících, id by mohlo být 'rabbits-song'.
V atributu ID nemůžou být mezery, a pokud máme více slov,
musíme je oddělit pomlčkami nebo podtržítky.
Já osobně mám nejradši pomlčky.
Teď už umíme jednoznačně vybrat tento odstavec.
Takže můžeme přidat CSS pravidlo přímo pro něj.
V druhém kroku se tedy vraťme zpět k našemu tagu ``.
Pod poslední pravidlo přidáme nový řádek.
Nezapomeňte, první část CSS pravidla je vždy selektor:
ta část, která říká prohlížeči, co přesně vybrat.
V našich předchozích pravidlech jsme používali selektory jako 'h2' a 'p'
a tím jsme zvolili všechny tagy `` a `` na stránce.
Teď když chceme selektor, který vybere pouze elementy s určitým ID,
náš selektor musí začínat křížkem.
Tím prohlížeči řekneme, že cokoliv za křížkem je ID.
Teď napíšeme naše ID: rabbits-song.
Zbytek pravidla bude stejný jako doteď.
Otevřeme a zavřeme naše složené závorky,
přidáme vlastnost, třeba background-color...
... a ta-dá! Zabralo to!
Žlutou barvu má jen odstavec s písničkou,
první odstavec se nezměnil.
Pojďme si to zopakovat, ale vybereme náš první tag ``.
Pamatujete si první krok?
Správně. Nejdřív musíme upravit naše HTML
a přidat atribut `id`.
Takže náš kurzor hezky do otevíracího tagu,
přidat mezeru, napsat `id=`
a potom opět zcela jedinečné a popisné ID.
Třeba, "rabbits-info-heading".
Super, teď druhý krok. Zpět do našeho tagu 'style',
přidáme nový řádek, napíšeme křížek,
potom naše ID, rabbits-info-heading
a pak vložíme naše vlastnosti do složených závorek
background-color: purple;
O-ou! Aha, něco se pokazilo. Hmm... vidíte, kde je chyba?
Napsala jsem to správně?
rabbits-info-Heading, rabbits-info-heading...
Hmm... vypadají docela stejně.
Můžu je projít písmeno po písmenu
a zkusit najít chybu,
ale já radši sjedu dolů, označím si naše ID z HTML
a zkopíruju si ho, a potom ho vložím sem nahoru, ať mám jistotu, že jsou přesně stejné.
A... zabralo to!
Moje h2 má nové pozadí. A všimli jste si, co se změnilo?
Možná že jo. Bylo to tohle h. Předtím jsme použili velké H,
a prohlížeč mezi velikostmi rozlišuje.
Musí to být malé h, aby to bylo stejné jako v HTML kódu,
protože v atributu ID záleží na velikosti písmen.
Takže je musíme napsat všude přesně stejnou velikostí.
Já nejradši používám pro moje IDčka pouze malá písmena,
protože pak nemusím přemýšlet, jakou velikost jsem kde použila.
Dobře, na závěr poslední upozornění:
IDčka musí být jedinečná!
Pokud máte na stránce dva tagy s přesně stejným IDčkem,
prohlížeč může nastylovat oba, ale taky může nastylovat jen jeden z nich.
A to určitě nechceme ponechat náhodě.
Takže chceme pěkná, jedinečná a popisná IDčka.