[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.33,0:00:02.08,Default,,0000,0000,0000,,Погляньмо на нашу сторінку.
Dialogue: 0,0:00:02.28,0:00:04.54,Default,,0000,0000,0000,,Вона має заголовки,
Dialogue: 0,0:00:04.54,0:00:07.58,Default,,0000,0000,0000,,абзац з описом кроликів,
Dialogue: 0,0:00:07.58,0:00:10.59,Default,,0000,0000,0000,,а також, багато абзаців
Dialogue: 0,0:00:10.59,0:00:13.42,Default,,0000,0000,0000,,зі словами моєї улюбленої \Nпісні про кроликів.
Dialogue: 0,0:00:13.54,0:00:17.55,Default,,0000,0000,0000,,Минулого разу ми оформили перший\Nабзац пісні, використавши 'id'.
Dialogue: 0,0:00:17.86,0:00:21.02,Default,,0000,0000,0000,,Але зараз, оскільки я маю декілька\Nабзаців зі словами,\N
Dialogue: 0,0:00:21.02,0:00:24.08,Default,,0000,0000,0000,,я хочу, щоб вони всі мали\Nфон жовтого кольору.
Dialogue: 0,0:00:24.61,0:00:27.69,Default,,0000,0000,0000,,Як ми можемо це зробити, застосувавши\Nте, що ми вже знаємо?
Dialogue: 0,0:00:28.22,0:00:30.37,Default,,0000,0000,0000,,Спочатку ми вивчили,
Dialogue: 0,0:00:30.37,0:00:33.00,Default,,0000,0000,0000,,як вибрати всі теги певного типу,
Dialogue: 0,0:00:33.00,0:00:34.66,Default,,0000,0000,0000,,так як було у випадку з селектором 'р'.
Dialogue: 0,0:00:34.89,0:00:39.12,Default,,0000,0000,0000,,Але так ми зафарбували усі абзаци,\Nа не лише абзаци з піснею.
Dialogue: 0,0:00:39.23,0:00:41.29,Default,,0000,0000,0000,,Нам потрібно щось конкретніше.
Dialogue: 0,0:00:41.51,0:00:44.90,Default,,0000,0000,0000,,Потім ми вивчили, як вибрати теги\Nз певним 'id',
Dialogue: 0,0:00:44.90,0:00:48.14,Default,,0000,0000,0000,,так як було у випадку з вибором абзацу\Nз 'id' "пісня-кроликів".
Dialogue: 0,0:00:48.37,0:00:50.92,Default,,0000,0000,0000,,Але таким чином ми вибрали\Nлише перший абзац.
Dialogue: 0,0:00:51.12,0:00:53.72,Default,,0000,0000,0000,,Ми не можемо додати цей 'id' \Nдо інших абзаців,
Dialogue: 0,0:00:53.72,0:00:57.66,Default,,0000,0000,0000,,тому що нам не дозволено використовувати\Nоднаковий 'id' для декількох тегів.
Dialogue: 0,0:00:57.87,0:01:00.20,Default,,0000,0000,0000,,Якщо б ми захотіли вибрати\Nінші абзаци,
Dialogue: 0,0:01:00.20,0:01:02.88,Default,,0000,0000,0000,,ми б мали дати кожному з них\Nновий 'id',
Dialogue: 0,0:01:02.88,0:01:05.72,Default,,0000,0000,0000,,наприклад, "слова-пісні2" і\N"слова-пісні3",
Dialogue: 0,0:01:05.72,0:01:07.36,Default,,0000,0000,0000,,тому що кожний 'id' мусить \Nбути унікальним.
Dialogue: 0,0:01:07.36,0:01:09.81,Default,,0000,0000,0000,,І потім ми б мали додати \Nправила для кожного з них.
Dialogue: 0,0:01:09.81,0:01:12.40,Default,,0000,0000,0000,,Ми можемо це зробити.\NАле, оу, потрібно багато попрацювати.
Dialogue: 0,0:01:12.40,0:01:14.69,Default,,0000,0000,0000,,І щоразу, як ми додаватимемо\Nновий куплет пісні,
Dialogue: 0,0:01:14.69,0:01:17.28,Default,,0000,0000,0000,,ми мусимо не забути додати\Nще один 'id' до HTML коду
Dialogue: 0,0:01:17.28,0:01:19.02,Default,,0000,0000,0000,,і ще один 'id' до правил CSS.
Dialogue: 0,0:01:19.02,0:01:22.83,Default,,0000,0000,0000,,І якщо ми додамо сотні куплетів,\Nце буде просто виснажливо!
Dialogue: 0,0:01:22.98,0:01:24.32,Default,,0000,0000,0000,,Але знаєте що?
Dialogue: 0,0:01:24.49,0:01:27.38,Default,,0000,0000,0000,,Існує кращий спосіб,\Nі він називається "класи" ("classes").
Dialogue: 0,0:01:27.60,0:01:29.01,Default,,0000,0000,0000,,В основному клас — це
Dialogue: 0,0:01:29.01,0:01:32.07,Default,,0000,0000,0000,,спосіб об'єднати певні елементи\Nв групу.
Dialogue: 0,0:01:32.16,0:01:35.15,Default,,0000,0000,0000,,І ви можете об'єднати стільки \Nелементів, скільки захочете.
Dialogue: 0,0:01:35.35,0:01:39.93,Default,,0000,0000,0000,,Щоб додати клас, ми маємо додати\Nатрибут 'class', так як це було у випадку з 'id'.
Dialogue: 0,0:01:40.36,0:01:44.70,Default,,0000,0000,0000,,Спочатку я видалю цей ID,\Nоскільки я збираюсь його замінити.
Dialogue: 0,0:01:44.70,0:01:47.92,Default,,0000,0000,0000,,Потім я ставлю курсор \Nна початок тега "р".
Dialogue: 0,0:01:47.92,0:01:51.68,Default,,0000,0000,0000,,Я додаю пробіл і пишу\Nclass = "
Dialogue: 0,0:01:53.18,0:01:55.33,Default,,0000,0000,0000,,Тепер нам потрібно придумати\Nім'я класу.
Dialogue: 0,0:01:55.33,0:01:56.79,Default,,0000,0000,0000,,Якесь змістовне.
Dialogue: 0,0:01:56.93,0:01:59.29,Default,,0000,0000,0000,,Назвімо його \N"слова-пісні".
Dialogue: 0,0:01:59.66,0:02:01.45,Default,,0000,0000,0000,,Я це написала тут.
Dialogue: 0,0:02:01.66,0:02:04.34,Default,,0000,0000,0000,,Які інші елементи має містити цей клас?
Dialogue: 0,0:02:04.42,0:02:06.42,Default,,0000,0000,0000,,Усі інші абзаци пісні.
Dialogue: 0,0:02:06.51,0:02:09.15,Default,,0000,0000,0000,,Тому ми просто підемо \Nвниз по сторінці
Dialogue: 0,0:02:09.15,0:02:12.78,Default,,0000,0000,0000,,і додамо атрибут до кожного\Nабзацу класу.
Dialogue: 0,0:02:13.06,0:02:14.54,Default,,0000,0000,0000,,("слова-пісні").
Dialogue: 0,0:02:14.84,0:02:18.00,Default,,0000,0000,0000,,Чудово.\NТепер ми можемо додати правило CSS.
Dialogue: 0,0:02:18.22,0:02:20.54,Default,,0000,0000,0000,,Тому ми піднімаємось до тега 
Dialogue: 0,0:02:20.54,0:02:24.57,Default,,0000,0000,0000,,і видаляємо селектор 'id',\Nякий ми вказали раніше,
Dialogue: 0,0:02:24.57,0:02:25.77,Default,,0000,0000,0000,,оскільки ми його хочемо замінити.
Dialogue: 0,0:02:26.16,0:02:28.59,Default,,0000,0000,0000,,І зараз ми маємо написати селектор класу.
Dialogue: 0,0:02:28.93,0:02:34.04,Default,,0000,0000,0000,,Щоб запустити селектор класу,\Nми використаємо крапку.
Dialogue: 0,0:02:34.43,0:02:39.03,Default,,0000,0000,0000,,Потім напишемо ім'я класу: "слова-пісні",
Dialogue: 0,0:02:39.03,0:02:46.42,Default,,0000,0000,0000,,і далі, як завжди, фігурні дужки,\Nвластивість, двокрапка, значення.
Dialogue: 0,0:02:46.63,0:02:47.58,Default,,0000,0000,0000,,Та-дам!
Dialogue: 0,0:02:47.82,0:02:51.01,Default,,0000,0000,0000,,Вся пісня тепер має жовтий фон.
Dialogue: 0,0:02:51.34,0:02:55.14,Default,,0000,0000,0000,,Що станеться, якщо ми збільшимо \Nлітеру "s" тут?
Dialogue: 0,0:02:55.24,0:02:56.40,Default,,0000,0000,0000,,Не працює.
Dialogue: 0,0:02:56.49,0:02:58.95,Default,,0000,0000,0000,,Тому що для імен класів\Nрозмір літер має значення.\N
Dialogue: 0,0:02:58.97,0:03:01.77,Default,,0000,0000,0000,,Важливо, які літери є великі, \Nа які маленькі,
Dialogue: 0,0:03:01.77,0:03:03.56,Default,,0000,0000,0000,,так само як і для 'id'.
Dialogue: 0,0:03:04.32,0:03:08.30,Default,,0000,0000,0000,,Що буде, якщо ми використаємо\Nрешітку замість крапки?
Dialogue: 0,0:03:08.54,0:03:09.67,Default,,0000,0000,0000,,Не працює.
Dialogue: 0,0:03:09.77,0:03:13.08,Default,,0000,0000,0000,,Тому що так браузер думає, \Nщо "слова-пісні" — це 'id',
Dialogue: 0,0:03:13.08,0:03:16.41,Default,,0000,0000,0000,,і коли він не може знайти такого\N'id', як "слова-пісні",
Dialogue: 0,0:03:16.41,0:03:17.58,Default,,0000,0000,0000,,він здається.
Dialogue: 0,0:03:18.10,0:03:24.51,Default,,0000,0000,0000,,Що станеться, якщо ми додамо пробіли \Nдо імені класу?
Dialogue: 0,0:03:25.25,0:03:27.48,Default,,0000,0000,0000,,Це також не працюватиме,\N
Dialogue: 0,0:03:27.48,0:03:29.100,Default,,0000,0000,0000,,тому що імена класів\Nне можуть містити пробілів.
Dialogue: 0,0:03:30.19,0:03:31.65,Default,,0000,0000,0000,,І як ми вивчимо пізніше,
Dialogue: 0,0:03:31.65,0:03:34.97,Default,,0000,0000,0000,,пробіли означають дещо дуже\Nособливе у мові CSS.
Dialogue: 0,0:03:35.87,0:03:38.78,Default,,0000,0000,0000,,Тому ми зробимо все, як було.
Dialogue: 0,0:03:39.52,0:03:41.11,Default,,0000,0000,0000,,Отже, повторимо ще раз:
Dialogue: 0,0:03:41.11,0:03:43.39,Default,,0000,0000,0000,,Коли ми хочемо додати клас,
Dialogue: 0,0:03:43.39,0:03:45.59,Default,,0000,0000,0000,,ми йому придумуємо ім'я,
Dialogue: 0,0:03:45.59,0:03:49.00,Default,,0000,0000,0000,,додаємо його до атрибута класу в HTML.
Dialogue: 0,0:03:49.25,0:03:51.32,Default,,0000,0000,0000,,Потім створюємо правило стилю,
Dialogue: 0,0:03:51.32,0:03:54.69,Default,,0000,0000,0000,,поставивши крапку\Nі написавши ім'я класу.
Dialogue: 0,0:03:55.22,0:03:58.39,Default,,0000,0000,0000,,Тепер ваш СSS може бути класним!
Dialogue: 0,0:03:58.39,0:04:02.47,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"