-
Ми знову на сторінці про пончики і про
небезпеку їхнього споживання.
-
Мені справді подобається клас попереджень,
який ми додали до тегів та .
-
Але я хочу, щоб ці попередження виділялись
ще більше.
-
Зараз вони мають сірі межі з правила
класу "fact".
-
Але я думаю, що вони матимуть кращий
вигляд з товстими межами помаранчевого кольору.
-
Спробуймо додати це до правила "warning".
-
border: 5 px solid orange.
-
Ах, мені дуже подобається! Але ці межі
також є на тезі ,
-
і вони виглядають не дуже добре
посеред всього цього тексту.
-
Я хочу, щоб вони були лише на абзацах
"warning",
-
а не на словах, які розташовані посеред
тексту, як тут.
-
Як мені зробити більш точне правило CSS?
-
Що ж, одним із способів є створити
цілий новий клас "warning-paragraph"
-
і перенести властивість туди.
Але ми можемо зробити по-іншому.
-
Ми можемо сказати браузеру застосувати
властивості меж лише до тегів,
-
які є абзацами і мають клас "warning".
-
Щоб створити таке правило, спочатку ми
пишемо елемент, який ми шукаємо: 'p',
-
потім ми ставимо крапку та пишемо
ім'я класу: warning.
-
Це каже браузеру знайти всі теги ,
які належать до класу "warning"
-
і застосувати до них
всі задані властивості.
-
Вставмо цю властивість меж сюди...
-
І вуаля! Тепер межі є в класу "fact" і
відсутні в тезі .
-
Ми можемо так робити з будь-якими
комбінаціями елементів і їхніми класами,
-
щоразу як хочемо, щоб браузер застосував
стилі лише до окремих тегів, які мають клас.
-
Лише переконайтеся, що ви дотримуєтесь
такої послідовності:
-
ім'я тега, крапка, і далі ім'я класу.
-
Якщо ви випадково поставите пробіл між
іменем тега і крапкою, це не спрацює.
-
Тому що пробіл означає дещо інше в CSS.
-
І браузер зрозуміє це правило по-іншому.
-
Залишайтесь з нами, щоб дізнатись більше
про такий-вже-особливий пробіл.
-
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
