Значение свойств 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.
Давайте посмотрим, какой смысл и эффект дает это значение.
inherit с англ. переводится как наследовать. Свойства, которым будет присвоено это значение, будут наследовать значение того-же свойства его родителя.
<div> <div>Дочерний блок</div> </div>
Но, в 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 в области наследования, которое используется по умолчанию.
Что подразумевается под «inherit» в css?
Давайте разберем пример кода.
<style>
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
</style>
Итак, первый блок span говорит: «цвет всех элементов span синий по умолчанию и дает им 1px сплошную черную границу».
Блок .extra span является более специфичным правилом, чем блок span , и наиболее специфичный блок, описывающий конкретный элемент, будет иметь приоритет над менее специфичными блоками. Однако любой тег 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 | 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 Explorer | Chrome | Opera | Safari | Firefox |
| 8 | 1 | 4 | 1 | 1 |
| Android | Firefox Mobile | Opera Mobile | Safari Mobile |
| 1 | 1 | 1 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Значение 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
Редакторы: Влад Мержевич
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. |
| % | Величина смещения, указанная в процентах, обрабатывается следующим образом:
|
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
Изменяйте значение для просмотра результата.
div#myBox {
background-color: yellow;
width: 100px;
position: relative;
right: 0px;
}