Знакомство с CSS / Декоративные свойства [8/15]
×

Декоративные свойства [8/15]

Чтобы сделать страницу яркой и красивой можно использовать множество свойств: цвет текста, фон, тени, рамки, закругления и многие другие.

Работа с декоративными свойствами будет подробно рассмотрена в серии курсов и демонстраций, например, в курсах «Фоны» и «Оформление текста с помощью CSS».

Пример создания красивых полей и кнопок вы можете увидеть в демонстрации Progressive Enhancement на примере формы входа.

В этом задании мы попрактикуемся использовать некоторые декоративные свойства.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Декоративные свойства</title> </head> <body> <h1>Красивые оповещения</h1> <p>Чтобы создать красивое сообщение-оповещение, нужно подобрать подходящие цвета текста и фона.</p> <div class="alert"> Используйте CSS для оформления элементов. </div> </body> </html>
CSS
.alert { padding: 10px; border: 1px solid #d6e9c6; }
HTML Academy

Завершим блок-оповещение:

  1. Добавьте в CSS-правило для класса alert свойство background-color: #dff0d8;,
  2. затем свойство color: #468847;
  3. и свойство border-radius: 5px;.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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