[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.53,0:00:04.19,Default,,0000,0000,0000,,Досі нам вдавалось зробити дуже багато\Nзавдяки селекторами, які ми бачили в CSS:
Dialogue: 0,0:00:04.19,0:00:08.01,Default,,0000,0000,0000,,вибір за назвою тега, за ID\Nі за іменем класу.
Dialogue: 0,0:00:08.29,0:00:11.03,Default,,0000,0000,0000,,Пригадаймо собі всен це швиденько\Nна цій сторінці.
Dialogue: 0,0:00:11.26,0:00:13.66,Default,,0000,0000,0000,,на цій сторінці — все про пончики.
Dialogue: 0,0:00:13.79,0:00:15.96,Default,,0000,0000,0000,,Ця сторінка має заголовок, абзаци,
Dialogue: 0,0:00:15.96,0:00:18.94,Default,,0000,0000,0000,,кілька з яких є короткими \Nоднорядковими фактами.
Dialogue: 0,0:00:19.24,0:00:23.14,Default,,0000,0000,0000,,CSS починається з правила,\Nщо обирає всі теги  на сторінці
Dialogue: 0,0:00:23.14,0:00:25.61,Default,,0000,0000,0000,,і надає їм шрифт "sans-serif".
Dialogue: 0,0:00:26.07,0:00:29.24,Default,,0000,0000,0000,,Я зміню його на "monospace" (шрифт\Nз фіксованою шириною),
Dialogue: 0,0:00:29.24,0:00:30.77,Default,,0000,0000,0000,,щоб ви могли побачити, де діє\Nцей селектор.
Dialogue: 0,0:00:30.78,0:00:31.81,Default,,0000,0000,0000,,Бачите?
Dialogue: 0,0:00:34.10,0:00:38.21,Default,,0000,0000,0000,,Наступне правило обирає усі елементи\Nз ID "donut-header" (пончики-заголовок).
Dialogue: 0,0:00:38.21,0:00:41.91,Default,,0000,0000,0000,,І ми знаємо, що це ID, оскільки\Nвін починається з решітки.
Dialogue: 0,0:00:42.03,0:00:43.76,Default,,0000,0000,0000,,Оскільки цей ID доволі змістовний,
Dialogue: 0,0:00:43.76,0:00:46.69,Default,,0000,0000,0000,,мені здається, що він обирає\Nвеликий заголовок зверху
Dialogue: 0,0:00:46.69,0:00:47.75,Default,,0000,0000,0000,,і змінює його шрифт.
Dialogue: 0,0:00:47.97,0:00:51.42,Default,,0000,0000,0000,,Але я просто прокручу сторінку вниз\Nі переконаюсь, що тег  має ID.
Dialogue: 0,0:00:51.45,0:00:53.18,Default,,0000,0000,0000,,Так, він його має.
Dialogue: 0,0:00:53.39,0:00:56.79,Default,,0000,0000,0000,,Останнє правило обирає усі елементи,\Nякі мають клас "fact" (факт).
Dialogue: 0,0:00:56.90,0:01:00.38,Default,,0000,0000,0000,,Ми знаємо, що це ім'я класу,\Nоскільки селектор починається з крапки.
Dialogue: 0,0:01:00.49,0:01:02.96,Default,,0000,0000,0000,,Щоб визначити, які елементи\Nналежать до цього класу,
Dialogue: 0,0:01:02.96,0:01:05.23,Default,,0000,0000,0000,,я можу або подивитись,\Nщо робить це правило —
Dialogue: 0,0:01:05.23,0:01:07.83,Default,,0000,0000,0000,,додає верхню та нижню межі\Nі певні відступи,
Dialogue: 0,0:01:07.83,0:01:10.46,Default,,0000,0000,0000,,або я можу проглянути код HTML\Nі знайти там ім'я класу.
Dialogue: 0,0:01:10.62,0:01:13.15,Default,,0000,0000,0000,,Я бачу ім'я класу в цьому абзаці
Dialogue: 0,0:01:13.15,0:01:14.30,Default,,0000,0000,0000,,і в цьому абзаці —
Dialogue: 0,0:01:14.30,0:01:16.46,Default,,0000,0000,0000,,два абзаци, що містять\Nоднорядкові факти,
Dialogue: 0,0:01:16.46,0:01:18.32,Default,,0000,0000,0000,,і ось чому вони мають межі.
Dialogue: 0,0:01:18.45,0:01:19.78,Default,,0000,0000,0000,,Використання класів є зручним,
Dialogue: 0,0:01:19.78,0:01:23.01,Default,,0000,0000,0000,,оскільки вони дозволяють нам\Nнадати однакові стилі багатьом елементам.
Dialogue: 0,0:01:23.03,0:01:25.35,Default,,0000,0000,0000,,Але ми можемо зробити значно більше\Nза допомогою класів,
Dialogue: 0,0:01:25.35,0:01:27.06,Default,,0000,0000,0000,,і зараз я вам це покажу.
Dialogue: 0,0:01:27.23,0:01:29.14,Default,,0000,0000,0000,,Ми маємо сторінку про пончики,
Dialogue: 0,0:01:29.14,0:01:31.36,Default,,0000,0000,0000,,але пончики є не дуже\Nздоровою їжею.
Dialogue: 0,0:01:31.44,0:01:34.01,Default,,0000,0000,0000,,Вони, можливо, навіть є\Nнайменш корисною їжею.
Dialogue: 0,0:01:34.03,0:01:36.96,Default,,0000,0000,0000,,І вони викликають своєрідну залежність,\Nчерез цукор, що містять в собі.
Dialogue: 0,0:01:37.01,0:01:39.64,Default,,0000,0000,0000,,Тому якщо ми збираємось зробити\Nсторінку про них,
Dialogue: 0,0:01:39.64,0:01:42.42,Default,,0000,0000,0000,,ми, мабуть, маємо попередити людей\Nпро їхню шкідливість.
Dialogue: 0,0:01:42.54,0:01:45.45,Default,,0000,0000,0000,,Як щодо того, щоб зафарбувати \Nцей верхній факт червоним,
Dialogue: 0,0:01:45.45,0:01:47.63,Default,,0000,0000,0000,,щоб чітко визначити, що це попередження?
Dialogue: 0,0:01:47.63,0:01:49.02,Default,,0000,0000,0000,,Як нам це зробити?
Dialogue: 0,0:01:49.20,0:01:53.40,Default,,0000,0000,0000,,Ми можемо додати властивість"color"\Nдо правила CSS "fact"
Dialogue: 0,0:01:53.40,0:01:55.68,Default,,0000,0000,0000,,і побачити, що з цього вийде.
Dialogue: 0,0:01:55.68,0:02:00.33,Default,,0000,0000,0000,,Але це зробило обидва факти червоними,\Nа другий факт не є попередженням,
Dialogue: 0,0:02:00.33,0:02:01.85,Default,,0000,0000,0000,,це всього лиш речення про вимову \Nслова "пончик".
Dialogue: 0,0:02:02.05,0:02:03.84,Default,,0000,0000,0000,,Томи ми не хочемо, щоб воно було червоним.
Dialogue: 0,0:02:04.17,0:02:05.58,Default,,0000,0000,0000,,Ми можемо додати ID,
Dialogue: 0,0:02:05.58,0:02:09.57,Default,,0000,0000,0000,,але якщо ми потім захочемо зафарбувати\Nінші попередження
Dialogue: 0,0:02:09.57,0:02:10.96,Default,,0000,0000,0000,,і додати нові,
Dialogue: 0,0:02:10.96,0:02:14.18,Default,,0000,0000,0000,,нам доведеться додавати все більше ID\Nі правил для них.
Dialogue: 0,0:02:14.39,0:02:19.81,Default,,0000,0000,0000,,В таких випадках, як цей, найкращим\Nваріантом є додати ще один клас до тега .
Dialogue: 0,0:02:20.10,0:02:22.53,Default,,0000,0000,0000,,Насправді браузери нам дозволяють \Nдодавати стільки класів до одного тега,
Dialogue: 0,0:02:22.53,0:02:24.54,Default,,0000,0000,0000,,скільки ми захочемо.
Dialogue: 0,0:02:24.54,0:02:28.53,Default,,0000,0000,0000,,Щоб це зробити, ми ставимо курсор\Nпісля останнього імені класу,
Dialogue: 0,0:02:28.53,0:02:33.20,Default,,0000,0000,0000,,ставимо пробіл і потім пишемо нове\Nім'я класу, наприклад "warning" (попередження).
Dialogue: 0,0:02:33.98,0:02:36.85,Default,,0000,0000,0000,,Тепер ми можемо створити \Nправило для "warning"
Dialogue: 0,0:02:37.12,0:02:40.24,Default,,0000,0000,0000,,і перемістити цю властивість "color"\Nдо цього правила.
Dialogue: 0,0:02:40.84,0:02:44.00,Default,,0000,0000,0000,,І тепер верхній факт — червоний,\Nа наступний — ні.
Dialogue: 0,0:02:44.22,0:02:45.41,Default,,0000,0000,0000,,Чудово!
Dialogue: 0,0:02:45.85,0:02:49.62,Default,,0000,0000,0000,,Ми можемо додавати назви класів\Nдекільком елементам, як і раніше.
Dialogue: 0,0:02:49.64,0:02:52.71,Default,,0000,0000,0000,,Можливо, ми хочемо зафарбувати текст,\Nвиділений жирним шрифтом,
Dialogue: 0,0:02:52.71,0:02:54.12,Default,,0000,0000,0000,,"deep fried" (в фритюрі)...
Dialogue: 0,0:02:54.12,0:02:56.99,Default,,0000,0000,0000,,Ми хочемо його зафарбувати в червоний,\Nтому що їжа в фритюрі
Dialogue: 0,0:02:56.99,0:02:59.87,Default,,0000,0000,0000,,часто асоціюється з нездоровою їжею.
Dialogue: 0,0:03:00.02,0:03:03.69,Default,,0000,0000,0000,,Тому ми можемо просто додати\Nclass="warning" —
Dialogue: 0,0:03:03.69,0:03:04.63,Default,,0000,0000,0000,,і тепер він теж червоний.
Dialogue: 0,0:03:05.04,0:03:10.82,Default,,0000,0000,0000,,Зауважте, що це попередження \Nмає червоний колір,
Dialogue: 0,0:03:10.82,0:03:14.65,Default,,0000,0000,0000,,але воно досі має верхню та нижню межі.
Dialogue: 0,0:03:14.80,0:03:17.54,Default,,0000,0000,0000,,І це те, що відбувається, коли ми\Nвикористовуємо декілька класів —
Dialogue: 0,0:03:17.54,0:03:20.58,Default,,0000,0000,0000,,браузер дивитиметься, які правила до\Nних застосовуються,
Dialogue: 0,0:03:20.58,0:03:22.34,Default,,0000,0000,0000,,і застосовуватиме усі відповідні стилі.
Dialogue: 0,0:03:22.73,0:03:26.81,Default,,0000,0000,0000,,Нам слід бути обережними, використовуючи\Nкольори, які мають особливе значення,
Dialogue: 0,0:03:26.81,0:03:28.56,Default,,0000,0000,0000,,оскільки є люди,\Nщо не розрізняють кольорів.
Dialogue: 0,0:03:28.64,0:03:31.30,Default,,0000,0000,0000,,Існують люди, які ледве\Nможуть розрізнити
Dialogue: 0,0:03:31.30,0:03:33.82,Default,,0000,0000,0000,,червоний та чорний кольори —\Nі, можливо, ви один із них.
Dialogue: 0,0:03:33.90,0:03:38.11,Default,,0000,0000,0000,,Тому змінімо цей клас так, щоб він був\Nвиразнішим для усіх.
Dialogue: 0,0:03:38.11,0:03:40.71,Default,,0000,0000,0000,,Ми змінимо колір на колір фону,
Dialogue: 0,0:03:40.71,0:03:44.74,Default,,0000,0000,0000,,тому що всі можуть помітити, якщо щось\Nмає колір фону.
Dialogue: 0,0:03:45.10,0:03:47.56,Default,,0000,0000,0000,,Червоний та чорний кольори\Nє недостатньо контрастними.
Dialogue: 0,0:03:47.56,0:03:51.30,Default,,0000,0000,0000,,А контраст є також важливим, для того\Nщоб наші сторінки було легко читати усім.
Dialogue: 0,0:03:51.40,0:03:54.81,Default,,0000,0000,0000,,Тому ми зробимо колір білим.
Dialogue: 0,0:03:54.81,0:03:56.81,Default,,0000,0000,0000,,Добре, тепер ми маємо висококонтрастні\Nкольори,
Dialogue: 0,0:03:56.81,0:03:59.61,Default,,0000,0000,0000,,і зокрема червоний колір для тих, хто\Nможе його бачити.\N
Dialogue: 0,0:03:59.99,0:04:04.50,Default,,0000,0000,0000,,І оскільки ми використали клас, обидва\Nнаші попередження мають однаковий стиль.
Dialogue: 0,0:04:04.77,0:04:07.79,Default,,0000,0000,0000,,І тепер, дякуючи гнучкості класів CSS,
Dialogue: 0,0:04:07.79,0:04:10.74,Default,,0000,0000,0000,,ми можемо вберегти весь світ\Nвід пончиків.
Dialogue: 0,0:04:10.74,0:04:15.09,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"