0:00:00.095,0:00:02.336
Na této stránce pomocí CSS

0:00:02.336,0:00:04.600
stylujeme naše `` nadpisy[br](dále navrhuju číst há dvojky) a odstavce tak,

0:00:04.600,0:00:08.920
že všechny `` jsou zelené[br]a všechny odstavce jsou fialové.

0:00:09.537,0:00:13.460
Ale co kdybychom chtěli vybrat[br]jen první `` nadpis

0:00:13.460,0:00:16.462
nebo nastylovat[br]jen druhý odstavec?

0:00:16.716,0:00:19.867
Musíme najít způsob,[br]jak prohlížeči říct,

0:00:19.867,0:00:21.513
které z elementů chceme vybrat,

0:00:21.513,0:00:24.931
aby se styly nepoužily všude,[br]jako doposud.

0:00:25.333,0:00:27.945
Prvním způsobem je výběr pomocí identifikátoru, neboli ID.

0:00:28.265,0:00:30.525
Můžeme libovolnému tagu na naší[br]stránce přiřadit jedinečné ID

0:00:30.525,0:00:32.176
a potom můžeme CSS říct,

0:00:32.176,0:00:36.297
"Poslouchej: Chceme použít tyto styly[br]jen pro element s tímto ID,

0:00:36.297,0:00:38.208
pro žádné jiné ne."

0:00:38.455,0:00:41.281
Abychom toho dosáhli, musíme[br]nejprve upravit HTML kód

0:00:41.281,0:00:45.132
a přidat naše atributy id k tagům,[br]které chceme vybrat.

0:00:45.741,0:00:48.371
Začneme tady s druhým odstavcem.

0:00:48.529,0:00:50.896
Pro přidání atributu id[br]posuneme náš kurzor

0:00:50.896,0:00:53.415
na začátek tagu ``[br]hned za p,

0:00:53.415,0:00:58.357
přidáme jednu mezeru[br]a za ní `id = "`

0:00:58.982,0:01:02.667
Teď musíme vyplnit náš atribut id[br]nějakou hodnotou.

0:01:02.812,0:01:04.180
Jaké ID mu mám dát?

0:01:04.180,0:01:06.452
No, mělo by být popisné[br]a jedinečné.

0:01:06.508,0:01:09.229
Nic na této stránce nesmí mít stejné ID.

0:01:09.479,0:01:15.080
Protože naše písnička je o králících,[br]id by mohlo být 'rabbits-song'.

0:01:15.422,0:01:19.837
V atributu ID nemůžou být mezery,[br]a pokud máme více slov,

0:01:19.837,0:01:22.596
musíme je oddělit pomlčkami[br]nebo podtržítky.

0:01:22.596,0:01:25.250
Já osobně mám nejradši pomlčky.

0:01:25.650,0:01:28.941
Teď už umíme jednoznačně vybrat[br]tento odstavec.

0:01:29.016,0:01:31.646
Takže můžeme přidat CSS[br]pravidlo přímo pro něj.

0:01:31.746,0:01:35.479
V druhém kroku se tedy vraťme [br]zpět k našemu tagu ``.

0:01:35.598,0:01:38.428
Pod poslední pravidlo přidáme nový řádek.

0:01:39.478,0:01:43.255
Nezapomeňte, první část CSS pravidla[br]je vždy selektor:

0:01:43.255,0:01:46.098
ta část, která říká prohlížeči,[br]co přesně vybrat.

0:01:46.098,0:01:51.130
V našich předchozích pravidlech jsme[br]používali selektory jako 'h2' a 'p'

0:01:51.130,0:01:54.031
a tím jsme zvolili všechny tagy[br]`` a `` na stránce.

0:01:54.554,0:01:58.653
Teď když chceme selektor,[br]který vybere pouze elementy s určitým ID,

0:01:58.671,0:02:01.182
náš selektor musí začínat křížkem.

0:02:01.293,0:02:04.547
Tím prohlížeči řekneme,[br]že cokoliv za křížkem je ID.

0:02:05.147,0:02:08.798
Teď napíšeme naše ID:[br]rabbits-song.

