Наследование (inherit initial unset) | CSS
Свойство, меняющее все стили CSS, кроме direction и unicode-bidi
Это те значения, которые можно применить к любому свойству CSS. Везде происходит сброс стиля браузера, в том числе у тегов input , progress и т.д.
CSS наследование стилей от родителя: inherit
Если предку и потомку нужно указать одинаковые значения свойства, то удобней для дальнейшего редактирования использовать inherit — достаточно будет изменить значение только у родителя.
inherit передаёт не конечное значение, а то, что указано в стилях родителя
Пример 1: в чём разница между width: inherit; и width: 100%;
width: 50%; border: solid mediumaquamarine;">width: 100%; background: #E6E2FF;">100%
width: 50%; border: solid mediumaquamarine;">width: inherit; background: #E6E2FF;">inherit
Пример 2: max-height: 100%; не работает
max-height: 3em; border: solid mediumaquamarine;">max-height: 100%; height: 4em; background: #E6E2FF;">100%
max-height: 3em; border: solid mediumaquamarine;">max-height: inherit; height: 4em; background: #E6E2FF;">inherit
Пример 3: как сделать дубликат стилей CSS родителя
У меня та же максимальная ширина, фон, рамка и другое, что у родителя
У меня та же максимальная ширина, фон, рамка и другое, что у родителя
inherit переносит значение непосредственного родителя, а не определённого position
width: 100%; border: solid salmon; position: relative;">width: 50%; border: solid mediumaquamarine;">width: 100%; background: #E6E2FF; position: absolute;">100%
width: 100%; border: solid salmon; position: relative;">width: 50%; border: solid mediumaquamarine;">width: inherit; background: #E6E2FF; position: absolute;">inherit
Копируется всё, даже то, что не указано разработчиком в стилях у родителя
без установленного display
без установленного display
display: inherit; background: #E6E2FF;">inherit
initial CSS: отменить наследование
Для того, чтобы узнать начальные значения свойств, которые зависят от браузера, таких как color и font-family , можно применить initial
Пример 1: запретить наследование свойства
color: initial ;
color: initial;
Пример 2: убрать свойство для более узкого селектора
Я сам по себе
У меня есть родитель «raz0»
.raz < color: red; /* наследуется */ font-size: 200%; /* наследуется */ > .raz0 .razЯ сам по себеУ меня есть родитель "raz0"
initial позволяет сбросить все стили, включая те, что браузер задал для тега по умолчанию
Пример: для сторонних виджетов отключить наследование стиля и стили, установленные браузером
не будет блочным
<div>не будет блочным
unset CSS: сбросить стиль браузера
Поведение стандартное, только все теги становятся обезличенными, словно их подстригли под одну гребёнку. То есть как и у initial , блочные элементы станут inline .
Пример: обнулить все возможные стили input
Изменить текст:
label < text-shadow: 1px 1px rgba(255,0,180,0.5); >input
div < color: green; border: 1px solid red; >span < color: unset; /* наследуется */ border: 1px solid unset; /* не наследуется, по умолчанию currentColor */ > div < color: green; border: 1px solid red; >spanпример
div < color: green; border: 1px solid red; >spanпример
div < color: green; border: 1px solid red; >spanпример
Домашнее задание: в комментариях предложить свой пример использования значений inherit, initial и unset, а то у меня фантазия уже исчерпана 🙂
5 комментариев:
Анонимный Здравствуйте!
Не подскажите почему так?
https://jsfiddle.net/og96q6x5/
Почему этот негодяй Н2 сдвигает жёлтый ДИВ в низ. Я вообще хотел без красного. Он жёлтый сдвинул. Я его ещё в один ДИВ так он сдвинул и жёлтый и красный.
Почему?
NMitra Здравствуйте, насколько я поняла вас не устраивает схлопывание? Посмотрите http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Там есть решения проблемы Анонимный Спасибо Вам. Эту пробелку я уже нарыл как решать это схлопывание. Или как у Вас или чистящим ДИВом.
Не у меня другое.
Вот получилось. Что и хотел.
Вроде получилось его усмирить с display:inline-block.
https://jsfiddle.net/og96q6x5/2/
Но вопрос остался. Разве находясь внутри ДИВа он не должен двигаться по этому диву. Никого не трогать?
И почему при display:inline margiņ-top: Не работает?
https://jsfiddle.net/og96q6x5/1/
Анонимный Спасибо Нашёл.
vertical-align: с display:inline; и display:inline-block;
Даа. Как всё это забавно.
NMitra И почему при display:inline margiņ-top не работает? — Потому что он не блочный, у него нет высоты height
Объяснение ключевых слов initial, inherit, unset и revert в CSS
В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial , inherit и об относительно новых — unset и revert .
В оригинальной статье в заголовке и во вступлении говорится только о трёх ключевых словах, но дальше в тексте идёт обсуждение четвёртого — revert . Мы решили добавить его во вступление для удобства читателя — прим. переводчика.)
Хотя большинство веб-разработчиков сталкивалось с ними, весьма вероятно, что многие, даже самые опытные, не до конца их понимают.
Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? Какие именно различия между ними? Я решил глубже изучить эти ключевые слова, чтобы раз и навсегда разобраться, что отличает их друг от друга.
Базовые стили для веба Скопировать ссылку
Прежде чем мы начнем разбираться с ключевыми словами, важно понять, откуда берутся базовые стили в браузере.
Начальное значение для каждого свойства в CSS Скопировать ссылку
Каждое свойство в CSS имеет начальное ( initial ) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.
Пример начального значения из 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:
Приоритет стилей в CSS, каскадность. Как отменить наследование свойств
Видео урок «Приоритет стилей в CSS, каскадность. Как отменить наследование свойств» посвящен вопросу о том, что такое каскадность в CSS, как рассчитать приоритет стилей и как отменить наследование свойств от родительских элементов. Часто у новичков, при создании сайта возникают проблемы с пониманием каскадности в CSS. Например, при написании стиля в CSS c заданием конкретного свойства элементу, выясняется, что оно не работает. Дело в том, что на один тег в HTML странице может влиять сразу несколько стилей. Помимо стиля для самого элемента, это может быть стиль, заданный для тега body или еще какого-либо родительского тега. Таким образом, собирается целый каскад стилей, влияющих на элемент. И здесь нужно уметь определять приоритет каждого из стилей и в случае необходимости увеличивать приоритет нужного стиля. Если свойство передается несколькими родителями, то оно будет унаследовано от ближайшего родителя, или от самого элемента, если данное свойство задано ещё и напрямую для него. Но бывают и более сложные случаи, в которых стили для одного тега задаются разными способами, например, через id, class, style или для самого тега. В этом случае включается балльная система оценки приоритета. Стиль, заданный через селектор тега имеет 1 балл, селектор классов — 10, id-селектор — 100, встроенный стиль -1000 баллов Бесплатный видео урок «Приоритет стилей в CSS, каскадность. Как отменить наследование свойств» вы можете смотреть онлайн в любое время. Удачи Вам!
- Автор: Евгений Попов
- Длительность: 20:22
- Рейтинг: 5.0/1
Если у Вас есть качественные видео уроки, которых нет на нашем сайте, то Вы можете добавить их в нашу коллекцию. Для этого Вам необходимо загрузить их на видеохостинг (например, YouTube) и добавить код видео в форму добавления уроков. Возможность добавлять свои материалы доступна только для зарегистрированных пользователей.
Отмена наследования в CSS
Здравствуйте, не силён в css. поэтому такой вопрос: как отменить родительское наследование в css. Конкртено, в body и * прописан padding: 0; , для всех блоков работает нормально, но для одного блока он не нужен, как отменить этот padding только для нужного блока?
Ответил: ПафНутиЙ
body,
* padding: 0;
>
.concrete_block padding: 10px;
>
3 комментария
Похожие вопросы
Плавающий блок на сайте
25.08.2011 Гость Стили (CSS)
Модификация тега hr
01.10.2011 compis Стили (CSS)
обтекание блока текстом
20.01.2014 thirus Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
расположение блоков div
21.01.2014 thirus Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
Что за ерунда с css?
27.01.2014 Gopr Стили (CSS)
Настройка плавающего блока при помощи jQuery-плагина Sticky-kit
28.03.2014 mastodontoff Стили (CSS), jQuery
Как сделать в 2 блока
19.07.2014 BadBoy Шаблоны (TPL), Стили (CSS)
Система баллов 1.5 — Как исправить блок ?
05.02.2015 Creochrome Стили (CSS), Модули, Ламерские вопросы
Подскажите как сделать два блока в одном окне?
07.03.2015 loginxxx Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
Как сделать вертикальное центрирования картинки относительно высоты блока?
02.06.2015 BRAGA Стили (CSS)
Последние события
ushkom | Помогите подправить модуль UserBox под p . 5
ushkom
Помогите подправить модуль UserBox под php 8.1 и dle 17?
Сегодня, 00:55
UserBox после лечения работает исправно, не работает второй плагин, который передает параметры UserBox. Точнее не работает его кэш, хотя в dle 15 работал. Так же не работает кэш в новом плагине который я написал, кеш прописывал аналогично. Кто может подсказать в чем проблема, буду весьма благодарен.
Код плагина который работал в dle 15 и не работает кэш сейчас:
Для просмотра содержимого спойлера, перейдите к выбранному событию.
ushkom | Где я допускаю ошибку в кэше? 15
ushkom
Где я допускаю ошибку в кэше?
Сегодня, 00:55
Кэш перестал работать и в другом плагине, который работал в dle15, думаю ошибка или в версии php или в dle, не могу понять в чем дело.
Код плагина который работал в dle 15 и не работает кэш сейчас:
Для просмотра содержимого спойлера, перейдите к выбранному событию.
ushkom | Помогите подправить плагин (Транслит тег . 11
ushkom
Помогите подправить плагин (Транслит тегов от LazyDev) под php 8.1 и dle 17?
Сегодня, 00:37
Вы меня совсем не грамотным считаете, не хочу обидеть, но по вашим коментам именно так. У меня выделенный сервер, в логах ничего нет, скорее всего так как работает ajax, я и спрашивал, можно ли как то вывести ошибку. Я смотрю и в скрипт и на свою работу, читаю в сети а потом задаю вопросы здесь, а вы меня посылаете опять читать доки которые я проштудировал. Раньше этот сайт лучше был, помогали обучатся. Вы бы прямо сказали, дай денег, я исправлю. Дело в том что сам хотел разобраться, но понял что у вас помощи не добиться. Я плачу за дополнения которые сам не в силах сделать, но суть другая! Вы пишите тону текста и в большинстве случаев там нет ничего полезного. Извините если обидел, не хотел, но считаю, если хотите помочь, помогайте, заработать, так и пишите. Спасибо за помощь!
TeraMoune | Помогите подправить плагин (Транслит тег . 11
TeraMoune
Помогите подправить плагин (Транслит тегов от LazyDev) под php 8.1 и dle 17?
Вчера, 15:51
Ну вот как раз в логах и увидеть, но только вам должно быть известно где они находятся и записываются ли, узнавайте у хостинга если используете, или ройтесь в php,mysql,apache и других конфигах серверного по на предмет где находятся логи. У всех по разному, у хостингов обычно где-то в панели управления, у специального ПО для развёртывания серверов должны быть так же разделы. А так всё описывается в конфигурационных файлах каждого модулях.
Скрипты не всегда ругаются ошибками. Но если бы была ошибка думаю и процесс не завершился бы. И вы бы это заметили.
Иногда эти неявные ошибки нужно искать самостоятельно. Учиться отлаживать код и всё такое. По другому это не делается.
ushkom | Помогите подправить плагин (Транслит тег . 11
ushkom
Помогите подправить плагин (Транслит тегов от LazyDev) под php 8.1 и dle 17?
Вчера, 14:41
А как можно увидеть ошибку, вроде лога, при перестроении, это же ajax? Чтоб понять на что ругается скрипт. Спасибо
TeraMoune | Помогите подправить плагин (Транслит тег . 11
TeraMoune
Помогите подправить плагин (Транслит тегов от LazyDev) под php 8.1 и dle 17?
Вчера, 06:35
могу сбрость плагин, может посмотрите и в нем добавите комментарий
В этом нет никакой необходимости, повторюсь, перестроение публикаций не зависит в плагине от версии (по крайней мере не в промежутке заявленной версии и последней). Ровно как обсуждаемые изменений никак между собой не связаны и повлиять на работу перестроения никак не могли.
Смысла мне что-то смотреть там когда я качал плагин с первоисточника и там код такой же как и у вас сейчас и ровно тот же который вы опубликовали.
За перестроение только же rebuild.php отвечает?
ushkom | Помогите подправить плагин (Транслит тег . 11
ushkom
Помогите подправить плагин (Транслит тегов от LazyDev) под php 8.1 и dle 17?
Вчера, 01:28
Ну не мистика же, отключаю плагин или эту правку, перестроение работает, с ней нет!
Если вы не против, могу сбрость плагин, может посмотрите и в нем добавите комментарий, я не гуру, может упустил что? За перестроение только же rebuild.php отвечает?