Inherit css что это: inherit | htmlbook.ru

Значение inherit | CSS справочник

basicweb.ru

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• 
  HTML учебник
• 
  Справочник тегов
• 
  Атрибуты событий
• 
  Глобальные атрибуты
• 
  Мнемоники
• 
  Коды языков
• 
  HTML цвета
• 
  Тесты знаний

CSS

• 
  CSS учебник
• 
  Справочник свойств
• 
  CSS селекторы
• 
  CSS функции
• 
  CSS правила
• 
  Flexbox генератор
• 
  Grid генератор
• 
  LESS учебник

JavaScript

• 
  Интерфейсы веб API
• 
  Объект Array
• 
  Объект Date
• 
  Объект Function
• 
  Объект Global
• 
  Объект JSON
• 
  Объект Math^β
• 
  Объект Number
• 
  Объект Object
• 
  Объект Promise
• 
  Объект RegExp
• 
  Объект String

jQuery

• 
  jQuery селекторы
• 
  jQuery события
• 
  jQuery методы DOM
• 
  jQuery перемещения
• 
  jQuery утилиты
• 
  jQuery эффекты
• 
  jQuery AJAX
• 
  jQuery объект Callbacks
• 
  jQuery объект Deferred

CSS свойства

• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-shadow
• box-sizing
• break-after
• break-before
• break-inside
• caption-side
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• @font-face
• font-family
• font-size
• font-style
• font-variant
• font-weight
• grid
• grid-area
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-gap
• grid-column-start
• grid-gap
• grid-row
• grid-row-start
• grid-row-gap
• grid-row-end
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows
• justify-content
• justify-items
• justify-self
• height
• @keyframes
• left
• letter-spacing
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• max-height
• max-width
• @media
• min-height
• min-width
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-wrap
• overflow-x
• overflow-y
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• place-items
• place-self
• position
• quotes
• resize
• right
• tab-size
• table-layout
• text-align
• text-align-last

Значение свойств CSS inherit.

Когда вы будете рассматривать различные CSS свойства, довольно часто в качестве значения этих свойств может встретиться такое значение как inherit.

Давайте разберемся, что это значит и как это работает. 

inherit — означает то, что данное свойство свое значение будет принимать от значения соответствующего свойства родительского элемента. 

Давайте рассмотрим следующий код.

HTML:

<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

CSS:

span {
    color: blue;
    border: 1px solid black;
}
.extra span {
    color: inherit;
}

У нас есть элемент div, который находится внутри элемента span. 

Если открыть эту страницу, то мы увидим, что текст внутри элемента span будет синим цветом. 

