WEBVTT

00:00:00.095 --> 00:00:02.336
Na tej stronie, używając języka CSS,

00:00:02.336 --> 00:00:04.600
zmieniamy styl nagłówków
„h2” i akapitów.

00:00:04.600 --> 00:00:08.920
Wszystkie nagłówki są zielone,
a akapity - fioletowe.

00:00:09.537 --> 00:00:13.460
A gdybyśmy chcieli wybrać
tylko pierwszy „h2”

00:00:13.460 --> 00:00:16.462
lub zmienić styl
tylko w drugim akapicie?

00:00:16.716 --> 00:00:19.867
Musimy jakoś powiedzieć
przeglądarce,

00:00:19.867 --> 00:00:21.513
które elementy wybieramy,

00:00:21.513 --> 00:00:24.931
by nie zmieniała stylu
we wszystkich, jak teraz.

00:00:25.333 --> 00:00:27.945
Jeden sposób - to wybór po ID.

00:00:28.265 --> 00:00:30.525
Nadajemy znacznikowi
niepowtarzalny ID

00:00:30.525 --> 00:00:32.176
i informujemy CSS:

00:00:32.176 --> 00:00:36.297
„Chcę zastosować te style
tylko do elementu z tym ID,

00:00:36.297 --> 00:00:38.208
do żadnych innych".

00:00:38.455 --> 00:00:41.281
Najpierw trzeba zmodyfikować HTML,

00:00:41.281 --> 00:00:45.132
by dodać atrybuty ID
do wybranych znaczników.

00:00:45.741 --> 00:00:48.371
Zacznijmy od drugiego akapitu.

00:00:48.529 --> 00:00:50.896
Aby dodać atrybut ID,
umieszczamy kursor

00:00:50.896 --> 00:00:53.415
w pierwszym znaczniku „p”,
zaraz po „p”,

00:00:53.415 --> 00:00:58.357
później spacja i wpisujemy: 
id = ""

00:00:58.982 --> 00:01:02.667
Atrybutowi ID trzeba nadać wartość.

00:01:02.812 --> 00:01:04.180
Jakie ma być ID?

00:01:04.180 --> 00:01:06.452
Opisowe i niepowtarzalne.

00:01:06.508 --> 00:01:09.229
Nic innego na stronie
nie może mieć takiego ID.

00:01:09.479 --> 00:01:15.080
Skoro to piosenka o królikach,
napiszę rabbits-song („kroliki-piosenka”).

00:01:15.422 --> 00:01:19.837
W ID nie można wpisywać spacji.
Słowa rozdziela się

00:01:19.837 --> 00:01:22.237
za pomocą dywizów i podkreślników.

00:01:22.596 --> 00:01:24.717
Ja lubię dywizy.

00:01:25.650 --> 00:01:28.941
Akapit już można zidentyfikować.

00:01:29.016 --> 00:01:31.646
Dodajmy regułę CSS,
która go znajdzie.

00:01:31.746 --> 00:01:35.479
Wróćmy do znacznika „style”,
by zacząć drugi etap.

00:01:35.598 --> 00:01:38.428
Dodamy nowy wiersz,
po ostatniej regule.

00:01:39.478 --> 00:01:43.255
Pamiętajcie, pierwsza część
reguły CSS to selektor.

00:01:43.255 --> 00:01:45.840
Mówi przeglądarce, co wybrać.

00:01:46.098 --> 00:01:51.130
Poprzednio używaliśmy
selektorów „h2” oraz „p”,

00:01:51.130 --> 00:01:54.031
by wybrać wszystkie
znaczniki „h2” i „p” na stronie.

00:01:54.554 --> 00:01:57.203
Aby selektor wybierał tylko elementy

00:01:57.203 --> 00:01:58.671
z konkretnym ID,

00:01:58.671 --> 00:02:00.862
zaczniemy od kratki.

00:02:01.293 --> 00:02:04.547
Mówi to przeglądarce,
że dalej jest ID.

