[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.34,0:00:03.90,Default,,0000,0000,0000,,Ми знову на сторінці про пончики і про\Nнебезпеку їхнього споживання.
Dialogue: 0,0:00:03.90,0:00:08.15,Default,,0000,0000,0000,,Мені справді подобається клас попереджень,\Nякий ми додали до тегів  та .
Dialogue: 0,0:00:08.15,0:00:12.67,Default,,0000,0000,0000,,Але я хочу, щоб ці попередження виділялись\Nще більше.
Dialogue: 0,0:00:12.67,0:00:16.89,Default,,0000,0000,0000,,Зараз вони мають сірі межі з правила\Nкласу "fact".
Dialogue: 0,0:00:16.89,0:00:20.92,Default,,0000,0000,0000,,Але я думаю, що вони матимуть кращий\Nвигляд з товстими межами помаранчевого кольору.
Dialogue: 0,0:00:20.92,0:00:25.80,Default,,0000,0000,0000,,Спробуймо додати це до правила "warning".
Dialogue: 0,0:00:25.80,0:00:29.58,Default,,0000,0000,0000,,border: 5 px solid orange.
Dialogue: 0,0:00:29.68,0:00:34.20,Default,,0000,0000,0000,,Ах, мені дуже подобається! Але ці межі\Nтакож є на тезі ,
Dialogue: 0,0:00:34.22,0:00:37.32,Default,,0000,0000,0000,,і вони виглядають не дуже добре\Nпосеред всього цього тексту.
Dialogue: 0,0:00:37.32,0:00:39.98,Default,,0000,0000,0000,,Я хочу, щоб вони були лише на абзацах\N"warning",
Dialogue: 0,0:00:39.98,0:00:43.74,Default,,0000,0000,0000,,а не на словах, які розташовані посеред\Nтексту, як тут.
Dialogue: 0,0:00:43.74,0:00:46.51,Default,,0000,0000,0000,,Як мені зробити більш точне правило CSS?
Dialogue: 0,0:00:46.51,0:00:50.53,Default,,0000,0000,0000,,Що ж, одним із способів є створити\Nцілий новий клас "warning-paragraph"
Dialogue: 0,0:00:50.53,0:00:55.15,Default,,0000,0000,0000,,і перенести властивість туди.\NАле ми можемо зробити по-іншому.
Dialogue: 0,0:00:55.15,0:01:01.24,Default,,0000,0000,0000,,Ми можемо сказати браузеру застосувати\Nвластивості меж лише до тегів,
Dialogue: 0,0:01:01.24,0:01:04.58,Default,,0000,0000,0000,,які є абзацами і мають клас "warning".
Dialogue: 0,0:01:04.58,0:01:09.12,Default,,0000,0000,0000,,Щоб створити таке правило, спочатку ми\Nпишемо елемент, який ми шукаємо: 'p',
Dialogue: 0,0:01:09.12,0:01:14.17,Default,,0000,0000,0000,,потім ми ставимо крапку та пишемо\Nім'я класу: warning.
Dialogue: 0,0:01:14.17,0:01:18.67,Default,,0000,0000,0000,,Це каже браузеру знайти всі теги ,\Nякі належать до класу "warning"
Dialogue: 0,0:01:18.67,0:01:21.38,Default,,0000,0000,0000,,і застосувати до них\Nвсі задані властивості.
Dialogue: 0,0:01:21.38,0:01:26.45,Default,,0000,0000,0000,,Вставмо цю властивість меж сюди...
Dialogue: 0,0:01:26.45,0:01:34.32,Default,,0000,0000,0000,,І вуаля! Тепер межі є в класу "fact" і\Nвідсутні в тезі .
Dialogue: 0,0:01:34.32,0:01:37.60,Default,,0000,0000,0000,,Ми можемо так робити з будь-якими\Nкомбінаціями елементів і їхніми класами,
Dialogue: 0,0:01:37.60,0:01:42.60,Default,,0000,0000,0000,,щоразу як хочемо, щоб браузер застосував\Nстилі лише до окремих тегів, які мають клас.
Dialogue: 0,0:01:42.60,0:01:45.23,Default,,0000,0000,0000,,Лише переконайтеся, що ви дотримуєтесь\Nтакої послідовності:
Dialogue: 0,0:01:45.23,0:01:50.71,Default,,0000,0000,0000,,ім'я тега, крапка, і далі ім'я класу.
Dialogue: 0,0:01:50.71,0:01:56.45,Default,,0000,0000,0000,,Якщо ви випадково поставите пробіл між\Nіменем тега і крапкою, це не спрацює.
Dialogue: 0,0:01:56.45,0:01:59.94,Default,,0000,0000,0000,,Тому що пробіл означає дещо інше в CSS.
Dialogue: 0,0:01:59.94,0:02:02.76,Default,,0000,0000,0000,,І браузер зрозуміє це правило по-іншому.
Dialogue: 0,0:02:02.76,0:02:06.50,Default,,0000,0000,0000,,Залишайтесь з нами, щоб дізнатись більше\Nпро такий-вже-особливий пробіл.
Dialogue: 0,0:02:06.86,0:02:11.96,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"