Т.к. у нас есть стиль CSS span {color: blue; …, текст всех элементов span становится синим цветом. 

Теперь возьмем следующий код HTML, CSS стили остаются теми же самими.

HTML:

<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

Теперь весь текст внутри элемента div будет зеленым цветом. 

Казалось бы, что у нас есть стиль для элемента span. Но, у нас есть более точный стиль, который говорит о том, что для тех элементов span, которые будут находится внутри блока с классом extra, нужно применить для них свойство color со значением inherit. 

Таким образом, браузер видя, что наш блок находится внутри блока с классом extra. Будет применять для него тот цвет текста, который имеется у родительского элемента. Родительским элементом для span является элемент div, а этот элемент div имеет цвет текста зеленый.

Таким образом текст внутри элемента span стал зеленым цветом. Хотя это противоречит этому правилу:

span {
    color: blue;
    border: 1px solid black;
}

Вот таким образом работает значение свойств CSS inherit.

inherit | CSS | WebReference

Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено.

Синтаксис

Свойство: inherit;

Обозначения

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>inherit</title>
<style>
div {
border: 1px solid green;
padding: 10px;
}
p {
border: inherit;
padding: inherit;
}
</style>
</head>
<body>
<div><p>Внимание, запрашиваемая страница не найдена!</p></div>
</body>
</html>

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

•  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
•  — свойство браузером не воспринимается и игнорируется;
•  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

Значение ключевых слов CSS «Initial», «Inherit» и «Unset»

От автора: в CSS есть ключевые слова для различных значений по умолчанию. В этой статье я буду рассматривать три из них: initial, inherit и относительно новое unset.

Есть большая вероятность того, что, хотя большинство веб-разработчиков сталкивались с ними, многие из них, даже самые опытные, не до конца их понимают.

Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? Какие именно различия между ними? Я решил глубоко изучить эти три ключевых слова, чтобы раз и навсегда понять различия между значениями этих трех ключевых слов.

Основные стили Интернета

Прежде чем мы начнем рассматривать ключевые слова CSS, важно понять, откуда мы получаем основные стили в браузере.

Начальное значение каждого свойства в CSS

Каждое свойство CSS имеет начальное значение. Это начальное значение не связано с типом HTML-элемента, к которому оно применяется. Пример исходного значения из MDN:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Начальным значением высоты строки является «normal»

Стили пользовательского агента

После применения начальных стилей всех свойств CSS браузер загружает их стили. Эти стили не имеют ничего общего с базовыми начальными значениями свойств CSS. Пример стиля пользовательского агента:

Стили элементов h2 из пользовательского агента браузера Chrome

Элементы HTML не имеют начальных значений стиля! Основные стили элемента HTML, такого как тег h2, например, взяты из таблицы стилей агента пользователя браузера, а не из исходного значения свойств CSS.

Теперь давайте начнем рассмотрение ключевых слов CSS!

Ключевое слово inherit

Значение ключевое слово inherit указывает браузеру искать значение ближайшего родительского элемента и позволить текущему элементу наследовать это значение. Если у ближайшего родителя тоже значение inherit, браузер продолжит подниматься по дереву DOM, пока не найдет какое-то значение. Если значения нет, браузер будет использовать свой стиль пользовательского агента, а если нет никакого стиля пользовательского агента, он будет использовать базовый стиль initial.

Ключевое слово CSS initial

Чтобы понять ключевое слово initial, мы должны помнить важный факт: каждое свойство в CSS имеет значение по умолчанию, которое не имеет ничего общего со значением по умолчанию пользовательского агента. Стили пользовательского агента — это основные стили, которые браузер применяет к элементам HTML в браузере. Мы склонны думать, что они вводятся автоматически с HTML, но это не так.

Ключевое слово initial указывает браузеру использовать значение по умолчанию данного свойства CSS. Например: значение initial свойства color всегда будет black.

Такое поведение может быть очень запутанным, потому что, как мы уже говорили, значение свойства CSS по умолчанию не обязательно является значением по умолчанию, которое браузер определяет для элемента. Например, значение initial свойства display — это inline для всех элементов. Поэтому, если элемент div получает значение initial в свойстве display, его отображение будет inline, а не block, что является его стилем пользовательского агента.

Пример:

div.box{
background-color: red;
display: initial; /* will be equal to inline and not to block */
}

CodePen пример Initial для свойства display элемента div

Значение display initial — информация с MDN

Ключевое слово unset

Ключевое слово unset является уникальным в том, что он работает по-разному для различных типов свойств. В CSS есть два типа свойств:

Наследуемые свойства — свойства, которые влияют на потомков. Все свойства, которые влияют на текст, имеют такое поведение. Например, если мы определим font-size элемента HTML, он будет применяться ко всем дочерним элементам HTML, пока вы не установите другой стиль font-size внутреннего элемента HTML.

Унаследованное свойство font-size

Ненаследуемые свойства — все остальные свойства, которые влияют только на тот элемент, к которому они применяются. Это все свойства, которые не относятся к тексту. Например, если вы зададите для родительского элемента border, его дочерний элемент не получит границы.

Ненаследуемое свойство border

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Значение unset работает так же, как inherit для наследуемых типов свойств. Например, для свойства текста color оно будет работать как значение inherit, то есть искать родительский элемент с определением свойства, а если ничего не найдено — использовать значение пользовательского агента, и если нет стиля пользовательского агента, будет использовать базовый стиль initial.

Для ненаследуемых свойств unset будет работать так же, как значение initial, то есть применять значение по умолчанию; например, для border-color, это будет работать как initial.

.some-class{
color: unset; /* will be equal to ‘inherit’ value */
display: unset; /* will be equal to ‘initial’ value*/
}

Зачем использовать Unset, если оно работает точно так же, как Inherit и Initial?

Если unset действует как initial и inherit, зачем нам использовать unset? Если мы сбрасываем стили только через одно свойство, то в unset нет необходимости: вместо этого мы можем просто использовать значения inherit или initial.

Но в настоящее время у нас есть новое свойство под названием all, которое дает новую возможность: сбросить все наследуемые свойства и ненаследуемые свойства одновременно!

Таким образом, вам не нужно сбрасывать свойства по одному. Таким образом, применение значения unset к свойству all приведет к сбросу всех наследуемых свойств на inherit, а всех ненаследуемых свойств на initial.

Это единственная причина существования нового значения ключевого слова unset! В противном случае мы могли бы использовать значения inherit и initial. Вместо сброса свойств по одному, например:

/* Bad */
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}

Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:

