Знакомство с CSS / Каскадность. Переопределение стилей [10/15]
×

Каскадность. Переопределение стилей [10/15]

В предыдущем примере мы с помощью класса добавили ко второму абзацу дополнительные стили. CSS-правило для абзацев и CSS-правило для класса содержали по одному свойству. Когда мы добавили класс ко второму абзацу, в его наборе стилей стало два свойства. Вот так:

p {
  padding: 10px;
}
       +
.truth {
  background-color: #dff0d8;
}
       =
стили второго абзаца {
  padding: 10px;
  background-color: #dff0d8;
}

Свойства в CSS-правилах были разными. А что произойдёт, если в разных CSS-правилах будут совпадающие свойства? Сейчас и проверим.

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Каскадность. Переопределение стилей</title> </head> <body> <h1>Каскадность и просветление</h1> <p>Каскадность — это очень мощный механизм.</p> <p class="truth">Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.</p> <p>Веб-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.</p> </body> </html>
CSS
p { padding: 10px; outline: 2px solid rgba(0, 0, 0, 0.1); } .truth { }
HTML Academy

Задайте цвет фона для CSS-правил по аналогии с предыдущим заданием.

  1. Сначала для всех p задайте цвет фона #dff0d8.
  2. Затем для класса truth задайте цвет фона #aaddff.

Обратите внимание на фон второго абзаца после выполнения задания.

Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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