Return to Video

Групові селектори CSS

  • 0:01 - 0:05
    Я люблю художні музеї. Але я не маю часу
    ходити туди щодня.
  • 0:05 - 0:08
    Але, на щастя, я можу знайти прекрасні
    картини в Інтернеті.
  • 0:08 - 0:11
    Наприклад, тут, на сайті Khan Academy,
    в розділі історії.
  • 0:11 - 0:14
    Я зробила цю сторінку зі списком
    відомих картин,
  • 0:14 - 0:19
    одним заголовком, списком для кожного
    художнього стилю і посиланнями на статті
  • 0:19 - 0:21
    про кожну з картин.
  • 0:21 - 0:25
    Щоб зробити сторінку гарнішою,
    в більш художньому стилі,
  • 0:25 - 0:31
    я застосувала правила CSS, щоб змінити
    шрифт обох заголовків — h1 та h2.
  • 0:31 - 0:36
    Мені подобається курсив, але я думаю шрифт
    "fantasy" виглядатиме краще,
  • 0:36 - 0:39
    тому я його зараз зміню.
  • 0:39 - 0:44
    Оу, і я маю змінити його тут, тому що
    ми маємо два правила.
  • 0:44 - 0:49
    Але насправді я хочу, щоб усі заголовки
    на сторінці мали однаковий вид шрифту,
  • 0:49 - 0:54
    і я не хочу змінювати шрифти щоразу у двох
    місцях, коли змінюватиму свою думку.
  • 0:54 - 1:00
    Яким буде рішення? Нам потрібно замінити
    два правила CSS одним.
  • 1:00 - 1:04
    Хм... подумайте хвилинку.
  • 1:04 - 1:08
    Ви, можливо, запропонуєте створити один
    клас для обох заголовків.
  • 1:08 - 1:12
    І це спрацює. Таким чином ми матимемо лише
    одне правило для цього класу.
  • 1:12 - 1:15
    Але, по суті, це збільшить обсяг роботи,
  • 1:15 - 1:19
    адже ми будемо змушені постійно додавати
    клас під час створення нового заголовка.
  • 1:19 - 1:24
    На щастя, є кращий спосіб. Ми можемо
    згрупувати селектори разом,
  • 1:24 - 1:25
    використавши коми.
  • 1:25 - 1:32
    Ми всього лиш додамо кому після "h1", тут,
    і далі напишемо "h2".
  • 1:32 - 1:37
    І тепер ми можемо видалити це інше правило,
    оскільки ми об'єднали його з першим.
  • 1:37 - 1:40
    І та-дам! Наша сторінка не змінилась!
  • 1:40 - 1:44
    Тепер, коли я захочу поекспериментувати
    з шрифтами, я можу це робити в одному місці.
  • 1:44 - 1:49
    Тут я зміню його назад на курсив,
    і тепер всі заголовки написані курсивом.
  • 1:49 - 1:56
    Добре запам'ятайте, що селектори мають
    бути розділені саме комою, а не пробілом.
  • 1:56 - 2:00
    Як ми вже знаємо, пробіл використовується
    для селектора нащадка
  • 2:00 - 2:03
    і означає дещо зовсім інше в CSS.
  • 2:03 - 2:09
    Групування селекторів - це хороший засіб
    зменшити кількість селекторів.
  • 2:09 - 2:11
    Але використовуйте їх в міру. Вам не слід
    групувати селектори лише тому,
  • 2:11 - 2:14
    що зараз вони мають однакові властивості.
  • 2:14 - 2:18
    Ви маєте групувати ті селектори, які завжди
    мають мати однакові властивості.
  • 2:18 - 2:22
    Переважно тому, що семантично вони є
    дуже близькими один до одного.
  • 2:22 - 2:27
    В цьому випадку, мій селектор стосується усіх
    заголовків. А я хочу, щоб вони усі
  • 2:27 - 2:28
    мали однаковий стиль.
  • 2:28 - 2:33
    Залишайтесь зі мною, щоб дізнатись, як ще
    ми можемо використовувати групові селектори.
  • 2:33 - 2:37
    Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
Title:
Групові селектори CSS
Description:
more » « less
Video Language:
English
Duration:
02:34

Ukrainian subtitles

Revisions

Our website uses cookies for analysis purposes.