[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.66,0:00:04.78,Default,,0000,0000,0000,,Я люблю художні музеї. Але я не маю часу\Nходити туди щодня.
Dialogue: 0,0:00:04.78,0:00:07.99,Default,,0000,0000,0000,,Але, на щастя, я можу знайти прекрасні\Nкартини в Інтернеті.
Dialogue: 0,0:00:07.99,0:00:11.28,Default,,0000,0000,0000,,Наприклад, тут, на сайті Khan Academy,\Nв розділі історії.
Dialogue: 0,0:00:11.28,0:00:14.34,Default,,0000,0000,0000,,Я зробила цю сторінку зі списком\Nвідомих картин,
Dialogue: 0,0:00:14.34,0:00:19.46,Default,,0000,0000,0000,,одним заголовком, списком для кожного\Nхудожнього стилю і посиланнями на статті
Dialogue: 0,0:00:19.46,0:00:21.32,Default,,0000,0000,0000,,про кожну з картин.
Dialogue: 0,0:00:21.32,0:00:25.16,Default,,0000,0000,0000,,Щоб зробити сторінку гарнішою,\Nв більш художньому стилі,
Dialogue: 0,0:00:25.16,0:00:31.15,Default,,0000,0000,0000,,я застосувала правила CSS, щоб змінити\Nшрифт обох заголовків — h1 та h2.
Dialogue: 0,0:00:31.15,0:00:35.89,Default,,0000,0000,0000,,Мені подобається курсив, але я думаю шрифт\N"fantasy" виглядатиме краще,
Dialogue: 0,0:00:35.89,0:00:38.89,Default,,0000,0000,0000,,тому я його зараз зміню.
Dialogue: 0,0:00:38.89,0:00:43.85,Default,,0000,0000,0000,,Оу, і я маю змінити його тут, тому що\Nми маємо два правила.
Dialogue: 0,0:00:43.85,0:00:49.26,Default,,0000,0000,0000,,Але насправді я хочу, щоб усі заголовки\Nна сторінці мали однаковий вид шрифту,
Dialogue: 0,0:00:49.26,0:00:54.41,Default,,0000,0000,0000,,і я не хочу змінювати шрифти щоразу у двох\Nмісцях, коли змінюватиму свою думку.
Dialogue: 0,0:00:54.41,0:01:00.02,Default,,0000,0000,0000,,Яким буде рішення? Нам потрібно замінити\Nдва правила CSS одним.
Dialogue: 0,0:01:00.02,0:01:04.04,Default,,0000,0000,0000,,Хм... подумайте хвилинку.
Dialogue: 0,0:01:04.04,0:01:08.36,Default,,0000,0000,0000,,Ви, можливо, запропонуєте створити один\Nклас для обох заголовків.
Dialogue: 0,0:01:08.36,0:01:12.05,Default,,0000,0000,0000,,І це спрацює. Таким чином ми матимемо лише\Nодне правило для цього класу.
Dialogue: 0,0:01:12.05,0:01:14.83,Default,,0000,0000,0000,,Але, по суті, це збільшить обсяг роботи,
Dialogue: 0,0:01:14.83,0:01:19.12,Default,,0000,0000,0000,,адже ми будемо змушені постійно додавати\Nклас під час створення нового заголовка.
Dialogue: 0,0:01:19.12,0:01:23.94,Default,,0000,0000,0000,,На щастя, є кращий спосіб. Ми можемо\Nзгрупувати селектори разом,
Dialogue: 0,0:01:23.94,0:01:25.50,Default,,0000,0000,0000,,використавши коми.
Dialogue: 0,0:01:25.50,0:01:31.97,Default,,0000,0000,0000,,Ми всього лиш додамо кому після "h1", тут, \Nі далі напишемо "h2".
Dialogue: 0,0:01:31.97,0:01:37.26,Default,,0000,0000,0000,,І тепер ми можемо видалити це інше правило,\Nоскільки ми об'єднали його з першим.
Dialogue: 0,0:01:37.26,0:01:39.95,Default,,0000,0000,0000,,І та-дам! Наша сторінка не змінилась!
Dialogue: 0,0:01:39.95,0:01:44.27,Default,,0000,0000,0000,,Тепер, коли я захочу поекспериментувати\Nз шрифтами, я можу це робити в одному місці.
Dialogue: 0,0:01:44.27,0:01:48.68,Default,,0000,0000,0000,,Тут я зміню його назад на курсив, \Nі тепер всі заголовки написані курсивом.
Dialogue: 0,0:01:48.68,0:01:55.76,Default,,0000,0000,0000,,Добре запам'ятайте, що селектори мають\Nбути розділені саме комою, а не пробілом.
Dialogue: 0,0:01:55.76,0:02:00.05,Default,,0000,0000,0000,,Як ми вже знаємо, пробіл використовується\Nдля селектора нащадка
Dialogue: 0,0:02:00.05,0:02:03.05,Default,,0000,0000,0000,,і означає дещо зовсім інше в CSS.
Dialogue: 0,0:02:03.05,0:02:08.52,Default,,0000,0000,0000,,Групування селекторів - це хороший засіб\Nзменшити кількість селекторів.
Dialogue: 0,0:02:08.52,0:02:11.34,Default,,0000,0000,0000,,Але використовуйте їх в міру. Вам не слід \Nгрупувати селектори лише тому,
Dialogue: 0,0:02:11.34,0:02:14.34,Default,,0000,0000,0000,,що зараз вони мають однакові властивості.
Dialogue: 0,0:02:14.34,0:02:18.36,Default,,0000,0000,0000,,Ви маєте групувати ті селектори, які завжди\Nмають мати однакові властивості.
Dialogue: 0,0:02:18.36,0:02:21.89,Default,,0000,0000,0000,,Переважно тому, що семантично вони є \Nдуже близькими один до одного.
Dialogue: 0,0:02:21.89,0:02:26.58,Default,,0000,0000,0000,,В цьому випадку, мій селектор стосується усіх\Nзаголовків. А я хочу, щоб вони усі
Dialogue: 0,0:02:26.58,0:02:28.26,Default,,0000,0000,0000,,мали однаковий стиль.
Dialogue: 0,0:02:28.26,0:02:32.90,Default,,0000,0000,0000,,Залишайтесь зі мною, щоб дізнатись, як ще \Nми можемо використовувати групові селектори.
Dialogue: 0,0:02:32.93,0:02:37.42,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"