Знакомство с CSS / Каскадность. Коктейль из классов [12/15]
×

Каскадность. Коктейль из классов [12/15]

Похоже, вы решили головоломку! Поздравляем!

Для решения нужно было лишь переместить CSS-правило для класса green ниже CSS-правила для класса blue. Когда к одному элементу применяются несколько CSS-правил, то приоритетность этих правил определяется по их селектору. Если селекторы однотипные, как в нашем случае, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде.

Резюмируем. Одному и тому же элементу можно назначать несколько классов. Благодаря механизму каскадности, CSS-правила этих классов будут комбинироваться, а при конфликте свойств будет применяться механизм приоритетов.

Назначение нескольких классов одному элементу — очень гибкий и мощный приём в арсенале веб-разработчика. Он позволяет упрощать и значительно сокращать CSS-код.

Представьте, что на макете очень много блоков с одинаковым фоном, цветом текста и отступами. Вместо того, чтобы всё время повторять CSS-свойства для этих блоков, можно создать один общий класс и использовать его в HTML-коде. А если понадобится изменить внешний вид этих блоков, то нужно будет исправить всего один класс в CSS.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Каскадность. Коктейль из классов</title> </head> <body> <h1>Каскадность. Коктейль из классов</h1> <p class="blue">Каскадность — это очень мощный механизм.</p> <p class="green">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p> <p class="blue">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p> </body> </html>
CSS
p { padding: 10px; } .green { background-color: #dff0d8; } .blue { background-color: #aaddff; } .nice-box { border-radius: 5px; box-shadow: 3px 3px 4px #cccccc; }
HTML Academy

Практикуемся работать с несколькими классами. Как задать несколько классов?

  1. Добавьте каждому абзацу класс nice-box.
  2. В CSS-правиле для nice-box измените свойство border-radius: 15px;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.