Inherit css что это
Перейти к содержимому

Inherit css что это

  • автор:

Объ­яс­не­ние клю­че­вых слов initial, inherit, unset и revert в CSS

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

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

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

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

Базовые стили для веба Скопировать ссылку

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

Начальное значение для каждого свойства в CSS Скопировать ссылку

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

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

Пример указания значения `initial` на MDN.

Браузерные стили Скопировать ссылку

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

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

Пример браузерных стилей в инспекторе браузера.

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

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

Ключевое слово inherit Скопировать ссылку

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

Ключевое слово initial Скопировать ссылку

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

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

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

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

Ключевое слово unset Скопировать ссылку

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

1. Наследуемые свойства Скопировать ссылку

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

2. Ненаследуемые свойства Скопировать ссылку

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

Ключевое слово 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

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

/* Хорошо */ .common-content

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

Ключевое слово revert Скопировать ссылку

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

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

div < display: revert; /* = block */ >h1 < font-weight: revert; /* = bold */ font-size: revert; /* = 2em */ >

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

/* Хорошо */ .common-content

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

Заключение Скопировать ссылку

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

Видео доклада по теме Скопировать ссылку

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

inherit CSS значення

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

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

h1 намагається успадкувати значення кольору, яке він знаходить у елементі body.

Кожна CSS властивість може приймати, як значення, ключове слово inherit . Наприклад, ось так:

span

Цим ми змушуємо певний елемент успадковувати вказане значення властивості від батьківського елемента. Якщо в CSS не інстальовано властивість для батьківського елемента, то він успадкує значення, обчислене від батька (яке може бути дефолтним або яким-небудь іншим, успадкованим від батьківського елемента).

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

.block < box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4); >.block div

Тепер всі елементи всередині основного елемента .block успадковують його значення властивості box-shadow .

Наследование

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

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 9 февраля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

   Весь текст в этом абзаце будет красным.  p style="color: red"> Весь span>текстspan> в em>этомem> абзаце будет b>краснымb>. p>      

Как понять

Скопировать ссылку «Как понять» Скопировано

Если у какого-то свойства указать значение 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  border: 3px solid #18191c; color: blue;> figure  border: 3px solid #18191c; color: blue; >      
 img  border: inherit;> img  border: inherit; >      

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

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

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

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

На практике

Скопировать ссылку «На практике» Скопировано

Realetive советует

Скопировать ссылку «Realetive советует» Скопировано

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

  button class="magick-btn">Волшебная кнопка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; >      

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

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

23-02-2014 11-06-21

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

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

 
Дочерний блок

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

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

 
Дочерний блок

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

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

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

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

23-02-2014 8-14-33

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

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

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

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

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

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

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