00:02:05.147 --> 00:02:08.798
Teraz wpisujemy ID:
„rabbits-song”.

00:02:09.603 --> 00:02:11.882
Reszta reguły
pozostaje taka sama.

00:02:11.934 --> 00:02:13.722
Otwieramy i zamykamy klamry,

00:02:13.722 --> 00:02:17.844
dodajemy właściwość,
np. kolor tła

00:02:18.364 --> 00:02:20.574
I już! Udało się!

00:02:20.873 --> 00:02:23.934
Tylko akapit z piosenką
ma żółte tło.

00:02:23.934 --> 00:02:26.093
Pierwszy się nie zmienił.

00:02:27.541 --> 00:02:30.764
Teraz zmieńmy
pierwszy nagłówek „h2”.

00:02:31.133 --> 00:02:32.866
Pamiętacie pierwszy krok?

00:02:33.515 --> 00:02:36.586
Tak, trzeba zmienić HTML,

00:02:36.586 --> 00:02:38.145
dodając atrybut „id”.

00:02:38.300 --> 00:02:40.693
Kursor do znacznika początkowego,

00:02:40.693 --> 00:02:43.520
spacja, wpisujemy: id=""

00:02:43.580 --> 00:02:46.691
a potem niepowtarzalne,
opisowe ID.

00:02:46.791 --> 00:02:49.944
Niech będzie:
„rabbits-info-heading”.

00:02:50.690 --> 00:02:54.043
Teraz krok drugi.
W znaczniku „style”

00:02:54.043 --> 00:02:57.429
dodajemy nowy wiersz z kratką,

00:02:57.429 --> 00:03:01.840
potem nasze ID, 
czyli „rabbits-info-heading”

00:03:01.840 --> 00:03:04.947
i właściwości w klamrach.

00:03:04.947 --> 00:03:08.625
Kolor tła: fiolet.

00:03:08.945 --> 00:03:13.260
Nie udało się. Wiecie, dlaczego?

00:03:13.420 --> 00:03:15.279
Czy napisałam tak samo?

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

00:03:18.485 --> 00:03:21.049
Wyglądają tak samo.

00:03:21.160 --> 00:03:23.374
Mogłabym porównać
literę po literze,

00:03:23.374 --> 00:03:25.079
aby znaleźć błąd,

00:03:25.079 --> 00:03:29.633
wolę jednak wybrać ID z HTML,

00:03:29.679 --> 00:03:33.810
skopiować je i wkleić.
Żeby było identyczne.

00:03:33.887 --> 00:03:35.481
I… Udało się!

00:03:35.561 --> 00:03:39.825
Nagłówek „h2” ma tło.
Zauważyliście błąd?

00:03:40.085 --> 00:03:44.474
Może. Tu było małe „h”.
A tutaj wielkie „H”.

00:03:44.474 --> 00:03:47.003
Przeglądarka nie uznała ich
za to samo.

00:03:47.103 --> 00:03:50.231
Musi być małe „h”, jak w ID w HTML.

00:03:50.315 --> 00:03:52.850
Bo w ID liczy się wielkość liter.

00:03:52.930 --> 00:03:57.143
Wszędzie musi być ten sam zapis.

00:03:57.513 --> 00:04:01.753
Ja w ID używam samych małych liter,

00:04:01.753 --> 00:04:04.645
żeby się nie zastanawiać
nad wielkością.

00:04:05.158 --> 00:04:08.404
Na koniec ostrzeżenie:

00:04:08.404 --> 00:04:10.530
ID muszą być niepowtarzalne.

00:04:10.648 --> 00:04:13.444
Gdy dwa znaczniki na stronie
mają takie samo ID,

00:04:13.444 --> 00:04:17.834
przeglądarka może zmienić oba
albo tylko jeden.

00:04:17.962 --> 00:04:20.341
Nie zdawajcie się na przypadek.

00:04:20.451 --> 00:04:23.096
Niepowtarzalne, opisowe ID!