В реальной жизни часто можно увидеть наследование в действии. Если в игру не вступает какой-либо другой фактор, часто у высоких родителей высокие дети и так далее. Мы можем увидеть нечто подобное в CSS.
Если вы установите зеленый цвет элемента контейнера, то, если какое-либо правило не переопределит это значение цвета, цвет всех элементов внутри контейнера будет зеленым. Механизм, посредством которого значение определенных свойств передается от родительских элементов к дочерним элементам, называется наследованием.
В этой статье вы узнаете о различных аспектах наследования и о том, как оно влияет на внешний вид различных элементов.
Чем полезно наследование CSS?
Наследование CSS значительно сокращает время и усилия, необходимые для создания веб-сайта. Представьте, сколько CSS вам нужно написать, чтобы установить цвет для всех дочерних элементов тега body . Это может занять много времени, быть подверженным ошибкам и трудным в обслуживании. Точно так же вы можете представить, какой это был бы кошмар, если бы вы были вынуждены установить font-family или font-size для каждого дочернего элемента контейнера.
Посмотрите на следующую демонстрацию:
Здесь я определил свойства font-family , font-size и line-height для элемента body но все эти значения наследуются различными элементами, вложенными в body . Это обеспечивает однородность макета без необходимости повторять одни и те же свойства для нескольких элементов.
Только некоторые свойства наследуются
В реальной жизни не все атрибуты родителей передаются их детям. То же самое верно в CSS; не каждое свойство CSS по умолчанию наследуется дочерними элементами. Фактически, если бы все свойства были унаследованы, эффект был бы аналогичен отсутствию наследования вообще, и вам пришлось бы написать много CSS, чтобы переопределить это поведение.
Например, если свойство border было наследуемым, установка границы для одного элемента привела бы к появлению одинаковой границы для всех его дочерних элементов. Точно так же, если дети унаследуют свойство background-image от своих родителей, результат будет грязным. В следующем примере CodePen демонстрируется, как будут выглядеть такие вещи с использованием значения ключевого слова CSS, которое я расскажу в следующем разделе:
Принудительное наследование
Вообще говоря, сделать собственность наследуемой или нет, зависит от здравого смысла. Например, в дополнение к примерам, рассмотренным в предыдущем разделе, вы, вероятно, не хотите, чтобы все дочерние элементы элемента наследовали значение отступа своего родителя. Однако вы часто предпочитаете, чтобы цвет текста или шрифт, используемый для разных дочерних элементов контейнера, был одинаковым.
В некоторых случаях определенное свойство может не быть наследуемым, но вы все равно хотите, чтобы оно было унаследовано от родительского элемента. Это может быть достигнуто путем установки значения этого свойства для inherit дочернего элемента:
.some-child { color: inherit; }
Допустим, вы хотите, чтобы цвет всех элементов ссылок на вашем сайте был таким же, как цвет, определенный для их родительского элемента. Есть несколько способов сделать это. Например, вы можете использовать разные классы для ссылок и элементов контейнера с разными цветами. Тем не менее, один из самых чистых способов сделать это — использовать ключевое слово « inherit .
Как только свойство color элементов ссылки установлено на inherit , они начнут наследовать цвет своих родителей:
p { color: #f44336; } ul { color: #3f51B5; } a { color: inherit; }
Вот демо:
Наследование с использованием CSS Shorthand
Особенность ключевого слова « inherit заключается в том, что когда вы применяете его к сокращенному свойству, оно будет применяться ко всем вложенным свойствам, даже те из которых, которые вы, возможно, не поняли вначале, вынуждены наследовать. Кроме того, с помощью сокращения вы не можете указать, что одно подчиненное свойство будет наследовать значение.
В качестве примера вы можете ожидать, что следующий CSS-код будет применять сплошную границу шириной 1px, цвет которой наследуется от родительского элемента. Однако объявление на самом деле недействительно:
.example { /* Invalid CSS */ border: 1px solid inherit; }
Точно так же нельзя использовать сокращенные свойства для установки полей или отступов для определенного значения с одной стороны и унаследованного значения с другой стороны. Это снова сделает объявление недействительным:
.example { /* Invalid CSS */ margin: 10px inherit 20px 15px; }
Одним из решений этой проблемы является присвоение свойству, которое вы хотите наследовать, некоторого произвольного значения, а затем использование inherit с соответствующим свойством longhand:
.example { margin : 10px 0 20px 15px; margin-right: inherit; }
Отсутствующие Сокращенные Значения
При написании сокращения любое недостающее под-свойство, значение которого не было указано явно, будет установлено в его начальное значение (или значение по умолчанию). Рассмотрим следующий CSS:
.container-a { font: italic 1.2em/1.75 Lato; } .container-a p { font: bold 1em Lato; }
Здесь текст абзаца не будет наследовать значение стиля font-style из своего контейнера. Значение font-style будет фактически сброшено к его начальному значению normal . Следовательно, в этом случае, если вы хотите, чтобы сокращение родительского font было унаследовано, при этом сохраняя bold абзац, вам придется использовать свойство font-weight .
Использование DevTools для просмотра унаследованных значений
DevTools можно использовать для просмотра свойств, которые элемент наследует от своего родителя или другого элемента в дереве DOM. Как уже упоминалось, не все свойства родительского элемента являются наследуемыми. Также все наследуемые свойства не доходят до конца цепочки наследования, не переопределяясь другим правилом CSS где-либо еще.
DevTools предоставляет вам различные визуальные подсказки, чтобы легко различать все такие свойства, которые вы можете увидеть на скриншоте ниже, взятом из CSS SitePoint:
Любые свойства, которые не наследуются выбранным элементом, недоступны. Свойства, которые были наследуемыми, но были переопределены, отображаются зачеркнутым текстом.
Список CSS-свойств, которые унаследованы
Похоже, не существует единого окончательного источника, в котором перечислены все свойства CSS, которые наследуются, но ниже приведен список, который, вероятно, является правильным, основываясь на нескольких источниках:
- границы коллапса
- границы разнос
- Надпись на стороне
- цвет
- курсор
- направление
- опорожнить-клетки
- семейство шрифтов
- размер шрифта
- стиль шрифта
- вариант шрифта
- начертание шрифта
- размер шрифта, настроить
- Шрифт растяжения
- шрифт
- Межбуквенное расстояние
- высота линии
- список-стиль-изображение
- список-стиль-позиция
- Список стиле типа
- Список стиль
- дети сироты
- цитаты
- Вкладка размер
- выравнивания текста
- выравнивания текста, последние
- текст-отделка цвета
- отступ текста
- текста оправдать
- текст-тень
- текст-преобразования
- видимость
- бело-пространство
- вдовы
- слово-брейк
- слово-интервал
- перенос слова
Существует также ряд связанных с речью CSS-свойств , которые унаследованы и не включены в приведенный выше список.
Вот несколько источников для унаследованных списков свойств:
- CSS2.2 Полная таблица свойств
- Какие свойства CSS наследуются? (Вопрос о переполнении стека)
Вы также можете просмотреть информацию об отдельном свойстве CSS в спецификации или в любой исчерпывающей ссылке на CSS, и она обычно сообщит вам, наследуется ли это свойство по умолчанию.
Вывод
Подводя итог тому, что я обсуждал: наследование позволяет избежать написания дублированных правил CSS для применения одинакового набора свойств ко всем потомкам элемента. Это значительно упрощает процесс добавления стилей на веб-страницы и, следовательно, является отличной особенностью CSS.
CSS также позволяет использовать ключевое слововодить для принудительного наследования свойств, которые не наследуются по умолчанию. DevTools предоставляет вам легкий доступ ко всем свойствам, которые элемент наследует от своих предков. Это может помочь вам быстро найти решения общих проблем, связанных с макетом.