-
Я люблю художні музеї. Але я не маю часу
ходити туди щодня.
-
Але, на щастя, я можу знайти прекрасні
картини в Інтернеті.
-
Наприклад, тут, на сайті Khan Academy,
в розділі історії.
-
Я зробила цю сторінку зі списком
відомих картин,
-
одним заголовком, списком для кожного
художнього стилю і посиланнями на статті
-
про кожну з картин.
-
Щоб зробити сторінку гарнішою,
в більш художньому стилі,
-
я застосувала правила CSS, щоб змінити
шрифт обох заголовків — h1 та h2.
-
Мені подобається курсив, але я думаю шрифт
"fantasy" виглядатиме краще,
-
тому я його зараз зміню.
-
Оу, і я маю змінити його тут, тому що
ми маємо два правила.
-
Але насправді я хочу, щоб усі заголовки
на сторінці мали однаковий вид шрифту,
-
і я не хочу змінювати шрифти щоразу у двох
місцях, коли змінюватиму свою думку.
-
Яким буде рішення? Нам потрібно замінити
два правила CSS одним.
-
Хм... подумайте хвилинку.
-
Ви, можливо, запропонуєте створити один
клас для обох заголовків.
-
І це спрацює. Таким чином ми матимемо лише
одне правило для цього класу.
-
Але, по суті, це збільшить обсяг роботи,
-
адже ми будемо змушені постійно додавати
клас під час створення нового заголовка.
-
На щастя, є кращий спосіб. Ми можемо
згрупувати селектори разом,
-
використавши коми.
-
Ми всього лиш додамо кому після "h1", тут,
і далі напишемо "h2".
-
І тепер ми можемо видалити це інше правило,
оскільки ми об'єднали його з першим.
-
І та-дам! Наша сторінка не змінилась!
-
Тепер, коли я захочу поекспериментувати
з шрифтами, я можу це робити в одному місці.
-
Тут я зміню його назад на курсив,
і тепер всі заголовки написані курсивом.
-
Добре запам'ятайте, що селектори мають
бути розділені саме комою, а не пробілом.
-
Як ми вже знаємо, пробіл використовується
для селектора нащадка
-
і означає дещо зовсім інше в CSS.
-
Групування селекторів - це хороший засіб
зменшити кількість селекторів.
-
Але використовуйте їх в міру. Вам не слід
групувати селектори лише тому,
-
що зараз вони мають однакові властивості.
-
Ви маєте групувати ті селектори, які завжди
мають мати однакові властивості.
-
Переважно тому, що семантично вони є
дуже близькими один до одного.
-
В цьому випадку, мій селектор стосується усіх
заголовків. А я хочу, щоб вони усі
-
мали однаковий стиль.
-
Залишайтесь зі мною, щоб дізнатись, як ще
ми можемо використовувати групові селектори.
-
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
