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