1
00:00:00,095 --> 00:00:02,336
На цій сторінці ми використали CSS,

2
00:00:02,336 --> 00:00:04,600
щоб оформити заголовки h2 і деякі абзаци,

3
00:00:04,600 --> 00:00:08,920
тому зараз заголовки зелені,
а абзаци фіолетові.

4
00:00:09,537 --> 00:00:13,460
Але що, якщо ми хочемо вибрати
лише перший заголовок h2

5
00:00:13,460 --> 00:00:16,462
або оформити лише другий абзац?

6
00:00:16,716 --> 00:00:19,867
Ми маємо знайти спосіб 
сказати браузеру, який саме

7
00:00:19,867 --> 00:00:21,513
з елементів ми обираємо,

8
00:00:21,513 --> 00:00:24,931
щоб він не застосував стиль
до всіх елементів, як зараз.

9
00:00:25,333 --> 00:00:27,945
Один зі спосіб зробити це – це вибір за ID.

10
00:00:28,265 --> 00:00:30,525
Ми можемо надати тегу на сторінці
унікальний ID,

11
00:00:30,525 --> 00:00:32,176
і потім сказати CSS:

12
00:00:32,176 --> 00:00:36,297
"Послухай, я хочу застосовувати 
ці стилі лише для елементів з таким ID,

13
00:00:36,297 --> 00:00:38,208
а не для всіх інших".

14
00:00:38,455 --> 00:00:41,281
Першим кроком,
буде зміна HTML,

15
00:00:41,281 --> 00:00:45,132
додавши атрибути ID до тегів, які ми
хочемо обрати окремо.

16
00:00:45,741 --> 00:00:48,371
Почнімо з другого абзаца.

17
00:00:48,529 --> 00:00:50,896
Щоб додати атрибут ID,
ми ставимо курсор

18
00:00:50,896 --> 00:00:53,415
на початок тега 
відразу після літери "р",

19
00:00:53,415 --> 00:00:58,357
потім ставимо пробіл і далі 
пишемо id = "

20
00:00:58,982 --> 00:01:02,667
Тепер нам потрібно надати цьому 
атрибуту "id" значення.

21
00:01:02,812 --> 00:01:04,180
Яке значення я маю надати?

22
00:01:04,180 --> 00:01:06,452
Воно має бути змістовним і унікальним.

23
00:01:06,508 --> 00:01:09,229
Ніщо інше на цій сторінці не має
мати такий самий ID.

24
00:01:09,479 --> 00:01:15,080
Оскільки це пісенька про кроликів,
я назву її "пісня-кроликів".

25
00:01:15,422 --> 00:01:19,837
В ID не можна використовувати пробілів,
тому якщо він містить декілька слів,

26
00:01:19,837 --> 00:01:22,237
ви маєте використовувати дефіс
або знак підкреслення.

27
00:01:22,596 --> 00:01:24,717
Я справді люблю дефіси.

28
00:01:25,650 --> 00:01:28,941
Тепер ми вже знаємо спосіб зробити 
цей абзац унікальним

29
00:01:29,016 --> 00:01:31,646
і можемо додати правило CSS,
яке застосуємо для нього.

30
00:01:31,746 --> 00:01:35,479
Повернімося до тега ,
це буде нашим другим кроком.

31
00:01:35,598 --> 00:01:38,428
Ми додамо новий рядок 
після останнього правила.

32
00:01:39,478 --> 00:01:43,255
Запам'ятайте, перша частина
правила CSS – це селектор:

33
00:01:43,255 --> 00:01:45,840
частина, яка каже браузеру,
що ж обирати.

34
00:01:46,098 --> 00:01:51,130
В минулих правилах ми використовували
селектори "h2" чи "p",

35
00:01:51,130 --> 00:01:54,031
щоб обрати усі теги  чи 
на нашій сторінці.

36
00:01:54,554 --> 00:01:57,203
Тепер, щоб задати селектор, 
який вибирає елементи

37
00:01:57,203 --> 00:01:58,671
з конкретним ID,

38
00:01:58,671 --> 00:02:00,862
ми маємо на початку селектора
поставити знак решітки "#".

39
00:02:01,293 --> 00:02:04,547
Таким чином браузер зрозуміє, що все,
що буде йти далі – це ID.

40
00:02:05,147 --> 00:02:08,798
Тепер ми пишемо ID: пісня-кроликів.

41
00:02:09,603 --> 00:02:11,882
Решта правила така сама, як і раніше.