/* Good */
.common-content *{
all: unset;
}

Я написал небольшой пример, чтобы продемонстрировать, как ведут себя свойства при использовании свойства all со значением unset: некоторые действуют так, как если бы было применено значение inherit, а некоторые — как если бы было применено значение initial. Пример на CodePen — all: unset;.

Ключевое слово revert

Но что, если мы хотим сбросить стили свойства на исходный стиль пользовательского агента, а не на базовый стиль свойства? Например, чтобы вернуть для свойства display элемента div значение block (его стиль пользовательского агента), а не inline (его базовый стиль CSS)?

Базовый стиль пользовательского агента HTML-тега div

Для этого, в скором времени мы получим новое ключевое слово CSS: revert. Ключевое слово revert очень похоже на unset, единственное отличие в том, что оно предпочитает стили агента пользователя основным стилям CSS. Например:

div{
display: revert; /* = block */
}h2{
font-weight: revert; /* = bold */
font-size: revert; /* = 2em */
}

Таким образом, если мы хотим сбросить все стили тега HTML на базовые стили браузера, мы можем сделать это следующим образом:

/* Good */
.common-content *{
all: revert;
}

Таким образом, revert дает нам более мощные возможности, чем ключевое слово unset. Но пока, ключевое слово revert работает только в Firefox и в Safari.

Поддержка браузерами

inherit — работает во всех браузерах, включая Internet Explorer 11

initial и unset — работают во всех браузерах, кроме Internet Explorer 11

revert — пока работает только в Firefox & Safari.

Это все. Надеюсь, вам понравилась данная статья, и вы узнали много нового.

Автор: Elad Shechter

Источник: https://medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Значение свойства css inherit.

Еще одно значение свойств css, с которым можно часто сталкиваться при работе со стилями CSS — это значение inherit.

Давайте посмотрим, какой смысл и эффект дает это значение.

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

<div>
<div>Дочерний блок</div>
</div>

В этом примере, хотя дочернему блоку не было задано никакого конкретного значения для свойства border, значение inherit заимствовало параметры этого свойства у своего родителя.

Но, в CSS есть также ряд свойств, которые автоматически заимствуют значения соответствующего свойства его родителя. Например, это свойство color:

<div>
<div>Дочерний блок</div>
</div>

Посмотрите, хотя дочернему блоку не было присвоено свойства color, тем не менее, текст в дочернем блоке тоже стал красным цветом.

Таким образом, в CSS есть ряд свойств, которые наследуют свойства своих родителей и есть такие свойства, которые не наследуют.

Чтобы узнать какие конкретно свойства наследуют, а какие нет, можете посмотреть на следующую таблицу:

http://www.w3.org/TR/2011/REC-CSS2-20110607/propidx.html

Это официальный список всех свойств CSS, который представлен в спецификации.

Обратите внимание на графу Inherited

Yes — означает, что свойство по умолчанию наследуется у своего родителя.

No — свойство не наследуется у родителя.

Таким образом, значение inherit — это способ изменять поведение свойств CSS в области наследования, которое используется по умолчанию.

Объяснение ключевых слов initial, inherit, unset и revert в CSS — Веб-стандарты

В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial, inherit и об относительно новых — unset и revert.

