1
00:00:00,095 --> 00:00:02,336
Na tej stronie, używając języka CSS,

2
00:00:02,336 --> 00:00:04,600
zmieniamy styl nagłówków
„h2” i akapitów.

3
00:00:04,600 --> 00:00:08,920
Wszystkie nagłówki są zielone,
a akapity - fioletowe.

4
00:00:09,537 --> 00:00:13,460
A gdybyśmy chcieli wybrać
tylko pierwszy „h2”

5
00:00:13,460 --> 00:00:16,462
lub zmienić styl
tylko w drugim akapicie?

6
00:00:16,716 --> 00:00:19,867
Musimy jakoś powiedzieć
przeglądarce,

7
00:00:19,867 --> 00:00:21,513
które elementy wybieramy,

8
00:00:21,513 --> 00:00:24,931
by nie zmieniała stylu
we wszystkich, jak teraz.

9
00:00:25,333 --> 00:00:27,945
Jeden sposób - to wybór po ID.

10
00:00:28,265 --> 00:00:30,525
Nadajemy znacznikowi
niepowtarzalny ID

11
00:00:30,525 --> 00:00:32,176
i informujemy CSS:

12
00:00:32,176 --> 00:00:36,297
„Chcę zastosować te style
tylko do elementu z tym ID,

13
00:00:36,297 --> 00:00:38,208
do żadnych innych".

14
00:00:38,455 --> 00:00:41,281
Najpierw trzeba zmodyfikować HTML,

15
00:00:41,281 --> 00:00:45,132
by dodać atrybuty ID
do wybranych znaczników.

16
00:00:45,741 --> 00:00:48,371
Zacznijmy od drugiego akapitu.

17
00:00:48,529 --> 00:00:50,896
Aby dodać atrybut ID,
umieszczamy kursor

18
00:00:50,896 --> 00:00:53,415
w pierwszym znaczniku „p”,
zaraz po „p”,

19
00:00:53,415 --> 00:00:58,357
później spacja i wpisujemy: 
id = ""

20
00:00:58,982 --> 00:01:02,667
Atrybutowi ID trzeba nadać wartość.

21
00:01:02,812 --> 00:01:04,180
Jakie ma być ID?

22
00:01:04,180 --> 00:01:06,452
Opisowe i niepowtarzalne.

23
00:01:06,508 --> 00:01:09,229
Nic innego na stronie
nie może mieć takiego ID.

24
00:01:09,479 --> 00:01:15,080
Skoro to piosenka o królikach,
napiszę rabbits-song („kroliki-piosenka”).

25
00:01:15,422 --> 00:01:19,837
W ID nie można wpisywać spacji.
Słowa rozdziela się

26
00:01:19,837 --> 00:01:22,237
za pomocą dywizów i podkreślników.

27
00:01:22,596 --> 00:01:24,717
Ja lubię dywizy.

28
00:01:25,650 --> 00:01:28,941
Akapit już można zidentyfikować.

29
00:01:29,016 --> 00:01:31,646
Dodajmy regułę CSS,
która go znajdzie.

30
00:01:31,746 --> 00:01:35,479
Wróćmy do znacznika „style”,
by zacząć drugi etap.

31
00:01:35,598 --> 00:01:38,428
Dodamy nowy wiersz,
po ostatniej regule.

32
00:01:39,478 --> 00:01:43,255
Pamiętajcie, pierwsza część
reguły CSS to selektor.

33
00:01:43,255 --> 00:01:45,840
Mówi przeglądarce, co wybrać.

34
00:01:46,098 --> 00:01:51,130
Poprzednio używaliśmy
selektorów „h2” oraz „p”,

35
00:01:51,130 --> 00:01:54,031
by wybrać wszystkie
znaczniki „h2” i „p” na stronie.

36
00:01:54,554 --> 00:01:57,203
Aby selektor wybierał tylko elementy

37
00:01:57,203 --> 00:01:58,671
z konkretnym ID,

38
00:01:58,671 --> 00:02:00,862
zaczniemy od kratki.

39
00:02:01,293 --> 00:02:04,547
Mówi to przeglądarce,
że dalej jest ID.

40
00:02:05,147 --> 00:02:08,798
Teraz wpisujemy ID:
„rabbits-song”.

