Наследование и каскадирование / Ещё немного про наследование [4/18]
×

Ещё немного про наследование [4/18]

Наверняка вы обращали внимание, что не все свойства наследуются тегами-потомками от их родителей.

Действительно, было бы странно, если бы свойство border автоматически устанавливалось для всех вложенных элементов.

Например, для этого куска кода:

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

Установим CSS-свойство:

.bordered {
    border: 1px solid green;
}

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

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

На самом деле граница будет нарисована только у тега p.

О том, какие именно свойства наследуются, мы расскажем в следующих заданиях.


Выполнить задание
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>Первая строка с <a href="#">произвольным</a> текстом.</p> <p>Вторая <span>строка</span> с произвольным текстом.</p> <ul> <li><a href="#">Первый элемент списка</a></li> <li>Второй <span>элемент</span> списка</li> <li>Третий элемент списка</li> </ul> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; }
HTML Academy
  1. Задайте body цвет текста #7f8c8d и высоту строки line-height: 16px;.
  2. Задайте ссылкам цвет #3498db.
  3. Тегу ul задайте рамки border: 1px solid #1abc9c; и внутренние отступы padding: 25px;.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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