Наследование и каскадирование / Наследование «на пальцах» [3/18]
×

Наследование «на пальцах» [3/18]

Давайте на простых примерах подробнее разберёмся, в чём же преимущество наследования.

Рассмотрим пример:

<p class="text">Cтрока c выделенным <span>словом</span></p>

Представим, что нам нужно установить красный цвет шрифта для всего текста. Зададим CSS-свойства следующим образом:

.text {
    color: red;
}

Благодаря наследованию цвет шрифта в теге span автоматически станет красным:

Cтрока c выделенным словом

А так бы выглядел результат, если бы наследование не работало:

Cтрока c выделенным словом

Нам пришлось бы отдельно прописывать цвет шрифта для тега span. И тогда установка таких простых свойств как стиль шрифта стала бы большой проблемой: нужно было бы задавать свойства для всех возможных вложенных тегов.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Наследование «на пальцах»</title> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <p>Первая строка с произвольным текстом.</p> <p class="selected">Вторая строка с <span>произвольным</span> текстом.</p> <ul> <li>Первый элемент списка</li> <li class="selected">Второй <span>элемент</span> списка</li> <li>Третий элемент списка</li> </ul> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; }
HTML Academy
  1. Для всего сайта установите цвет шрифта #7f8c8d и размер шрифта 12px.
  2. У элементов с классом selected измените цвет шрифта на #e74c3c.
  3. Для тега span, лежащего внутри тега p с классом selected, установите цвет шрифта #3498db.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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