Inherit css что это: inherit | htmlbook.ru – Значение свойств CSS inherit.

Содержание

Значение свойств 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.

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

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

23-02-2014 11-06-21

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

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, который представлен в спецификации.

23-02-2014 8-14-33

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

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

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

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

Что подразумевается под "inherit" в css?

Давайте разберем пример кода.

<style>
span {
    color: blue;
    border: 1px solid black;
}
.extra span {
    color: inherit;
}
</style>

Итак, первый блок span говорит: "цвет всех элементов span синий по умолчанию и дает им 1px сплошную черную границу".

Блок .extra span является более специфичным правилом, чем блок span , и наиболее специфичный блок, описывающий конкретный элемент, будет иметь приоритет над менее специфичными блоками. Однако любой тег span на этой странице HTML сначала применит самый общий блок (span {}), а затем применит другие соответствующие блоки в порядке специфичности поверх каждого предыдущего блока в цепочке. Таким образом , теги <span> , содержащиеся внутри элемента класса extra, сначала будут иметь color: blue и border: 1px solid black , примененные к ним. После применения первого блока span {} будет применен блок .extra span {} . Поскольку .extra span ничего не говорит о границах, будет использоваться граница из блока span {} . Это большая часть того, откуда берется "Cascading" часть "Cascading Style Sheets".

Теперь, с основами из Пути, что делает inherit

? Как говорит W3Schools :

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

Давайте еще раз посмотрим на HTML:

<div>
    Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>

В этом случае родительским элементом является <div>, имеющий класс extra . Тег <span> внутри <div> наиболее точно соответствует .extra span {}, который указывает ему наследовать его свойство color от его родительского элемента, который в данном случае является <div>, который имеет встроенный стиль color: green . Таким образом, текст выглядит зеленым, потому что <div> имеет зеленый цвет.

Важно не запутаться и не думать, что inherit наследует от других CSS-правил вверх по цепочке (например, span {}): нет, он наследует от свойств своего родительского элемента, <div> !

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

Я также нашел статью в блоге, которая охватывает это немного более всесторонне, в том числе, как упоминалось в комментарии ниже, как @steveax наследуется по умолчанию и может быть плохим примером. Но, как уже упоминалось в этом блоге, большинство браузеров используют таблицу стилей по умолчанию, которая окрашивает ссылки в синий цвет, и в таком случае свойство color: inherit может переопределить это, в результате чего цвет ссылки будет таким же, как и родительский элемент. Мы можем увидеть это, изменив наш исходный пример (вы можете сделать это в Редакторе TryIt и посмотреть сами):

Давайте добавим новый блок CSS:

.extra a {
    color: inherit;
}

Теперь давайте изменим наш <div> , чтобы включить ссылку:

<div>
Here is <span>a span element</span> which is green, because it inherits from its parent. Here is <a href="#">A Link</a>.
</div>

Как вы можете видеть, ссылка теперь зеленая, а не синяя. Если мы удалим наш блок .extra a {} , ссылка станет синей.

CSS - inherit

Значения свойств: inheritinitialunsetАдресВремяМедиа-запросыПроцентыРазмерСтрокаУголФильтрЦветЧисло

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

Синтаксис ?

Свойство: inherit;

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
Пример

<!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 (Черновик спецификации) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные     ?

Internet ExplorerChromeOperaSafariFirefox
81411
AndroidFirefox MobileOpera MobileSafari Mobile
1111

Браузеры

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

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

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

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

Определение и применение

CSS значение initial устанавливает свойство в значение по умолчанию (отменяет наследование).

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

CSS синтаксис:

свойство:"initial";

JavaScript синтаксис:

object.style.property="initial"

Версия CSS

CSS3

Пример использования

В данном примере заголовок первого уровня <h2> наследует от родительского элемента <body> значение свойства color, а для заголовка второго уровня <h3> установлено свойство цвета в значение по умолчанию (отменено наследование):

<!DOCTYPE html>
<html>
<head>
<title> Значение inherit </title>
<style>
body {
color:blue;
}
h3 {
color:initial; /* Отменяем наследование */
}
</style>
</head>
<body>
<h2>Заголовок первого уровня<h2>
<h3>Заголовок второго уровня<h3>
</body>
</html>
Пример использования значения initial.

