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

Leave a Comment / Css / By /

Наследование — CSS — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Наследуемые свойства
  5. Подсказки
  6. На практике
    1. Realetive советует

Кратко

Секция статьи «Кратко»

Наследование в CSS — это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам.

Пример

Секция статьи «Пример»
<p>  Весь <span>текст</span> в <em>этом</em> абзаце будет <b>красным</b>.</p>
          <p>
  Весь <span>текст</span> в <em>этом</em> абзаце будет <b>красным</b>.
</p>

Как понять

Секция статьи «Как понять»

Для некоторых HTML-тегов предопределены особые CSS-свойства по умолчанию (их ещё называют user agent-стили — т. е. стили от браузера), которые характерны только для конкретно этих элементов, например, margin: 8px для <body>, color:#00c для ссылок или font-weight: bolder для <b>. Их можно переопределить, но некоторые свойства (цвета текста, размера шрифта, внешнего вида курсора и другие) будут применяться для любых вложенных элементов, пока для них не будет указано иного значения. Такая наследуемость не случайна и обусловлена одним очень интересным CSS-значением у этих свойств — inherit, что буквально и значит «наследуемое».

Если у какого-то свойства указать значение inherit — оно будет взято у верхнего «родителя». Для некоторых CSS-свойств это значение указано по умолчанию.

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

Секция статьи «Наследуемые свойства»
  • Свойства шрифта: font и его «производных»: font-style, font-variant, font-weight, font-stretch, font-size и font-family; color и line-height.
  • Свойства межбуквенных и «межсловных» расстояний: letter-spacing,
    word-spacing     и white-space.
  • Параметры текста: text-align, text-indent, text-shadow, text-transform;
  • оформление пунктов списков: list-style, list-style-type, list-style-position.
  • Внешний вид курсора: cursor и отображение содержимого элемента visibility.

Например, в отличие от color, который применится к подписи, ненаследуемое свойство border не будет применено к вложенным элементам:

<figure>  <img src="doggo-up.svg">  <figcaption>Дока Дог</figcaption></figure>
          <figure>
  <img src="doggo-up.
  svg">
  <figcaption>Дока Дог</figcaption>
</figure>

