Наследование и каскадирование / Перекрестное наследование [17/18]
×

Перекрестное наследование [17/18]

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

Приём этот заключается в следующем:

  1. создается базовый стиль для таких элементов;
  2. определяются вспомогательные стили, которые применяются к элементам по мере надобности;
  3. элемент наследует базовый стиль и один или несколько вспомогательных.

Пример:

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

Можно вынести общее оформление (размеры, отступы и т.д.) для всех кнопок в отдельное CSS-правило для класса, например, .button.

А затем создать дополнительные CSS-правила, в которых будут определены только различающиеся свойства этих кнопок, например, цвет фона. Для этих правил можно использовать такие названия классов: .button-send, .button-clear, .button-navigation.

Каждая кнопка в HTML-коде будет иметь два класса: общий и дополнительный.

<a class="button button-send">Отправить</a>

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Перекрестное наследование</title> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="cats"> <div>Кексик</div> <div>Рудольф</div> <div>Снежок</div> <div>Адольф</div> </div> </body> </html>
CSS
body { padding: 10px; font-family: "PT Sans", sans-serif; } .cats { position: relative; width: 390px; margin: 20px auto; padding: 20px; text-align: center; box-shadow: 0 0 3px #999999; } .cats .cat { display: inline-block; width: 100px; height: 100px; margin: 10px; padding: 10px; text-align: center; color: #ffffff; background-repeat: no-repeat; background-position: 50% 80%; border-radius: 5px; box-shadow: 0 0 3px #999999; } .cats .cat-keksik { background-color: #3498db; background-image: url("/assets/course13/cat_walk.png"); } .cats .cat-rudolf { background-color: #e74c3c; background-image: url("/assets/course13/cat_grumpy.png"); } .cats .cat-snezhok { background-color: #2ecc71; background-image: url("/assets/course66/cat_w.png"); } .cats .cat-adolf { background-color: #e67e22; background-image: url("/assets/course66/cat_a.png"); }
HTML Academy
  1. Для всех тегов div внутри блока .cats установите
    класс cat.
  2. Для каждого кота установите соответствующий ему класс cat-keksik, cat-rudolf, cat-snezhok, cat-adolf.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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