В оригинальной статье в заголовке и во вступлении говорится только о трёх ключевых словах, но дальше в тексте идёт обсуждение четвёртого — revert. Мы решили добавить его во вступление для удобства читателя — прим. переводчика.)

Хотя большинство веб-разработчиков сталкивалось с ними, весьма вероятно, что многие, даже самые опытные, не до конца их понимают.

Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? Какие именно различия между ними? Я решил глубже изучить эти ключевые слова, чтобы раз и навсегда разобраться, что отличает их друг от друга.

Базовые стили для веба#

Прежде чем мы начнем разбираться с ключевыми словами, важно понять, откуда берутся базовые стили в браузере.

Начальное значение для каждого свойства в CSS#

Каждое свойство в CSS имеет начальное (initial) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.

Пример начального значения из MDN:

Начальное значение свойства line-height — это normal.

Браузерные стили#

После применения начальных стилей для всех CSS-свойств браузер загружает свои стили. Эти стили не имеют ничего общего с базовыми начальными значениями CSS-свойств.

Пример браузерных стилей:

Стили браузера Chrome, применяемые к элементу <h2>.

У HTML-элементов нет начальных значений для стилей! Базовые стили HTML-элемента, такого как <h2>, например, предоставляются стилями браузера, а не начальными значениями CSS-свойств.

Теперь начнем говорить о ключевых словах.

Ключевое слово inherit#

Ключевое слово inherit сообщает браузеру, что значение свойства нужно найти у ближайшего родительского элемента и унаследовать его для текущего элемента. Если у ближайшего родителя также задано значение inherit, то браузер продолжит подниматься по DOM, пока не найдет какое-нибудь значение. Если значения нет, то браузер применит свои стили, а если и браузерных стилей нет, то тогда будет применено значение initial.

Ключевое слово initial#

Чтобы понять ключевое слово initial, мы должны помнить важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Мы часто думаем, что они автоматически приходят вместе с HTML, но это не так.

Ключевое слово initial говорит браузеру использовать значение по умолчанию для заданного CSS-свойства. Например, для свойства color значение initial всегда будет black.

Такое поведение может очень запутывать, потому что, как мы и говорили ранее, значение по умолчанию для CSS-свойства не всегда совпадает со значением, которое браузер задает конкретному элементу. Например, initial-значение для свойства display равно inline для всех элементов. Поэтому, если для элемента <div> будет задано свойство display со значением initial, то свойство будет вычислено как inline, а не block, как в стилях браузера.

Пример:

div.box {
    background-color: red;
    display: initial; /* примет значение `inline`, а не `block` */
}

Пример на CodePen значения initial для свойства display элемента <div>.

Информация об initial-значении свойства display на MDN.

Ключевое слово unset#

Ключевое слово unset является уникальным и работает в зависимости от типа свойства. В CSS есть два типа свойств:

1. Наследуемые свойства#

Свойства, которые затрагивают дочерние элементы. Все свойства, которые влияют на текст, имеют такое естественное поведение. Например, если мы зададим font-size элементу <html>, то он будет применяться ко всем дочерним элементам, пока вы не зададите другой font-size какому-нибудь из них.

Информация о наследуемости свойства font-size на MDN.

2. Ненаследуемые свойства#

Все остальные свойства, которые влияют только на элемент, для которого они заданы. Это все свойства, которые не относятся к оформлению текста. Например, если вы зададите border на родительском элементе, то он не будет задан на дочернем.

Информация о наследуемости свойства border на MDN.

Ключевое слово unset работает так же, как и inherit для наследуемых свойств. Например, для текстового свойства color оно будет работать как значение inherit, то есть будет искать ближайший родительский элемент с заданием нужного свойства, а если он не будет найден, то применится браузерное значение, а если и браузерных стилей нет, то применится значение initial.

Для ненаследуемых свойств unset ведет себя как initial, то есть применится значение по умолчанию. Например, для свойства border-color оно будет работать как initial.

.some-class {
    color: unset; /* будет равно `inherit` */
    display: unset; /* будет равно `initial` */
}

Зачем использовать unset, если оно работает так же, как inherit и initial?#