0:02:09.603,0:02:11.882
Zbytek pravidla bude stejný jako doteď.

0:02:11.934,0:02:14.352
Otevřeme a zavřeme naše složené závorky,

0:02:14.352,0:02:17.844
přidáme vlastnost,[br]třeba background-color...

0:02:18.364,0:02:20.574
... a ta-dá! Zabralo to!

0:02:20.873,0:02:23.934
Žlutou barvu má jen odstavec s písničkou,

0:02:23.934,0:02:26.093
první odstavec se nezměnil.

0:02:26.574,0:02:30.764
Pojďme si to zopakovat,[br]ale vybereme náš první tag ``.

0:02:31.133,0:02:32.866
Pamatujete si první krok?

0:02:33.515,0:02:36.586
Správně. Nejdřív musíme upravit naše HTML

0:02:36.586,0:02:38.285
a přidat atribut `id`.

0:02:38.300,0:02:40.693
Takže náš kurzor hezky[br]do otevíracího tagu,

0:02:40.693,0:02:43.520
přidat mezeru, napsat `id=`

0:02:43.580,0:02:46.691
a potom opět zcela[br]jedinečné a popisné ID.

0:02:46.791,0:02:49.944
Třeba, "rabbits-info-heading".

0:02:50.690,0:02:54.043
Super, teď druhý krok.[br]Zpět do našeho tagu 'style',

0:02:54.043,0:02:57.429
přidáme nový řádek,[br]napíšeme křížek,

0:02:57.429,0:03:01.840
potom naše ID,[br]rabbits-info-heading

0:03:01.840,0:03:04.947
a pak vložíme naše vlastnosti[br]do složených závorek

0:03:04.947,0:03:08.625
background-color: purple;

0:03:08.945,0:03:13.260
O-ou! Aha, něco se pokazilo.[br]Hmm... vidíte, kde je chyba?

0:03:13.420,0:03:15.279
Napsala jsem to správně?

0:03:15.359,0:03:18.305
rabbits-info-Heading,[br]rabbits-info-heading...

0:03:18.485,0:03:21.049
Hmm... vypadají docela stejně.

0:03:21.160,0:03:23.374
Můžu je projít písmeno po písmenu

0:03:23.374,0:03:25.079
a zkusit najít chybu,

0:03:25.079,0:03:29.633
ale já radši sjedu dolů,[br]označím si naše ID z HTML

0:03:29.679,0:03:33.810
a zkopíruju si ho, a potom ho vložím sem[br]nahoru, ať mám jistotu, že jsou přesně stejné.

0:03:33.887,0:03:35.481
A... zabralo to!

0:03:35.561,0:03:39.825
Moje h2 má nové pozadí.[br]A všimli jste si, co se změnilo?

0:03:40.085,0:03:44.474
Možná že jo. Bylo to tohle h.[br]Předtím jsme použili velké H,

0:03:44.474,0:03:47.003
a prohlížeč mezi velikostmi rozlišuje.

0:03:47.103,0:03:50.231
Musí to být malé h, aby to bylo stejné[br]jako v HTML kódu,

0:03:50.315,0:03:52.850
protože v atributu ID záleží[br]na velikosti písmen.

0:03:52.930,0:03:57.143
Takže je musíme napsat všude[br]přesně stejnou velikostí.

0:03:57.513,0:04:01.753
Já nejradši používám pro moje IDčka[br]pouze malá písmena,

0:04:01.753,0:04:05.145
protože pak nemusím přemýšlet,[br]jakou velikost jsem kde použila.

0:04:05.158,0:04:08.404
Dobře, na závěr poslední upozornění:

0:04:08.404,0:04:10.530
IDčka musí být jedinečná!

0:04:10.648,0:04:13.444
Pokud máte na stránce dva tagy[br]s přesně stejným IDčkem,

0:04:13.444,0:04:17.835
prohlížeč může nastylovat oba,[br]ale taky může nastylovat jen jeden z nich.

0:04:17.962,0:04:20.341
A to určitě nechceme ponechat náhodě.

0:04:20.451,0:04:23.796
Takže chceme pěkná, jedinečná a popisná IDčka.