WEBVTT

00:00:00.095 --> 00:00:02.336
На цій сторінці ми використали CSS,

00:00:02.336 --> 00:00:04.600
щоб оформити заголовки h2 і деякі абзаци,

00:00:04.600 --> 00:00:08.920
тому зараз заголовки зелені,
а абзаци фіолетові.

00:00:09.537 --> 00:00:13.460
Але що, якщо ми хочемо вибрати
лише перший заголовок h2

00:00:13.460 --> 00:00:16.462
або оформити лише другий абзац?

00:00:16.716 --> 00:00:19.867
Ми маємо знайти спосіб 
сказати браузеру, який саме

00:00:19.867 --> 00:00:21.513
з елементів ми обираємо,

00:00:21.513 --> 00:00:24.931
щоб він не застосував стиль
до всіх елементів, як зараз.

00:00:25.333 --> 00:00:27.945
Один зі спосіб зробити це – це вибір за ID.

00:00:28.265 --> 00:00:30.525
Ми можемо надати тегу на сторінці
унікальний ID,

00:00:30.525 --> 00:00:32.176
і потім сказати CSS:

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

00:00:36.297 --> 00:00:38.208
а не для всіх інших".

00:00:38.455 --> 00:00:41.281
Першим кроком,
буде зміна HTML,

00:00:41.281 --> 00:00:45.132
додавши атрибути ID до тегів, які ми
хочемо обрати окремо.

00:00:45.741 --> 00:00:48.371
Почнімо з другого абзаца.

00:00:48.529 --> 00:00:50.896
Щоб додати атрибут ID,
ми ставимо курсор

00:00:50.896 --> 00:00:53.415
на початок тега 
відразу після літери "р",

00:00:53.415 --> 00:00:58.357
потім ставимо пробіл і далі 
пишемо id = "

00:00:58.982 --> 00:01:02.667
Тепер нам потрібно надати цьому 
атрибуту "id" значення.

00:01:02.812 --> 00:01:04.180
Яке значення я маю надати?

00:01:04.180 --> 00:01:06.452
Воно має бути змістовним і унікальним.

00:01:06.508 --> 00:01:09.229
Ніщо інше на цій сторінці не має
мати такий самий ID.

00:01:09.479 --> 00:01:15.080
Оскільки це пісенька про кроликів,
я назву її "пісня-кроликів".

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

00:01:19.837 --> 00:01:22.237
ви маєте використовувати дефіс
або знак підкреслення.

00:01:22.596 --> 00:01:24.717
Я справді люблю дефіси.

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

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

00:01:31.746 --> 00:01:35.479
Повернімося до тега ,
це буде нашим другим кроком.

00:01:35.598 --> 00:01:38.428
Ми додамо новий рядок 
після останнього правила.

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

00:01:43.255 --> 00:01:45.840
частина, яка каже браузеру,
що ж обирати.

00:01:46.098 --> 00:01:51.130
В минулих правилах ми використовували
селектори "h2" чи "p",

00:01:51.130 --> 00:01:54.031
щоб обрати усі теги  чи 
на нашій сторінці.

00:01:54.554 --> 00:01:57.203
Тепер, щоб задати селектор, 
який вибирає елементи

00:01:57.203 --> 00:01:58.671
з конкретним ID,

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

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

00:02:05.147 --> 00:02:08.798
Тепер ми пишемо ID: пісня-кроликів.

00:02:09.603 --> 00:02:11.882
Решта правила така сама, як і раніше.

00:02:11.934 --> 00:02:13.722
Ми відкриваємо і закриваємо
фігурні діжки,

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

00:02:18.364 --> 00:02:20.574
... і та-дам! Це спрацювало!

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

00:02:23.934 --> 00:02:26.093
а перший абзац
залишився таким самим.

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

00:02:31.133 --> 00:02:32.866
Пам'ятаєте перший крок?

00:02:33.515 --> 00:02:36.586
Правильно. Ми маємо 
змінити код HTML,

00:02:36.586 --> 00:02:38.145
додавши атрибут "ID".

00:02:38.300 --> 00:02:40.693
Отже, ми ставимо курсор
на початок тега,

00:02:40.693 --> 00:02:43.520
додаємо пробіл, 
пишемо "id ="

00:02:43.580 --> 00:02:46.691
і потім додаємо змістовний
і унікальний ID.

00:02:46.791 --> 00:02:49.944
"Заголовок-інформації-про-кроликів".

00:02:50.690 --> 00:02:54.043
Добре, тепер другий крок.
В тезі 

00:02:54.043 --> 00:02:57.429
ми додаємо новий рядок,
ставимо знак решітки "#",

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

00:03:01.840 --> 00:03:04.947
і далі пишемо властивість у 
фігурних дужках:

00:03:04.947 --> 00:03:08.625
{колір фону: фіолетовий;}.

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

00:03:13.420 --> 00:03:15.279
Може я... неправильно щось написала?

00:03:15.359 --> 00:03:18.305
заголовок-інформації-про-кроликів,
Заголовок-інформації-про-кроликів...

00:03:18.485 --> 00:03:21.049
Хмм... виглядають майже однаково.

00:03:21.160 --> 00:03:23.374
Тепер я можу порівняти їх
літера за літерою,

00:03:23.374 --> 00:03:25.079
щоб з'ясувати, що пішло не так.

00:03:25.079 --> 00:03:29.633
Але що мені краще зробити, це піти вниз
і вибрати ID в HTML,

00:03:29.679 --> 00:03:33.810
скопіювати його і вставити його тут,
щоб точно знати, що він такий самий.

00:03:33.887 --> 00:03:35.481
І... вдалось!

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

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

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

00:03:47.103 --> 00:03:50.231
Вона мала бути маленькою,
щоб відповідати HTML.

00:03:50.315 --> 00:03:52.850
Це тому, що для ID розмір літер
має значення.

00:03:52.930 --> 00:03:57.143
Тому ви маєте писати їх 
всюди однаково.

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

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


00:04:05.158 --> 00:04:08.404
Гаразд, дозвольте ще додати
одне попередження:

00:04:08.404 --> 00:04:10.530
ID мусить бути унікальним!

00:04:10.648 --> 00:04:13.444
Якщо ви матимете два теги на сторінці
з одинаковим ID,

00:04:13.444 --> 00:04:17.835
браузер, можливо, оформить обидва,
а, може, лише один.

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

00:04:20.341 --> 00:04:24.341
Гарні, унікальні, змістовні ID.

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