Если unset ведет себя как inherit и initial, то зачем оно может понадобиться? Если мы сбрасываем только одно свойство, то unset не нужен. Вместо него мы можем просто использовать inherit или initial. Но сейчас у нас есть свойство all, которое дает нам новую возможность — сбросить наследуемые и ненаследуемые свойства одновременно.

Таким образом, вам не нужно сбрасывать свойства по отдельности. Применение ключевого слова unset к свойству all приведет к сбросу всех наследуемых свойств к значению inherit и всех ненаследуемых свойств — к значению initial.

Это единственная причина существования нового ключевого слова unset! В противном случае мы могли бы вместо этого использовать inherit и initial.

Вместо сброса свойств по отдельности, к примеру:

/* Плохо */
.common-content {
    font-size: inherit;
    font-weight: inherit;
    border-width: initial;
    background-color: initial;
}

Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:

/* Хорошо */
.common-content {
    all: unset;
}

Я создал небольшой пример для демонстрации того, как свойства ведут себя, когда используется свойство all со значением unset. Некоторые ведут себя так, как будто к ним применено значение inherit, а некоторые так, как будто к ним применено значение initial. Пример на Codepen использования all: unset.

Ключевое слово revert#

Но что, если мы хотим сбросить значение свойства до первоначально заданных браузером значений, а не до значений по умолчанию? Например, вернуть значение свойства display элемента <div> к значению block (это стили браузера), а не к значению inline (это базовые стили CSS).

Браузерные стили для тега div

Для этих целей мы скоро получим новое ключевое слово в CSS: revert. Оно очень похоже на unset, единственное отличие состоит в том, что оно предпочитает стили браузера базовым значениям свойств CSS. Например:

div {
    display: revert; /* = block */
}

h2 {
    font-weight: revert; /* = bold */
    font-size: revert; /* = 2em */
}

Таким образом, если мы хотим сбросить все стили HTML-элемента до базовых стилей браузера, мы можем сделать это так:

/* Хорошо */
.common-content {
    all: revert;
}

Соответственно, revert дает гораздо больше возможностей, чем unset. Правда, на данный момент revert работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)

Заключение#

На этом всё. Надеюсь, вам понравилась эта статья, и вы чему-то научились из моего опыта.

Видео доклада по теме#

Я сделал короткий доклад на эту тему, смотрите видео целиком на YouTube:

Мой доклад «Ключевые слова в CSS, которые никто не понимает».

CSS: Значение свойства: inherit | Заметки разработчика

Хотя некоторые характеристики в CSS наследуются автоматически, могут быть ситуации когда необходимо увеличить вес наследуемого свойства. Указание значения inherit для любого свойства CSS, применённого к элементу передаст вычисленное значение свойства элемента-родителя данному элементу. Указав в авторском стиле, что свойство наследует своё значение от предка, вы можете увеличить его вес.

Поддержка inherit в Internet Explorer

Internet Explorer 7 и более ранние версии не поддерживают значение inherit для всех свойств кроме direction и visibility.

Как правило, в отсутствии каких-либо применимых определений, color — свойство передаваемое по наследству. Однако, в случае, если элемент указатель, то свойство color обычно установлено в синий, в стиле браузера пользователя. Если вы хотите подчеркнуть важность наследования значения, вы можете использовать значение inherit в авторской или пользовательской таблице стилей, переписывающей определения стиля браузера. В ниже следующем примере, мы устанавливаем свойство color элемента p #000 или black и укажем что любой потомок указатель должен наследовать значение color родительского элемента:

p {
  color: #000;
}
p a:link {
  color: inherit;
}

Когда мы используем сокращённую запись, как background, мы не можем смешивать inherit с другими значениями. Например, нижеследующие объявления background не правильное:

p {
  background: #fff inherit left top;
}

В этом случае мы могли надеяться, что этот элемент наследует родительское свойства background-image. К сожалению, нам бы не повезло, т.к. inherit должно быть конкретное значение в определении. В указанном выше примере наследование трактуется не однозначно, оно может быть свойством background-image или background-attachment и браузер пользователя не может определить к какому именно свойству его привязать. Что бы использовать inherit нам необходимо использовать полное написание вместо сокращённого. В этом случае мы должны указать свойство background-image:

p {
  background-image: inherit;
}