Рассмотрим пример сброса настроек в CSS:

<!DOCTYPE html>
<html>
<head>
<title>Пример сброса настроек в CSS</title>
<style> 
body {
color : blue; /* устанавливаем цвет текста */
font-size: small;  /* устанавливаем маленький размер шрифта */
background: azure;  /* устанавливаем цвет заднего фона */
} 
div {
color : red; /* устанавливаем цвет текста */
background: skyblue;  /* устанавливаем цвет заднего фона */
} 
.test {
all: initial; /* Элемент станет строчным (inline),background-color: transparent (прозрачный), font-size: normal (размер шрифта стандартный), color: black (шрифт черный) */
} 
.test2 {
all: inherit; /* Элемент останется блочным - все свойства наследуются от <body> (в том числе и margin:8px - настройки браузера по умолчанию) */
} 
.test3 {
all: unset; /* Элемент станет строчным (inline),background-color: transparent (прозрачный), font-size: small (размер шрифта маленький - наследует от <body>), color: blue (шрифт синий - наследует от <body>) */
} 
</style>
</head>
<body>
<div>Обычный блок<div>
<div class = "test">all:initial;<div>
<div class = "test2">all:inherit;<div>
<div class = "test3">all:unset;<div>
</body>
</html>
Пример использования CSS свойства all(сброс настроек в CSS).

unset | CSS | WebReference

Является комбинацией ключевых слов initial и inherit. Ключевое слово unset устанавливает значение свойства как inherit, если свойство наследуется от своего родителя, в противном случае значение устанавливается как initial.

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>unset</title>
  <style>
   * {
    margin: unset;
    padding: unset;
    border: unset;
   }
  </style>
 </head> 
 <body>
  <h2>Заголовок</h2>
  <p>Внимание, запрашиваемая страница не найдена!</p>
 </body>
</html>

В данном примере происходит сброс некоторых свойств для всех элементов.

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

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

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

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

Браузеры

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

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

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

×

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

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

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

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

Курс по вёрстке сайта на CSS Grid

right | CSS справочник

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

12.0+ 5.5+ 1.0+ 1.0+ 5.0+ 1.0+

Описание

CSS свойство right указывает смещение позиционированного элемента относительно правого края. Как именно свойство right будет смещать элемент, зависит от конкретного значения свойства position:

  • Элемент с фиксированным позиционированием (position: fixed;) смещается влево/вправо относительно правого края окна браузера.
  • Элемент с абсолютным позиционированием (position: absolute;) смещается влево/вправо относительно правого края его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно правого края окна браузера.
  • Элемент с относительным позиционированием (position: relative;) смещается влево/вправо относительно правого края его текущей позиции.
  • Для элемента со статическим позиционированием (position: static;) применение свойства right не даст никакого эффекта.

Примечание: допускается использование отрицательных значений.

Значение по умолчанию: auto
Применяется: к позиционированным элементам
Анимируется: да
Наследуется: нет
Версия: CSS2
Синтаксис JavaScript: object.style.right="50px"

Синтаксис

right: auto|величина|inherit;

Значения свойства

Значение Описание
auto Элемент остаётся на своём месте.
величина Определяет величину смещения в единицах измерения, используемых в CSS.
% Величина смещения, указанная в процентах, обрабатывается следующим образом:
  • для элементов с фиксированным позиционированием величина смещения вычисляется в зависимости от ширины области отображения окна браузера
  • для элементов с абсолютным позиционированием величина смещения вычисляется в зависимости от ширины позиционированного элемента предка (учитывается только width + padding), если такого элемента предка нет, то величина смещения вычисляется в зависимости от ширины области отображения окна браузера
  • для элементов с относительным позиционированием величина смещения вычисляется в зависимости от ширины области содержимого родительского элемента (width)
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Изменяйте значение для просмотра результата.

div#myBox {
background-color: yellow;
width: 100px;
position: relative;
right: 0px;
}

Отправить ответ

avatar
  Подписаться  
Уведомление о