Приведи пример наследования стилей в CSS

Question

Приведи пример наследования стилей в CSS

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

Наследование стилей в CSS означает, что дочерние элементы могут наследовать некоторые свойства от родительских элементов. Например, font-family, color, line-height и другие наследуются по умолчанию.

.parent {
  color: blue;
  font-family: Arial;
  padding: 10px; /* Не наследуется */
}

.child {
  /* Наследует color и font-family от .parent */
  border: 1px solid black; /* Собственное свойство */
}

<div class="parent">
  Текст родителя (синий, Arial)
  <div class="child">Текст ребёнка (наследует синий и Arial)</div>
</div>

Можно явно указать наследование с помощью inherit:

.child {
  padding: inherit; /* Теперь наследует padding: 10px */
}

Не наследуются: margin, padding, border, background, width/height и другие.

Ответ 18+ 🔞

Да ты посмотри, какой затейник этот CSS, блядь! Наследование стилей, ёпта! Это ж как в семье: папаша-элемент накопил каких-то свойств, а детёныши их, сука, хавают по умолчанию!

Смотри, вот родительский блок, .parent, накрасился в синий цвет и шрифт Arial поставил. А его отпрыск, .child, сидит внутри и, как миленький, наследует этот самый color и font-family. Будто свои собственные, блядь! А вот padding в 10 пикселей — это уже личное дело папаши, его детишкам по наследству не перепадает, хитрая жопа!

.parent {
  color: blue;
  font-family: Arial;
  padding: 10px; /* А вот это, сука, не наследуется! */
}

.child {
  /* Зато цвет и шрифт — наши, блядь, от предка! */
  border: 1px solid black; /* А это уже своя, родная граница */
}

<div class="parent">
  Текст родителя (синий, Arial)
  <div class="child">Текст ребёнка (наследует синий и Arial, ядрёна вошь!)</div>
</div>

Но если очень хочется, можно заставить наследника выцарапать у родителя даже то, что обычно не дают! Ключевое слово inherit — это как мантра "папа, дай!". Хочешь, чтобы и отступы перешли? На, получай!

.child {
  padding: inherit; /* Теперь и padding: 10px наш, блядь! Всё по-семейному! */
}

А вообще, не всё в этой жизни наследуется, ёпта. margin, padding, border, background, всякие width/height — это обычно каждому своё, как личное нижнее бельё. Не принято по родне передавать, в рот меня чих-пых! Вот такие пироги, друг мой, с каскадными таблицами стилей.