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

0:00:02.336,0:00:04.600
zmieniamy styl nagłówków[br]„h2” i akapitów.

0:00:04.600,0:00:08.920
Wszystkie nagłówki są zielone,[br]a akapity - fioletowe.

0:00:09.537,0:00:13.460
A gdybyśmy chcieli wybrać[br]tylko pierwszy „h2”

0:00:13.460,0:00:16.462
lub zmienić styl[br]tylko w drugim akapicie?

0:00:16.716,0:00:19.867
Musimy jakoś powiedzieć[br]przeglądarce,

0:00:19.867,0:00:21.513
które elementy wybieramy,

0:00:21.513,0:00:24.931
by nie zmieniała stylu[br]we wszystkich, jak teraz.

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

0:00:28.265,0:00:30.525
Nadajemy znacznikowi[br]niepowtarzalny ID

0:00:30.525,0:00:32.176
i informujemy CSS:

0:00:32.176,0:00:36.297
„Chcę zastosować te style[br]tylko do elementu z tym ID,

0:00:36.297,0:00:38.208
do żadnych innych".

0:00:38.455,0:00:41.281
Najpierw trzeba zmodyfikować HTML,

0:00:41.281,0:00:45.132
by dodać atrybuty ID[br]do wybranych znaczników.

0:00:45.741,0:00:48.371
Zacznijmy od drugiego akapitu.

0:00:48.529,0:00:50.896
Aby dodać atrybut ID,[br]umieszczamy kursor

0:00:50.896,0:00:53.415
w pierwszym znaczniku „p”,[br]zaraz po „p”,

0:00:53.415,0:00:58.357
później spacja i wpisujemy: [br]id = ""

0:00:58.982,0:01:02.667
Atrybutowi ID trzeba nadać wartość.

0:01:02.812,0:01:04.180
Jakie ma być ID?

0:01:04.180,0:01:06.452
Opisowe i niepowtarzalne.

0:01:06.508,0:01:09.229
Nic innego na stronie[br]nie może mieć takiego ID.

0:01:09.479,0:01:15.080
Skoro to piosenka o królikach,[br]napiszę rabbits-song („kroliki-piosenka”).

0:01:15.422,0:01:19.837
W ID nie można wpisywać spacji.[br]Słowa rozdziela się

0:01:19.837,0:01:22.237
za pomocą dywizów i podkreślników.

0:01:22.596,0:01:24.717
Ja lubię dywizy.

0:01:25.650,0:01:28.941
Akapit już można zidentyfikować.

0:01:29.016,0:01:31.646
Dodajmy regułę CSS,[br]która go znajdzie.

0:01:31.746,0:01:35.479
Wróćmy do znacznika „style”,[br]by zacząć drugi etap.

0:01:35.598,0:01:38.428
Dodamy nowy wiersz,[br]po ostatniej regule.

0:01:39.478,0:01:43.255
Pamiętajcie, pierwsza część[br]reguły CSS to selektor.

0:01:43.255,0:01:45.840
Mówi przeglądarce, co wybrać.

0:01:46.098,0:01:51.130
Poprzednio używaliśmy[br]selektorów „h2” oraz „p”,

0:01:51.130,0:01:54.031
by wybrać wszystkie[br]znaczniki „h2” i „p” na stronie.

0:01:54.554,0:01:57.203
Aby selektor wybierał tylko elementy

0:01:57.203,0:01:58.671
z konkretnym ID,

0:01:58.671,0:02:00.862
zaczniemy od kratki.

0:02:01.293,0:02:04.547
Mówi to przeglądarce,[br]że dalej jest ID.

0:02:05.147,0:02:08.798
Teraz wpisujemy ID:[br]„rabbits-song”.

0:02:09.603,0:02:11.882
Reszta reguły[br]pozostaje taka sama.

0:02:11.934,0:02:13.722
Otwieramy i zamykamy klamry,

0:02:13.722,0:02:17.844
dodajemy właściwość,[br]np. kolor tła

0:02:18.364,0:02:20.574
I już! Udało się!

0:02:20.873,0:02:23.934
Tylko akapit z piosenką[br]ma żółte tło.

0:02:23.934,0:02:26.093
Pierwszy się nie zmienił.

0:02:27.541,0:02:30.764
Teraz zmieńmy[br]pierwszy nagłówek „h2”.

0:02:31.133,0:02:32.866
Pamiętacie pierwszy krok?

0:02:33.515,0:02:36.586
Tak, trzeba zmienić HTML,

0:02:36.586,0:02:38.145
dodając atrybut „id”.

0:02:38.300,0:02:40.693
Kursor do znacznika początkowego,

0:02:40.693,0:02:43.520
spacja, wpisujemy: id=""

0:02:43.580,0:02:46.691
a potem niepowtarzalne,[br]opisowe ID.

0:02:46.791,0:02:49.944
Niech będzie:[br]„rabbits-info-heading”.

0:02:50.690,0:02:54.043
Teraz krok drugi.[br]W znaczniku „style”

0:02:54.043,0:02:57.429
dodajemy nowy wiersz z kratką,

0:02:57.429,0:03:01.840
potem nasze ID, [br]czyli „rabbits-info-heading”

0:03:01.840,0:03:04.947
i właściwości w klamrach.

0:03:04.947,0:03:08.625
Kolor tła: fiolet.

0:03:08.945,0:03:13.260
Nie udało się. Wiecie, dlaczego?

0:03:13.420,0:03:15.279
Czy napisałam tak samo?

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

0:03:18.485,0:03:21.049
Wyglądają tak samo.

0:03:21.160,0:03:23.374
Mogłabym porównać[br]literę po literze,

0:03:23.374,0:03:25.079
aby znaleźć błąd,

0:03:25.079,0:03:29.633
wolę jednak wybrać ID z HTML,

0:03:29.679,0:03:33.810
skopiować je i wkleić.[br]Żeby było identyczne.

0:03:33.887,0:03:35.481
I… Udało się!

0:03:35.561,0:03:39.825
Nagłówek „h2” ma tło.[br]Zauważyliście błąd?

0:03:40.085,0:03:44.474
Może. Tu było małe „h”.[br]A tutaj wielkie „H”.

0:03:44.474,0:03:47.003
Przeglądarka nie uznała ich[br]za to samo.

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

0:03:50.315,0:03:52.850
Bo w ID liczy się wielkość liter.

0:03:52.930,0:03:57.143
Wszędzie musi być ten sam zapis.

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

0:04:01.753,0:04:04.645
żeby się nie zastanawiać[br]nad wielkością.

0:04:05.158,0:04:08.404
Na koniec ostrzeżenie:

0:04:08.404,0:04:10.530
ID muszą być niepowtarzalne.

0:04:10.648,0:04:13.444
Gdy dwa znaczniki na stronie[br]mają takie samo ID,

0:04:13.444,0:04:17.834
przeglądarka może zmienić oba[br]albo tylko jeden.

0:04:17.962,0:04:20.341
Nie zdawajcie się na przypadek.

0:04:20.451,0:04:23.096
Niepowtarzalne, opisowe ID!