Что бы узнать какие свойства наследуются по умолчанию, обратитесь к Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Appendix F. Full property table

Похожие по тематике посты:

CSS Inherit | Где мы используем наследование свойства в CSS?

Введение в CSS Inherit

Наследование — это ключевое слово в CSS. Что используется для приобретения того же свойства родительского селектора для дочернего селектора? Указано значение наследования для любого свойства, применимого к элементу, в результате чего элемент получит уже существующее значение родительского для дочернего свойства. Это позволило наследовать все свои родительские значения дочернему элементу. Мы должны знать, что некоторые свойства автоматически наследуются от родителя к потомку из-за каскадного характера CSS.Предположим, что если мы установим цвет текста элемента, то он автоматически унаследует все его родительское свойство цвета дочернему свойству того же цвета.

Где мы используем Inherit Property в CSS?

Когда мы хотим наследовать настройку клиента по умолчанию на значение нашего собственного свойства элемента, мы должны использовать свойство наследования.

Синтаксис:

element1
{
цвет: значение;
}
element2 element1
{
цвет: наследование;
}

Примеры наследования CSS

Ниже приведены примеры:

Пример №1 — Наследование свойств диапазона

Код:

Наследовать свойства элемента Span его дочерним элементам

Выход:

.

Наследование CSS: Введение — SitePoint

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

Если вы установите для элемента контейнера зеленый цвет, то, если какое-либо правило не отменяет это значение цвета, цвет всех элементов внутри контейнера будет зеленым. Механизм, посредством которого значение определенных свойств передается от родительских элементов к дочерним элементам, называется наследованием.

В этой статье вы узнаете о различных аспектах наследования и о том, как оно влияет на внешний вид различных элементов.

Чем полезно наследование CSS?

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

Посмотрите на следующую демонстрацию:

См. Пример наследования CSS Pen от SitePoint (@SitePoint) на CodePen.

Здесь я определил свойства font-family , font-size и line-height в элементе body , но все эти значения наследуются различными элементами, вложенными внутри body . Это обеспечивает единообразие макета без необходимости повторения одних и тех же свойств для нескольких элементов.

Унаследованы только определенные свойства

В реальной жизни не все атрибуты родителей передаются их детям.То же самое и в CSS; не каждое свойство CSS по умолчанию наследуется дочерними элементами. Фактически, если бы все свойства были унаследованы, эффект был бы аналогичен отсутствию наследования вообще, и вам пришлось бы написать много CSS, чтобы переопределить это поведение.

В качестве примера, если свойство border было наследуемым, установка границы для одного элемента приведет к тому, что такая же граница появится на всех его дочерних элементах. Точно так же, если бы дети унаследовали свойство background-image от своих родителей, результат был бы беспорядочным.Следующий пример CodePen демонстрирует, как такого рода вещи будут выглядеть с использованием значения ключевого слова CSS, которое я расскажу в следующем разделе:

Посмотрите, как будут работать границы, если они унаследованы по умолчанию от SitePoint (@SitePoint) на CodePen.

Принудительное наследование

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

В некоторых случаях конкретное свойство может не передаваться по наследству, но вы все равно можете захотеть наследовать его от родительского элемента. Этого можно достичь, установив для этого свойства значение , наследовать для дочернего элемента:

  .some-child {
  цвет: наследовать;
}  

Допустим, вы хотите, чтобы цвет всех элементов ссылок на вашем веб-сайте был таким же, как цвет, определенный для их родительского элемента.Есть несколько способов сделать это. Например, вы можете использовать разные классы для ссылок и элементов контейнера с разными цветами. Однако один из самых простых способов сделать это — использовать ключевое слово inherit .

Как только свойство цвета элементов ссылки установлено на наследовать , они начнут наследовать цвет своих родителей:

  п {
  цвет: # f44336;
}

ul {
  цвет: # 3f51B5;
}

a {
  цвет: наследовать;
}  

Вот демонстрация:

