Наследование в CSS: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

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

Список тем

Задание 1: Простое наследование цвета текста

Измените цвет текста внутри контейнера `container`, используя наследование свойств. Родительский элемент уже имеет класс `container`. Ваша задача - дописать правило CSS, чтобы все элементы внутри `container` унаследовали синий цвет текста.

CSS

.container { 
  input1: blue;
}

                     .container { 
  input1: blue;
}

HTML

<div class="container">
  <p>Это текст внутри контейнера.</p>
  <div><span>И это тоже текст.</span></div>
</div>

В CSS, свойство `color` наследуется. Это означает, что если вы зададите цвет текста для родительского элемента, все его дочерние элементы унаследуют этот цвет, если для них не задано другое значение. Используйте селектор класса `.container` и свойство `color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 2: Наследование размера шрифта

Увеличьте размер шрифта для всего текста в блоке `block`. Используйте наследование, установив размер шрифта для родительского элемента с классом `block`, чтобы все дочерние элементы унаследовали новый размер шрифта.

CSS

.block {
  input1: 20px;
}

.block p {
  color: green;
}

                     .block {
  input1: 20px;
}

.block p {
  color: green;
}

HTML

<div class="block">
  <h1>Заголовок блока</h1>
  <p>Это абзац в блоке.</p>
  <ul>
    <li>Элемент списка</li>
  </ul>
</div>

Свойство `font-size` также наследуется. Задайте `font-size` для элемента `.block`, чтобы все содержимое внутри стало больше. Введите значение размера шрифта в пикселях, например `20px`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 3: Переопределение наследования

В контейнере `.parent` установлен синий цвет текста. Сделайте так, чтобы абзацы `<p>` внутри `.parent` имели красный цвет, переопределив унаследованное свойство.

CSS

.parent {
  color: blue;
}

.parent input1 {
  color: red;
}

                     .parent {
  color: blue;
}

.parent input1 {
  color: red;
}

HTML

<div class="parent">
  <p>Этот абзац должен быть красным.</p>
  <div>Этот div унаследует синий цвет.</div>
</div>

Наследование можно переопределить, задав свойство непосредственно для дочернего элемента. Используйте селектор для абзацев `<p>` внутри `.parent` и установите свойство `color` в красный цвет.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 4: Наследование и вложенность

Измените шрифт для всех элементов внутри `.wrapper` на `Arial`. Убедитесь, что все вложенные уровни также унаследовали шрифт.

CSS

.wrapper {
  input1: Arial;
}

.wrapper li {
  color: purple;
}

                     .wrapper {
  input1: Arial;
}

.wrapper li {
  color: purple;
}

HTML

<div class="wrapper">
  <p>Это текст в обертке.</p>
  <ul>
    <li>Элемент списка <span>со спаном</span></li>
  </ul>
</div>

Свойство `font-family` также наследуется. Установите `font-family: Arial;` для класса `.wrapper`. Проверьте, что даже вложенные элементы, такие как `span` и `li`, используют шрифт Arial.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 5: Наследование и списки

Измените стиль маркеров списка `ul` на квадратные. Используйте наследование, чтобы применить стиль ко всем спискам внутри `.list-container`.

CSS

.list-container {
  input1: square;
}

                     .list-container {
  input1: square;
}

HTML

<div class="list-container">
  <ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
  </ul>
  <ol>
    <li>Первый пункт нумерованного списка</li>
  </ol>
</div>

Свойство `list-style-type` определяет вид маркеров списка. Хотя оно не всегда интуитивно понятно связано с текстом, `list-style-type` тоже наследуется. Установите `list-style-type: square;` для `.list-container`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 6: Ненаследуемые свойства

Элементу `.box` задана рамка. Сделайте так, чтобы внутренний элемент `div` также имел рамку, используя ключевое слово `inherit`.

CSS

.box {
  border: 2px solid black;
  padding: 10px;
}

.inner-box {
  input1: inherit;
  padding: 5px;
}

                     .box {
  border: 2px solid black;
  padding: 10px;
}

.inner-box {
  input1: inherit;
  padding: 5px;
}

HTML

<div class="box">
  <div class="inner-box">Внутренний блок без рамки, но должен ее унаследовать.</div>
</div>

Свойство `border` по умолчанию не наследуется. Чтобы заставить дочерний элемент унаследовать значение свойства `border` от родителя, используйте значение `inherit`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 7: Комбинированное наследование

Для контейнера `.text-area` заданы цвет текста и шрифт. Убедитесь, что все текстовые элементы внутри (заголовки, абзацы, списки) унаследовали оба этих свойства.

CSS

.text-area {
  input1: green;
  input2: Arial, sans-serif;
}

.emphasized {
  font-weight: bold;
}

                     .text-area {
  input1: green;
  input2: Arial, sans-serif;
}

.emphasized {
  font-weight: bold;
}

HTML

<div class="text-area">
  <h1>Заголовок в текстовой области</h1>
  <p class="emphasized">Абзац с дополнительным классом.</p>
  <ul>
    <li>Пункт списка</li>
  </ul>
</div>

Можно задать несколько наследуемых свойств одновременно для родительского элемента, и все дочерние элементы унаследуют их. Задайте свойства `color` и `font-family` для `.text-area`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 8: Наследование и ссылки

Установите цвет ссылок в блоке `.nav` в фиолетовый, используя наследование. При этом цвет ссылок внутри `.nav` должен быть фиолетовым, но ссылки вне `.nav` должны остаться с цветом по умолчанию.

CSS

.nav {
  input1: purple;
}

a {
  color: blue; /* Цвет ссылок по умолчанию */
}

                     .nav {
  input1: purple;
}

a {
  color: blue; /* Цвет ссылок по умолчанию */
}

HTML

<div class="nav">
  <a href="#">Ссылка в навигации</a>
</div>
<p><a href="#">Ссылка вне навигации</a></p>

Применяйте стили к родительскому элементу `.nav`, чтобы ссылки внутри него унаследовали цвет. Используйте селектор `.nav a` или просто `.nav`, чтобы задать цвет для ссылок внутри навигации.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 9: Свойство `text-align` и наследование

Выровняйте текст по центру для всего содержимого в блоке `.center-block`, используя наследование свойства `text-align`.

CSS

.center-block {
  input1: center;
  border: 1px solid #ccc;
  padding: 15px;
}

                     .center-block {
  input1: center;
  border: 1px solid #ccc;
  padding: 15px;
}

HTML

<div class="center-block">
  <h2>Заголовок в центре</h2>
  <p>Этот абзац будет выровнен по центру.</p>
  <div><button>Кнопка</button></div>
</div>

Свойство `text-align` управляет выравниваем текста и также наследуется. Задайте `text-align: center;` для класса `.center-block`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 10: Наследование и `line-height`

Увеличьте межстрочный интервал для текста внутри `.content-area`. Используйте свойство `line-height` и наследование.

CSS

.content-area {
  input1: 1.5;
  font-size: 16px;
}

.content-area h2 {
  font-size: 20px;
}

                     .content-area {
  input1: 1.5;
  font-size: 16px;
}

.content-area h2 {
  font-size: 20px;
}

HTML

<div class="content-area">
  <h2>Заголовок раздела</h2>
  <p>Текст с увеличенным межстрочным интервалом.</p>
</div>

Свойство `line-height` определяет высоту строки и наследуется. Установите `line-height` больше 1 (например, 1.5 или 2) для `.content-area`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 11: `inherit` для ненаследуемых свойств (продвинутое)

Элементу `.outer` задана `cursor: pointer;`. Сделайте так, чтобы вложенный `.inner` также имел курсор `pointer`, используя `inherit` для свойства `cursor`.

CSS

.outer {
  cursor: pointer;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
}

.inner {
  width: 50%;
  height: 50%;
  background-color: white;
  input1: inherit;
}

                     .outer {
  cursor: pointer;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
}

.inner {
  width: 50%;
  height: 50%;
  background-color: white;
  input1: inherit;
}

HTML

<div class="outer">
  <div class="inner">Наведи курсор</div>
</div>

Свойство `cursor` по умолчанию не наследуется. Используйте значение `inherit` для свойства `cursor` у `.inner`, чтобы заставить его унаследовать значение от `.outer`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание 12: Переопределение и каскад

Родительскому элементу `.container-box` установлен красный цвет текста. Для всех абзацев `<p>` внутри `.container-box` установите зеленый цвет, но при этом сделайте так, чтобы абзацы с классом `.special-text` имели синий цвет, переопределив и родительское наследование, и общее правило для абзацев.

CSS

.container-box {
  color: red;
}

.container-box input1 {
  color: green;
}

.special-text {
  color: blue;
}

                     .container-box {
  color: red;
}

.container-box input1 {
  color: green;
}

.special-text {
  color: blue;
}

HTML

<div class="container-box">
  <p>Этот абзац должен быть зеленым.</p>
  <p class="special-text">Этот абзац должен быть синим.</p>
  <div>Этот div унаследует красный цвет.</div>
</div>

Примените цвет к `.container-box`, затем переопределите цвет для всех `p` внутри `.container-box`, и наконец, переопределите цвет еще раз для `p.special-text`. Помните о каскаде и специфичности.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку