• Теория
  • Теория

Основы CSS, закрепление 8. Классики

Активизм инструктора Кекса (и начинающего дизайнера по совместительству) добрался и до вашего сайта.

Кекс предлагает оформить список в навигации. Он уже набросал разметку со стилями и прислал вам её. Но во время сохранения файла инструктора отвлёк звонок, и вышла ошибка: стили, вместо того чтобы быть разбитыми на классы, применены ко всем элементам списка сразу.

Что нужно сделать? Разобраться в существующем коде, создать нужные правила по классам, а затем распределить заданные свойства и их значения по этим правилам. Звучит несложно. Попробуем!

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

body {
  width: 500px;
  padding: 0;

  font-family: "Arial", sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
}

li {
  margin: 10px;
}

.large-font {
  font-size: 20px;
}

.white-colored {
  color: white;
}

.uppercase {
  text-transform: uppercase;
}

.bordered {
  padding: 5px;
  border: 2px solid #000000;
}

.border-rounded {
  border-radius: 10px;
}

.dark-background {
  background-color: #4470c4;
}
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Основы CSS» тренажёра «Знакомство с HTML и CSS» можно после регистрации и оформления подписки.