См. Перо Использование ключевого слова ʻinherit` для принудительного наследования с помощью SitePoint (@SitePoint) на CodePen.

Наследование с использованием сокращенного кода CSS

Особенностью ключевого слова inherit является то, что когда вы применяете его к сокращенному свойству, оно будет применяться ко всем под-свойствам, даже к тем, которые вы не могли понять сначала, вынуждены наследовать. Кроме того, сокращенно вы не можете указать, что отдельное вложенное свойство будет наследовать значение.

В качестве примера вы можете ожидать, что следующий CSS применит сплошную границу шириной 1 пиксель, цвет которой унаследован от родительского элемента.Однако декларация фактически недействительна:

  .example {
  
  граница: 1px сплошное наследование;
}  

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

  .example {
  
  маржа: 10px наследовать 20px 15px;
}  

Одним из решений этой проблемы является установка свойства, которое вы хотите наследовать, на некоторое произвольное значение, а затем использование наследования с соответствующим полным свойством:

 .пример {
  margin: 10px 0 20px 15px;
  маржа-право: наследовать;
}  

Отсутствующие сокращенные значения

При написании сокращений любое недостающее под-свойство, значение которого не было указано явно, будет установлено в его начальное (или по умолчанию) значение. Рассмотрим следующий CSS:

  .container-a {
  шрифт: курсив 1.2em / 1.75 Lato;
}

.container-a p {
  шрифт: полужирный 1em Lato;
}  

Здесь текст абзаца не наследует значение font-style из своего контейнера.Значение стиля шрифта фактически будет сброшено до исходного значения нормального . Следовательно, в этом случае, если вы хотите, чтобы родительский шрифт наследовался, но при этом убедитесь, что абзац остается жирным шрифтом , вам придется использовать свойство font-weight longhand.

См. Наследование и сокращение CSS Pen от SitePoint (@SitePoint) на CodePen.

DevTools можно использовать для просмотра свойств, которые элемент наследует от своего родителя или от другого элемента вверх по дереву DOM.Как уже упоминалось, не все свойства родительского элемента наследуются. Также не все наследуемые свойства доходят до конца цепочки наследования, не будучи переопределенными другим правилом CSS где-то еще.

DevTools дает вам различные визуальные подсказки, чтобы легко различать все такие свойства, которые вы можете увидеть на снимке экрана ниже, взятом из CSS SitePoint:

Все свойства, которые не наследуются выбранным элементом, затенены.Свойства, которые были унаследованы, но были переопределены, отображаются перечеркнутым текстом.

Список унаследованных свойств CSS

Кажется, не существует единого окончательного источника, в котором перечислены все наследуемые свойства CSS, но ниже приведен список, который, вероятно, верен, на основе нескольких источников:

• граница-развал
• бордюр
• сторона подписи
• цвет
• курсор
• направление
• пустых ячеек
• семейство шрифтов
• размер шрифта
• стиль шрифта
• вариант шрифта
• font-weight
• регулировка размера шрифта
• растяжка шрифта
• шрифт
• межбуквенный интервал
• высота строки
• изображение в стиле списка
• позиция в стиле списка
• тип списка
• в стиле списка
• детей-сирот
• цитат
• размер табуляции
• выравнивание текста
• выравнивание текста последний
• текст-украшение-цвет
• текст-отступ
• с выравниванием по тексту
• тень текста
• преобразование текста
• видимость
• белое пространство
• вдов
• разрыв слов
• межсловный интервал
• перенос слов

Существует также ряд наследуемых свойств CSS, связанных с речью, которые не включены в список выше.

Вот несколько источников списков унаследованного имущества:

Вы также можете просмотреть информацию об отдельном свойстве CSS в спецификации или в любом исчерпывающем справочнике CSS, и он обычно сообщает вам, унаследовано ли это свойство по умолчанию.

Заключение

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

CSS также позволяет использовать ключевое слово inherit для принудительного наследования свойств, которые не наследуются по умолчанию. DevTools обеспечивает легкий доступ ко всем свойствам, которые элемент наследует от своих предков. Это может помочь вам быстро найти решения общих проблем, связанных с макетом.

.

css - Лучшая практика для наследования размера шрифта

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
Общественные вопросы и ответы

2. Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
Программирование и связанные с ним технические возможности карьерного роста

4. Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
Обратитесь к разработчикам и технологам со всего мира

6. О компании

.