figure {  border: 3px solid #18191c;  color: blue;}
          figure {
  border: 3px solid #18191c;
  color: blue;
}
Открыть демо в новой вкладке

Но если мы укажем у <img> свойство border как inherit (т. е. наследуемое):

img {  border: inherit;}
          img {
  border: inherit;
}
Открыть демо в новой вкладке

Подсказки

Секция статьи «Подсказки»

💡 Другой пример наследования — использование вместо указания цвета значения currentColor, который равен цвету текста текущего элемента, т. е. значению свойства color. Если color текущего элемента равен inherit (т. е. наследует значение «родителя»), то и currentColor также будет соответствовать текущему значению color «родителя». Причём это ключевое слово можно указывать в качестве значения для любого свойства, где значением является цвет, не только для color. См. раздел «На практике».

Значения rem и em — также частный случай наследования кратного размера текста («родителя», если указан em и корневого тега в случае с rem).

Полный список наследуемых по умолчанию CSS-свойств помечен в спецификации в колонке «Inherited?» значением yes.

Значение любого CSS-свойства можно «позаимствовать» (унаследовать) у родителя. Если «родителя» нет, inherit будет соответствовать значению по умолчанию для этого элемента.

На практике

Секция статьи «На практике»

Realetive советует

Секция статьи «Realetive советует»

🛠 Удобно делать всякие трюки, используя currentColor. Мы не меняем явно цвет рамки по наведению курсора, но он меняется вслед за color.

<button>Волшебная кнопка</button>
          <button>Волшебная кнопка</button>

.magick-btn {  border: 2px solid;  border-color: currentColor;  border-radius: 6px;  padding: 9px 15px;  color: blue;  background-color: transparent;}.
 
 magick-btn:hover {  color: pink;}
          .magick-btn {
  border: 2px solid;
  border-color: currentColor;
  border-radius: 6px;
  padding: 9px 15px;
  color: blue;
  background-color: transparent;
}
.magick-btn:hover {
  color: pink;
}
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

Принцип каскада

alt + ←

→

Контекст наложения

alt + →

Ключевое слово inherit CSS заставляет элемент принимать вычисленное значение свойства от своего родителя Для унаследованных свойств это усиливает поведение по умолчанию,

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

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

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

наследовать : получить свойство от родительского элемента. initial : значение по умолчанию для свойства (по умолчанию для браузера). unset : Действует либо как наследуемый, либо как начальный. Он будет действовать как наследование, если у родителя есть совпадающее значение, иначе он будет действовать как начальный.

К сожалению, CSS не обеспечивает «наследования», как это делают такие языки программирования, как C++, C# или Java. Вы не можете объявить класс CSS, а затем расширить его другим классом CSS.

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

глагол.Если вы наследуете деньги или имущество,вы получаете их от человека,который умер.

Такие свойства CSS,как height,width,border,margin,padding и т.д.не наследуются.


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

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

Примечание. Наследование всегда происходит от родительского элемента в дереве документа, даже если родительский элемент не является содержащим блоком.

Examples

Исключение выбранных элементов из правила

/ * Делаем заголовки второго уровня зелеными * /
h3 { color: green; }
/*Оставьте те,которые находятся в боковой панели,чтобы они использовали цвет родителя */
#sidebar h3 { color: inherit; }

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

div , соответствующим правилу:

div#current { color: blue; }

Тогда он будет синим.

Specifications

Specification
CSS Cascading and Inheritance Level 3
# inherit

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
inherit

1

12

1

8

4

1

4. 4

18

4

14

1

1.0

See also

  • Inheritance
  • Используйте ключевое слово initial , чтобы установить для свойства его начальное значение.
  • Используйте ключевое слово revert , чтобы сбросить свойство до значения, установленного таблицей стилей пользовательского агента (или пользовательскими стилями, если таковые существуют).
  • Используйте ключевое слово revert-layer , чтобы сбросить свойство до значения, установленного на предыдущем каскадном уровне.
  • Используйте ключевое слово unset , чтобы установить для свойства его унаследованное значение, если оно наследуется, или его начальное значение, если нет.
  • Свойство all позволяет сразу сбросить все свойства в исходное, унаследованное, возвращенное или неустановленное состояние.
  • 1
  • …
  • 572
  • 573
  • 574
  • 575
  • 576
  • …
  • 865
  • Next

Inheritance


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

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

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

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

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

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

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

См. пример Pen CSS Inheritance от 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 , они начнут наследовать цвет своих родителей:

 p {
  цвет: #f44336;
}
ул {
  цвет: #3f51B5;
}
а {
  цвет: наследовать;
}

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

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

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

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

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

 .example {
  /* Неверный CSS */
  граница: 1px сплошная наследование;
}

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

 .example {
  /* Неверный CSS */
  поля: 10px наследуют 20px 15px;
}

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

 .example {
  поля: 10px 0 20px 15px;
  край справа: наследовать;
}

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

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

 .container-a {
  шрифт: курсив 1.2em/1.75 Lato;
}
.container-п {
  шрифт: жирный 1em Lato;
}

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

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

Использование DevTools для просмотра унаследованных значений

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

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

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

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

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

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

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

Вот несколько источников списков унаследованных свойств:

  • Полная таблица свойств CSS2.2
  • Какие свойства CSS наследуются? (Вопрос о переполнении стека)

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

Заключение

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

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

УСС | Наследование | Codecademy

Skip to ContentMini Arrow Down IconOpen Icon

Редактировать на GitHub

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

Унаследованные свойства

Унаследованные свойства применяются к элементу и его дочерним элементам.

Недвижимость Описание
цвет Задает цвет текста элемента.
курсор Свойство cursor задает внешний вид курсора мыши при наведении на элемент.
шрифт Задает свойства шрифта элемента в одном объявлении.
семейство шрифтов Задает гарнитуру шрифта в наборе правил.
размер шрифта Задает размер шрифта текста элемента.
стиль шрифта Чтобы установить стиль шрифта, в котором будет отображаться текст.
вес шрифта Чтобы сделать текст толще или тоньше.
межбуквенный интервал Установите горизонтальный интервал между отдельными символами в элементе.
высота строки Установите расстояние между строками текста по вертикали.
выравнивание по тексту Для установки выравнивания текста встроенного содержимого.
отступ текста Делает отступ (оставляет пустое место) первой строки в текстовом блоке.
выравнивание по тексту Устанавливает метод выравнивания текста, когда text-align: justify; применяется к элементу.
тень текста Добавляет тень к тексту.
преобразование текста Указывает, как сделать текст элемента заглавным.
видимость Скрывает или показывает элемент, не влияя на его размещение на странице.
межсловный интервал Установить пробел между словами.

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

Неунаследованные свойства не наследуются его потомками.

Недвижимость Описание
Все свойства фона Добавляет визуальные обои для HTML-элементов.
Все пограничные объекты Определяет стили границы элемента.
размер коробки Включает padding и border при расчете высоты элемента и ширины .
Все свойства Flexbox Упорядочивает элементы в соответствии с размером экрана.
поплавок Перемещает элемент слева или справа от содержащего его элемента.
Все свойства сетки Использует строки, столбцы и пробелы для организации содержимого на веб-странице.
Все свойства полей Устанавливает интервал за границей элемента.
Все свойства перелива Управляет содержимым, выходящим за пределы коробки.
Все свойства заполнения Задает расстояние между содержимым и полями элемента.
Все свойства положения Определяет размещение элемента на веб-странице.
Все калибровочные свойства Определяет значения высоты и ширины элемента.
текстовое украшение Стилизирует текст элемента с помощью оформления линий.
переполнение текста Указывает, как пользователю сообщается о скрытом содержимом.
преобразование Позволяет нам вращать, масштабировать, наклонять или перемещать элемент.
преобразование происхождения Задает положение преобразованного элемента относительно его исходной точки.
трансформируемый Подтверждает, сплющены ли дочерние элементы элемента или расположены ли они в трехмерном пространстве.
Все свойства перехода Управляет скоростью анимации и временем изменения свойств элемента.

Хотите помочь в создании Документов? Прочтите Руководство по вкладу или поделитесь своими мыслями в этой форме обратной связи.

Open Icon

Редактировать на GitHub

Learn CSS на CodeCademy

Pro только

Карьера

Инженер фронт

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *