WEBVTT

00:00:00.095 --> 00:00:02.336
Na této stránce pomocí CSS

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

00:00:04.600 --> 00:00:08.920
že všechny `` jsou zelené
a všechny odstavce jsou fialové.

00:00:09.537 --> 00:00:13.460
Ale co kdybychom chtěli vybrat
jen první `` nadpis

00:00:13.460 --> 00:00:16.462
nebo nastylovat
jen druhý odstavec?

00:00:16.716 --> 00:00:19.867
Musíme najít způsob,
jak prohlížeči říct,

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

00:00:21.513 --> 00:00:24.931
aby se styly nepoužily všude,
jako doposud.

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

00:00:28.265 --> 00:00:30.525
Můžeme libovolnému tagu na naší
stránce přiřadit jedinečné ID

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

00:00:32.176 --> 00:00:36.297
"Poslouchej: Chceme použít tyto styly
jen pro element s tímto ID,

00:00:36.297 --> 00:00:38.208
pro žádné jiné ne."

00:00:38.455 --> 00:00:41.281
Abychom toho dosáhli, musíme
nejprve upravit HTML kód

00:00:41.281 --> 00:00:45.132
a přidat naše atributy id k tagům,
které chceme vybrat.

00:00:45.741 --> 00:00:48.371
Začneme tady s druhým odstavcem.

00:00:48.529 --> 00:00:50.896
Pro přidání atributu id
posuneme náš kurzor

00:00:50.896 --> 00:00:53.415
na začátek tagu ``
hned za p,

00:00:53.415 --> 00:00:58.357
přidáme jednu mezeru
a za ní `id = "`

00:00:58.982 --> 00:01:02.667
Teď musíme vyplnit náš atribut id
nějakou hodnotou.

00:01:02.812 --> 00:01:04.180
Jaké ID mu mám dát?

00:01:04.180 --> 00:01:06.452
No, mělo by být popisné
a jedinečné.

00:01:06.508 --> 00:01:09.229
Nic na této stránce nesmí mít stejné ID.

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

00:01:15.422 --> 00:01:19.837
V atributu ID nemůžou být mezery,
a pokud máme více slov,

00:01:19.837 --> 00:01:22.596
musíme je oddělit pomlčkami
nebo podtržítky.

00:01:22.596 --> 00:01:25.250
Já osobně mám nejradši pomlčky.

00:01:25.650 --> 00:01:28.941
Teď už umíme jednoznačně vybrat
tento odstavec.

00:01:29.016 --> 00:01:31.646
Takže můžeme přidat CSS
pravidlo přímo pro něj.

00:01:31.746 --> 00:01:35.479
V druhém kroku se tedy vraťme 
zpět k našemu tagu ``.

00:01:35.598 --> 00:01:38.428
Pod poslední pravidlo přidáme nový řádek.

00:01:39.478 --> 00:01:43.255
Nezapomeňte, první část CSS pravidla
je vždy selektor:

00:01:43.255 --> 00:01:46.098
ta část, která říká prohlížeči,
co přesně vybrat.

00:01:46.098 --> 00:01:51.130
V našich předchozích pravidlech jsme
používali selektory jako 'h2' a 'p'

00:01:51.130 --> 00:01:54.031
a tím jsme zvolili všechny tagy
`` a `` na stránce.

00:01:54.554 --> 00:01:58.653
Teď když chceme selektor,
který vybere pouze elementy s určitým ID,

00:01:58.671 --> 00:02:01.182
náš selektor musí začínat křížkem.

00:02:01.293 --> 00:02:04.547
Tím prohlížeči řekneme,
že cokoliv za křížkem je ID.

00:02:05.147 --> 00:02:08.798
Teď napíšeme naše ID:
rabbits-song.

00:02:09.603 --> 00:02:11.882
Zbytek pravidla bude stejný jako doteď.

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

00:02:14.352 --> 00:02:17.844
přidáme vlastnost,
třeba background-color...

00:02:18.364 --> 00:02:20.574
... a ta-dá! Zabralo to!

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

00:02:23.934 --> 00:02:26.093
první odstavec se nezměnil.

00:02:26.574 --> 00:02:30.764
Pojďme si to zopakovat,
ale vybereme náš první tag ``.

00:02:31.133 --> 00:02:32.866
Pamatujete si první krok?

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

00:02:36.586 --> 00:02:38.285
a přidat atribut `id`.

00:02:38.300 --> 00:02:40.693
Takže náš kurzor hezky
do otevíracího tagu,

00:02:40.693 --> 00:02:43.520
přidat mezeru, napsat `id=`

00:02:43.580 --> 00:02:46.691
a potom opět zcela
jedinečné a popisné ID.

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

00:02:50.690 --> 00:02:54.043
Super, teď druhý krok.
Zpět do našeho tagu 'style',

00:02:54.043 --> 00:02:57.429
přidáme nový řádek,
napíšeme křížek,

00:02:57.429 --> 00:03:01.840
potom naše ID,
rabbits-info-heading

00:03:01.840 --> 00:03:04.947
a pak vložíme naše vlastnosti
do složených závorek

00:03:04.947 --> 00:03:08.625
background-color: purple;

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

00:03:13.420 --> 00:03:15.279
Napsala jsem to správně?

00:03:15.359 --> 00:03:18.305
rabbits-info-Heading,
rabbits-info-heading...

00:03:18.485 --> 00:03:21.049
Hmm... vypadají docela stejně.

00:03:21.160 --> 00:03:23.374
Můžu je projít písmeno po písmenu

00:03:23.374 --> 00:03:25.079
a zkusit najít chybu,

00:03:25.079 --> 00:03:29.633
ale já radši sjedu dolů,
označím si naše ID z HTML

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

00:03:33.887 --> 00:03:35.481
A... zabralo to!

00:03:35.561 --> 00:03:39.825
Moje h2 má nové pozadí.
A všimli jste si, co se změnilo?

00:03:40.085 --> 00:03:44.474
Možná že jo. Bylo to tohle h.
Předtím jsme použili velké H,

00:03:44.474 --> 00:03:47.003
a prohlížeč mezi velikostmi rozlišuje.

00:03:47.103 --> 00:03:50.231
Musí to být malé h, aby to bylo stejné
jako v HTML kódu,

00:03:50.315 --> 00:03:52.850
protože v atributu ID záleží
na velikosti písmen.

00:03:52.930 --> 00:03:57.143
Takže je musíme napsat všude
přesně stejnou velikostí.

00:03:57.513 --> 00:04:01.753
Já nejradši používám pro moje IDčka
pouze malá písmena,

00:04:01.753 --> 00:04:05.145
protože pak nemusím přemýšlet,
jakou velikost jsem kde použila.

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

00:04:08.404 --> 00:04:10.530
IDčka musí být jedinečná!

00:04:10.648 --> 00:04:13.444
Pokud máte na stránce dva tagy
s přesně stejným IDčkem,

00:04:13.444 --> 00:04:17.835
prohlížeč může nastylovat oba,
ale taky může nastylovat jen jeden z nich.

00:04:17.962 --> 00:04:20.341
A to určitě nechceme ponechat náhodě.

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