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

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

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

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

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

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

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

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

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

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

0:00:30.525,0:00:32.176
і потім сказати CSS:

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

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

0:00:38.455,0:00:41.281
Першим кроком,[br]буде зміна HTML,

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

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

0:00:48.529,0:00:50.896
Щоб додати атрибут ID,[br]ми ставимо курсор

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

0:00:53.415,0:00:58.357
потім ставимо пробіл і далі [br]пишемо id = "

0:00:58.982,0:01:02.667
Тепер нам потрібно надати цьому [br]атрибуту "id" значення.

0:01:02.812,0:01:04.180
Яке значення я маю надати?

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

0:01:06.508,0:01:09.229
Ніщо інше на цій сторінці не має[br]мати такий самий ID.

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

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

0:01:19.837,0:01:22.237
ви маєте використовувати дефіс[br]або знак підкреслення.

0:01:22.596,0:01:24.717
Я справді люблю дефіси.

0:01:25.650,0:01:28.941
Тепер ми вже знаємо спосіб зробити [br]цей абзац унікальним

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

0:01:31.746,0:01:35.479
Повернімося до тега ,[br]це буде нашим другим кроком.

0:01:35.598,0:01:38.428
Ми додамо новий рядок [br]після останнього правила.

0:01:39.478,0:01:43.255
Запам'ятайте, перша частина[br]правила CSS – це селектор:

0:01:43.255,0:01:45.840
частина, яка каже браузеру,[br]що ж обирати.

0:01:46.098,0:01:51.130
В минулих правилах ми використовували[br]селектори "h2" чи "p",

0:01:51.130,0:01:54.031
щоб обрати усі теги  чи [br]на нашій сторінці.

0:01:54.554,0:01:57.203
Тепер, щоб задати селектор, [br]який вибирає елементи

0:01:57.203,0:01:58.671
з конкретним ID,

0:01:58.671,0:02:00.862
ми маємо на початку селектора[br]поставити знак решітки "#".

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

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

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

0:02:11.934,0:02:13.722
Ми відкриваємо і закриваємо[br]фігурні діжки,

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

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

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

0:02:23.934,0:02:26.093
а перший абзац[br]залишився таким самим.

0:02:26.574,0:02:30.764
Повторимо це знову,[br]і вибиремо перший заголовок .

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

0:02:33.515,0:02:36.586
Правильно. Ми маємо [br]змінити код HTML,

0:02:36.586,0:02:38.145
додавши атрибут "ID".

0:02:38.300,0:02:40.693
Отже, ми ставимо курсор[br]на початок тега,

0:02:40.693,0:02:43.520
додаємо пробіл, [br]пишемо "id ="

0:02:43.580,0:02:46.691
і потім додаємо змістовний[br]і унікальний ID.

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

0:02:50.690,0:02:54.043
Добре, тепер другий крок.[br]В тезі

0:02:54.043,0:02:57.429
ми додаємо новий рядок,[br]ставимо знак решітки "#",

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

0:03:01.840,0:03:04.947
і далі пишемо властивість у [br]фігурних дужках:

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

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

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

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

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

0:03:21.160,0:03:23.374
Тепер я можу порівняти їх[br]літера за літерою,

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

0:03:25.079,0:03:29.633
Але що мені краще зробити, це піти вниз[br]і вибрати ID в HTML,

0:03:29.679,0:03:33.810
скопіювати його і вставити його тут,[br]щоб точно знати, що він такий самий.

0:03:33.887,0:03:35.481
І... вдалось!

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

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

0:03:44.474,0:03:47.003
а браузер знає, що велика та[br]маленька літери – це різні речі.

0:03:47.103,0:03:50.231
Вона мала бути маленькою,[br]щоб відповідати HTML.

0:03:50.315,0:03:52.850
Це тому, що для ID розмір літер[br]має значення.

0:03:52.930,0:03:57.143
Тому ви маєте писати їх [br]всюди однаково.

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

0:04:01.753,0:04:04.645
тоді не доводиться згадувати,[br]де і які літери я використовувала.[br]

0:04:05.158,0:04:08.404
Гаразд, дозвольте ще додати[br]одне попередження:

0:04:08.404,0:04:10.530
ID мусить бути унікальним!

0:04:10.648,0:04:13.444
Якщо ви матимете два теги на сторінці[br]з одинаковим ID,

0:04:13.444,0:04:17.835
браузер, можливо, оформить обидва,[br]а, може, лише один.

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

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

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