41
00:02:09,603 --> 00:02:11,882
Reszta reguły
pozostaje taka sama.

42
00:02:11,934 --> 00:02:13,722
Otwieramy i zamykamy klamry,

43
00:02:13,722 --> 00:02:17,844
dodajemy właściwość,
np. kolor tła

44
00:02:18,364 --> 00:02:20,574
I już! Udało się!

45
00:02:20,873 --> 00:02:23,934
Tylko akapit z piosenką
ma żółte tło.

46
00:02:23,934 --> 00:02:26,093
Pierwszy się nie zmienił.

47
00:02:27,541 --> 00:02:30,764
Teraz zmieńmy
pierwszy nagłówek „h2”.

48
00:02:31,133 --> 00:02:32,866
Pamiętacie pierwszy krok?

49
00:02:33,515 --> 00:02:36,586
Tak, trzeba zmienić HTML,

50
00:02:36,586 --> 00:02:38,145
dodając atrybut „id”.

51
00:02:38,300 --> 00:02:40,693
Kursor do znacznika początkowego,

52
00:02:40,693 --> 00:02:43,520
spacja, wpisujemy: id=""

53
00:02:43,580 --> 00:02:46,691
a potem niepowtarzalne,
opisowe ID.

54
00:02:46,791 --> 00:02:49,944
Niech będzie:
„rabbits-info-heading”.

55
00:02:50,690 --> 00:02:54,043
Teraz krok drugi.
W znaczniku „style”

56
00:02:54,043 --> 00:02:57,429
dodajemy nowy wiersz z kratką,

57
00:02:57,429 --> 00:03:01,840
potem nasze ID, 
czyli „rabbits-info-heading”

58
00:03:01,840 --> 00:03:04,947
i właściwości w klamrach.

59
00:03:04,947 --> 00:03:08,625
Kolor tła: fiolet.

60
00:03:08,945 --> 00:03:13,260
Nie udało się. Wiecie, dlaczego?

61
00:03:13,420 --> 00:03:15,279
Czy napisałam tak samo?

62
00:03:15,359 --> 00:03:18,305
rabbits-info-Heading, 
rabbits-info-heading...

63
00:03:18,485 --> 00:03:21,049
Wyglądają tak samo.

64
00:03:21,160 --> 00:03:23,374
Mogłabym porównać
literę po literze,

65
00:03:23,374 --> 00:03:25,079
aby znaleźć błąd,

66
00:03:25,079 --> 00:03:29,633
wolę jednak wybrać ID z HTML,

67
00:03:29,679 --> 00:03:33,810
skopiować je i wkleić.
Żeby było identyczne.

68
00:03:33,887 --> 00:03:35,481
I… Udało się!

69
00:03:35,561 --> 00:03:39,825
Nagłówek „h2” ma tło.
Zauważyliście błąd?

70
00:03:40,085 --> 00:03:44,474
Może. Tu było małe „h”.
A tutaj wielkie „H”.

71
00:03:44,474 --> 00:03:47,003
Przeglądarka nie uznała ich
za to samo.

72
00:03:47,103 --> 00:03:50,231
Musi być małe „h”, jak w ID w HTML.

73
00:03:50,315 --> 00:03:52,850
Bo w ID liczy się wielkość liter.

74
00:03:52,930 --> 00:03:57,143
Wszędzie musi być ten sam zapis.

75
00:03:57,513 --> 00:04:01,753
Ja w ID używam samych małych liter,

76
00:04:01,753 --> 00:04:04,645
żeby się nie zastanawiać
nad wielkością.

77
00:04:05,158 --> 00:04:08,404
Na koniec ostrzeżenie:

78
00:04:08,404 --> 00:04:10,530
ID muszą być niepowtarzalne.

79
00:04:10,648 --> 00:04:13,444
Gdy dwa znaczniki na stronie
mają takie samo ID,

80
00:04:13,444 --> 00:04:17,834
przeglądarka może zmienić oba
albo tylko jeden.

81
00:04:17,962 --> 00:04:20,341
Nie zdawajcie się na przypadek.

82
00:04:20,451 --> 00:04:23,096
Niepowtarzalne, opisowe ID!