42
00:02:11,934 --> 00:02:13,722
Ми відкриваємо і закриваємо
фігурні діжки,

43
00:02:13,722 --> 00:02:17,844
пишемо властивість,
наприклад, колір фону (англ. background color)...

44
00:02:18,364 --> 00:02:20,574
... і та-дам! Це спрацювало!

45
00:02:20,873 --> 00:02:23,934
Тільки абзац пісні має
жовтий колір фону,

46
00:02:23,934 --> 00:02:26,093
а перший абзац
залишився таким самим.

47
00:02:26,574 --> 00:02:30,764
Повторимо це знову,
і вибиремо перший заголовок .

48
00:02:31,133 --> 00:02:32,866
Пам'ятаєте перший крок?

49
00:02:33,515 --> 00:02:36,586
Правильно. Ми маємо 
змінити код HTML,

50
00:02:36,586 --> 00:02:38,145
додавши атрибут "ID".

51
00:02:38,300 --> 00:02:40,693
Отже, ми ставимо курсор
на початок тега,

52
00:02:40,693 --> 00:02:43,520
додаємо пробіл, 
пишемо "id ="

53
00:02:43,580 --> 00:02:46,691
і потім додаємо змістовний
і унікальний ID.

54
00:02:46,791 --> 00:02:49,944
"Заголовок-інформації-про-кроликів".

55
00:02:50,690 --> 00:02:54,043
Добре, тепер другий крок.
В тезі 

56
00:02:54,043 --> 00:02:57,429
ми додаємо новий рядок,
ставимо знак решітки "#",

57
00:02:57,429 --> 00:03:01,840
потім ID,
"Заголовок-інформації-про-кроликів",

58
00:03:01,840 --> 00:03:04,947
і далі пишемо властивість у 
фігурних дужках:

59
00:03:04,947 --> 00:03:08,625
{колір фону: фіолетовий;}.

60
00:03:08,945 --> 00:03:13,260
О-о! Добре, не спрацювало.
Хммм... Ви бачите, що пішло не так?

61
00:03:13,420 --> 00:03:15,279
Може я... неправильно щось написала?

62
00:03:15,359 --> 00:03:18,305
заголовок-інформації-про-кроликів,
Заголовок-інформації-про-кроликів...

63
00:03:18,485 --> 00:03:21,049
Хмм... виглядають майже однаково.

64
00:03:21,160 --> 00:03:23,374
Тепер я можу порівняти їх
літера за літерою,

65
00:03:23,374 --> 00:03:25,079
щоб з'ясувати, що пішло не так.

66
00:03:25,079 --> 00:03:29,633
Але що мені краще зробити, це піти вниз
і вибрати ID в HTML,

67
00:03:29,679 --> 00:03:33,810
скопіювати його і вставити його тут,
щоб точно знати, що він такий самий.

68
00:03:33,887 --> 00:03:35,481
І... вдалось!

69
00:03:35,561 --> 00:03:39,825
Мій заголовок  має фон.
Ви помітили, що змінилось?

70
00:03:40,085 --> 00:03:44,474
Можливо, побачили. Справа була літера "H".
Вона була великою,

71
00:03:44,474 --> 00:03:47,003
а браузер знає, що велика та
маленька літери – це різні речі.

72
00:03:47,103 --> 00:03:50,231
Вона мала бути маленькою,
щоб відповідати HTML.

73
00:03:50,315 --> 00:03:52,850
Це тому, що для ID розмір літер
має значення.

74
00:03:52,930 --> 00:03:57,143
Тому ви маєте писати їх 
всюди однаково.

75
00:03:57,513 --> 00:04:01,753
Як на мене, найкраще просто завжди
використовувати маленькі літери в ID,

76
00:04:01,753 --> 00:04:04,645
тоді не доводиться згадувати,
де і які літери я використовувала.


77
00:04:05,158 --> 00:04:08,404
Гаразд, дозвольте ще додати
одне попередження:

78
00:04:08,404 --> 00:04:10,530
ID мусить бути унікальним!

79
00:04:10,648 --> 00:04:13,444
Якщо ви матимете два теги на сторінці
з одинаковим ID,

80
00:04:13,444 --> 00:04:17,835
браузер, можливо, оформить обидва,
а, може, лише один.

81
00:04:17,962 --> 00:04:20,341
А ви ж не хочете, щоб це вирішувалось
долею випадку.

82
00:04:20,341 --> 00:04:24,341
Гарні, унікальні, змістовні ID.

83
00:04:24,456 --> 00:04:28,916
Переклад на українську: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"