[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.10,0:00:02.34,Default,,0000,0000,0000,,На цій сторінці ми використали CSS,
Dialogue: 0,0:00:02.34,0:00:04.60,Default,,0000,0000,0000,,щоб оформити заголовки h2 і деякі абзаци,
Dialogue: 0,0:00:04.60,0:00:08.92,Default,,0000,0000,0000,,тому зараз заголовки зелені,\Nа абзаци фіолетові.
Dialogue: 0,0:00:09.54,0:00:13.46,Default,,0000,0000,0000,,Але що, якщо ми хочемо вибрати\Nлише перший заголовок h2
Dialogue: 0,0:00:13.46,0:00:16.46,Default,,0000,0000,0000,,або оформити лише другий абзац?
Dialogue: 0,0:00:16.72,0:00:19.87,Default,,0000,0000,0000,,Ми маємо знайти спосіб \Nсказати браузеру, який саме
Dialogue: 0,0:00:19.87,0:00:21.51,Default,,0000,0000,0000,,з елементів ми обираємо,
Dialogue: 0,0:00:21.51,0:00:24.93,Default,,0000,0000,0000,,щоб він не застосував стиль\Nдо всіх елементів, як зараз.
Dialogue: 0,0:00:25.33,0:00:27.94,Default,,0000,0000,0000,,Один зі спосіб зробити це – це вибір за ID.
Dialogue: 0,0:00:28.26,0:00:30.52,Default,,0000,0000,0000,,Ми можемо надати тегу на сторінці\Nунікальний ID,
Dialogue: 0,0:00:30.52,0:00:32.18,Default,,0000,0000,0000,,і потім сказати CSS:
Dialogue: 0,0:00:32.18,0:00:36.30,Default,,0000,0000,0000,,"Послухай, я хочу застосовувати \Nці стилі лише для елементів з таким ID,
Dialogue: 0,0:00:36.30,0:00:38.21,Default,,0000,0000,0000,,а не для всіх інших".
Dialogue: 0,0:00:38.46,0:00:41.28,Default,,0000,0000,0000,,Першим кроком,\Nбуде зміна HTML,
Dialogue: 0,0:00:41.28,0:00:45.13,Default,,0000,0000,0000,,додавши атрибути ID до тегів, які ми\Nхочемо обрати окремо.
Dialogue: 0,0:00:45.74,0:00:48.37,Default,,0000,0000,0000,,Почнімо з другого абзаца.
Dialogue: 0,0:00:48.53,0:00:50.90,Default,,0000,0000,0000,,Щоб додати атрибут ID,\Nми ставимо курсор
Dialogue: 0,0:00:50.90,0:00:53.42,Default,,0000,0000,0000,,на початок тега \Nвідразу після літери "р",
Dialogue: 0,0:00:53.42,0:00:58.36,Default,,0000,0000,0000,,потім ставимо пробіл і далі \Nпишемо id = "
Dialogue: 0,0:00:58.98,0:01:02.67,Default,,0000,0000,0000,,Тепер нам потрібно надати цьому \Nатрибуту "id" значення.
Dialogue: 0,0:01:02.81,0:01:04.18,Default,,0000,0000,0000,,Яке значення я маю надати?
Dialogue: 0,0:01:04.18,0:01:06.45,Default,,0000,0000,0000,,Воно має бути змістовним і унікальним.
Dialogue: 0,0:01:06.51,0:01:09.23,Default,,0000,0000,0000,,Ніщо інше на цій сторінці не має\Nмати такий самий ID.
Dialogue: 0,0:01:09.48,0:01:15.08,Default,,0000,0000,0000,,Оскільки це пісенька про кроликів,\Nя назву її "пісня-кроликів".
Dialogue: 0,0:01:15.42,0:01:19.84,Default,,0000,0000,0000,,В ID не можна використовувати пробілів,\Nтому якщо він містить декілька слів,
Dialogue: 0,0:01:19.84,0:01:22.24,Default,,0000,0000,0000,,ви маєте використовувати дефіс\Nабо знак підкреслення.
Dialogue: 0,0:01:22.60,0:01:24.72,Default,,0000,0000,0000,,Я справді люблю дефіси.
Dialogue: 0,0:01:25.65,0:01:28.94,Default,,0000,0000,0000,,Тепер ми вже знаємо спосіб зробити \Nцей абзац унікальним
Dialogue: 0,0:01:29.02,0:01:31.65,Default,,0000,0000,0000,,і можемо додати правило CSS,\Nяке застосуємо для нього.
Dialogue: 0,0:01:31.75,0:01:35.48,Default,,0000,0000,0000,,Повернімося до тега ,\Nце буде нашим другим кроком.
Dialogue: 0,0:01:35.60,0:01:38.43,Default,,0000,0000,0000,,Ми додамо новий рядок \Nпісля останнього правила.
Dialogue: 0,0:01:39.48,0:01:43.26,Default,,0000,0000,0000,,Запам'ятайте, перша частина\Nправила CSS – це селектор:
Dialogue: 0,0:01:43.26,0:01:45.84,Default,,0000,0000,0000,,частина, яка каже браузеру,\Nщо ж обирати.
Dialogue: 0,0:01:46.10,0:01:51.13,Default,,0000,0000,0000,,В минулих правилах ми використовували\Nселектори "h2" чи "p",
Dialogue: 0,0:01:51.13,0:01:54.03,Default,,0000,0000,0000,,щоб обрати усі теги  чи \Nна нашій сторінці.
Dialogue: 0,0:01:54.55,0:01:57.20,Default,,0000,0000,0000,,Тепер, щоб задати селектор, \Nякий вибирає елементи
Dialogue: 0,0:01:57.20,0:01:58.67,Default,,0000,0000,0000,,з конкретним ID,
Dialogue: 0,0:01:58.67,0:02:00.86,Default,,0000,0000,0000,,ми маємо на початку селектора\Nпоставити знак решітки "#".
Dialogue: 0,0:02:01.29,0:02:04.55,Default,,0000,0000,0000,,Таким чином браузер зрозуміє, що все,\Nщо буде йти далі – це ID.
Dialogue: 0,0:02:05.15,0:02:08.80,Default,,0000,0000,0000,,Тепер ми пишемо ID: пісня-кроликів.
Dialogue: 0,0:02:09.60,0:02:11.88,Default,,0000,0000,0000,,Решта правила така сама, як і раніше.
Dialogue: 0,0:02:11.93,0:02:13.72,Default,,0000,0000,0000,,Ми відкриваємо і закриваємо\Nфігурні діжки,
Dialogue: 0,0:02:13.72,0:02:17.84,Default,,0000,0000,0000,,пишемо властивість,\Nнаприклад, колір фону (англ. background color)...
Dialogue: 0,0:02:18.36,0:02:20.57,Default,,0000,0000,0000,,... і та-дам! Це спрацювало!
Dialogue: 0,0:02:20.87,0:02:23.93,Default,,0000,0000,0000,,Тільки абзац пісні має\Nжовтий колір фону,
Dialogue: 0,0:02:23.93,0:02:26.09,Default,,0000,0000,0000,,а перший абзац\Nзалишився таким самим.
Dialogue: 0,0:02:26.57,0:02:30.76,Default,,0000,0000,0000,,Повторимо це знову,\Nі вибиремо перший заголовок .
Dialogue: 0,0:02:31.13,0:02:32.87,Default,,0000,0000,0000,,Пам'ятаєте перший крок?
Dialogue: 0,0:02:33.52,0:02:36.59,Default,,0000,0000,0000,,Правильно. Ми маємо \Nзмінити код HTML,
Dialogue: 0,0:02:36.59,0:02:38.14,Default,,0000,0000,0000,,додавши атрибут "ID".
Dialogue: 0,0:02:38.30,0:02:40.69,Default,,0000,0000,0000,,Отже, ми ставимо курсор\Nна початок тега,
Dialogue: 0,0:02:40.69,0:02:43.52,Default,,0000,0000,0000,,додаємо пробіл, \Nпишемо "id ="
Dialogue: 0,0:02:43.58,0:02:46.69,Default,,0000,0000,0000,,і потім додаємо змістовний\Nі унікальний ID.
Dialogue: 0,0:02:46.79,0:02:49.94,Default,,0000,0000,0000,,"Заголовок-інформації-про-кроликів".
Dialogue: 0,0:02:50.69,0:02:54.04,Default,,0000,0000,0000,,Добре, тепер другий крок.\NВ тезі 
Dialogue: 0,0:02:54.04,0:02:57.43,Default,,0000,0000,0000,,ми додаємо новий рядок,\Nставимо знак решітки "#",
Dialogue: 0,0:02:57.43,0:03:01.84,Default,,0000,0000,0000,,потім ID,\N"Заголовок-інформації-про-кроликів",
Dialogue: 0,0:03:01.84,0:03:04.95,Default,,0000,0000,0000,,і далі пишемо властивість у \Nфігурних дужках:
Dialogue: 0,0:03:04.95,0:03:08.62,Default,,0000,0000,0000,,{колір фону: фіолетовий;}.
Dialogue: 0,0:03:08.94,0:03:13.26,Default,,0000,0000,0000,,О-о! Добре, не спрацювало.\NХммм... Ви бачите, що пішло не так?
Dialogue: 0,0:03:13.42,0:03:15.28,Default,,0000,0000,0000,,Може я... неправильно щось написала?
Dialogue: 0,0:03:15.36,0:03:18.30,Default,,0000,0000,0000,,заголовок-інформації-про-кроликів,\NЗаголовок-інформації-про-кроликів...
Dialogue: 0,0:03:18.48,0:03:21.05,Default,,0000,0000,0000,,Хмм... виглядають майже однаково.
Dialogue: 0,0:03:21.16,0:03:23.37,Default,,0000,0000,0000,,Тепер я можу порівняти їх\Nлітера за літерою,
Dialogue: 0,0:03:23.37,0:03:25.08,Default,,0000,0000,0000,,щоб з'ясувати, що пішло не так.
Dialogue: 0,0:03:25.08,0:03:29.63,Default,,0000,0000,0000,,Але що мені краще зробити, це піти вниз\Nі вибрати ID в HTML,
Dialogue: 0,0:03:29.68,0:03:33.81,Default,,0000,0000,0000,,скопіювати його і вставити його тут,\Nщоб точно знати, що він такий самий.
Dialogue: 0,0:03:33.89,0:03:35.48,Default,,0000,0000,0000,,І... вдалось!
Dialogue: 0,0:03:35.56,0:03:39.82,Default,,0000,0000,0000,,Мій заголовок  має фон.\NВи помітили, що змінилось?
Dialogue: 0,0:03:40.08,0:03:44.47,Default,,0000,0000,0000,,Можливо, побачили. Справа була літера "H".\NВона була великою,
Dialogue: 0,0:03:44.47,0:03:47.00,Default,,0000,0000,0000,,а браузер знає, що велика та\Nмаленька літери – це різні речі.
Dialogue: 0,0:03:47.10,0:03:50.23,Default,,0000,0000,0000,,Вона мала бути маленькою,\Nщоб відповідати HTML.
Dialogue: 0,0:03:50.32,0:03:52.85,Default,,0000,0000,0000,,Це тому, що для ID розмір літер\Nмає значення.
Dialogue: 0,0:03:52.93,0:03:57.14,Default,,0000,0000,0000,,Тому ви маєте писати їх \Nвсюди однаково.
Dialogue: 0,0:03:57.51,0:04:01.75,Default,,0000,0000,0000,,Як на мене, найкраще просто завжди\Nвикористовувати маленькі літери в ID,
Dialogue: 0,0:04:01.75,0:04:04.64,Default,,0000,0000,0000,,тоді не доводиться згадувати,\Nде і які літери я використовувала.\N
Dialogue: 0,0:04:05.16,0:04:08.40,Default,,0000,0000,0000,,Гаразд, дозвольте ще додати\Nодне попередження:
Dialogue: 0,0:04:08.40,0:04:10.53,Default,,0000,0000,0000,,ID мусить бути унікальним!
Dialogue: 0,0:04:10.65,0:04:13.44,Default,,0000,0000,0000,,Якщо ви матимете два теги на сторінці\Nз одинаковим ID,
Dialogue: 0,0:04:13.44,0:04:17.84,Default,,0000,0000,0000,,браузер, можливо, оформить обидва,\Nа, може, лише один.
Dialogue: 0,0:04:17.96,0:04:20.34,Default,,0000,0000,0000,,А ви ж не хочете, щоб це вирішувалось\Nдолею випадку.
Dialogue: 0,0:04:20.34,0:04:24.34,Default,,0000,0000,0000,,Гарні, унікальні, змістовні ID.
Dialogue: 0,0:04:24.46,0:04:28.92,Default,,0000,0000,0000,,Переклад на українську: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"