Отменить наследование стиля css 2020 год

Наследование (inherit initial unset) | CSS

Наследование CSS-свойств

Большинство свойств не передают дочернему элементу свои значения от родителя

У некоторых значение по умолчанию подстраивается под родителя

И лишь немногие (см. список свойств CSS2, если в графе «Inherited» указано «yes») наследуют значение свойства от родителя

Свойство, меняющее все стили CSS, кроме direction и unicode-bidi

all: initial | inherit | unset;

unset

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

inherit

как у родителя

initial

по умолчанию

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

CSS наследование стилей от родителя: inherit

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

inherit передаёт не конечное значение, а то, что указано в стилях родителя

Пример 1: в чём разница между width: inherit; и width: 100%;

Пример 2: max-height: 100%; не работает

Пример 3: как сделать дубликат стилей CSS родителя

inherit переносит значение непосредственного родителя, а не определённого position

Копируется всё, даже то, что не указано разработчиком в стилях у родителя

initial CSS: отменить наследование

Для того, чтобы узнать начальные значения свойств, которые зависят от браузера, таких как color и font-family , можно применить initial

Пример 1: запретить наследование свойства

Пример 2: убрать свойство для более узкого селектора

initial позволяет сбросить все стили, включая те, что браузер задал для тега по умолчанию

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

unset CSS: сбросить стиль браузера

Поведение стандартное, только все теги становятся обезличенными, словно их подстригли под одну гребёнку. То есть как и у initial , блочные элементы станут inline .

Пример: обнулить все возможные стили input

Похожий эффект: Атрибут contenteditable

Сводная таблица универсальных ключевых слов

Домашнее задание: в комментариях предложить свой пример использования значений 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

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

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

Зачастую, если у ребёнка родители чудаки, то он от них не отстает, или как говорится: «яблоко от яблони недалеко падает». Что касается наследования в CSS, то это не что иное, как метод тиражирования различных CSS свойств, относящихся к одному элементу страницы на вложенные в него элементы (потомки).

Давайте сразу перейдем к примеру и рассмотрим наследование стилей на примере HTML элемента , который определяет видимое содержимое страницы.


Рис.28 Схема наследования стиля в CSS.

Создадим стиль для элемента , который будет изменять цвет и тип шрифта:

В этом примере для элемента мы установили зеленый цвет текста и тип шрифта Arial. CSS свойства color и font-family наследуются, а это означает, что эти свойства будут применяться и на вложенные элементы внутри (на все его потомки).

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

Результат нашего примера:

Рис. 29 Пример наследования стиля в CSS.

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

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

Вы будете в дальнейшем использовать эти особенности CSS для упрощения Вашей работы по созданию стилей для элементов документа.

Ограничения и нюансы наследования

Ограничения:

  • Не наследуются свойства, которые влияют на размещение элементов на странице, свойства отвечающие за внешние и внутренние отступы элемента, свойства отвечающие за границы элементов. Все эти свойства мы подробно рассмотрим далее в учебнике. Повторюсь, что вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS.
  • Я хочу, чтобы вы поняли, что многие свойства не наследуются по объективным причинам, представьте, что мы создаем границу для родительского элемента и после этого все потомки по этой логике должны унаследовать это свойство, что выглядело бы абсурдно и напротив увеличивало бы работу по созданию стилей (их отмене, или сбросу).

Нюансы:

Все современные браузеры используют собственные встроенные CSS стили для HTML элементов, эти стили, при необходимости, вы можете посмотреть у конкретного элемента на сайте в справочнике HTML (значение CSS по умолчанию). В следующей статье мы научимся обнулять встроенные стили для отображения ваших страниц одинаково во всех популярных браузерах.

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

Результат нашего примера:

Рис. 29а Нюансы наследования стилей.

При возникновении конфликта побеждает сильнейший, в CSS это, как правило, явно определенный стиль. Откроем инструменты разработчика (для Chrome это F12 ). Обратите внимание какие встроенные в браузер CSS свойства (user agent stylesheet) имеет любая ссылка (any link) в документе. Для неё заданы следующие стили: цвет текста синий (-webkit-link — значение браузера по умолчанию), декорирование текста (нижнее подчеркивание) и определено, что браузер устанавливает курсор автоматически (значение auto CSS свойства cursor).

Такие конфликты между стилями всегда разрешает браузер, а по каким правилам определяет, кому отдает приоритет и как он в том, или ином случае себя должен повести, на чью сторону встать, определяется правилами каскадности. Подробнее о правилах каскадности мы поговорим в следующей статье учебника.

Вопросы и задачи по теме

Перед тем как перейти к следующей статье ответьте на следующие вопросы:

    Что представляет из себя механизм наследования в CSS?

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

Вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS.

При необходимости, вы можете посмотреть их на сайте в справочнике HTML выбрав конкретный элемент.

enepomnyaschih

Супер-пупер школа программирования

Исследование идеального UI Framework’а, программирование игр, веб-программирование, задачи и решения

Один мой хороший друг и коллега Юра Поздняков ( ypozdnyakov ) подсказал решение для проблемы, опубликованной в статье Проблема наследования CSS стилей. Как оказалось, я не до конца понимал суть работы CSS-селекторов, и Юра открыл мне глаза. Оказывается, что всякий селектор, который выбирает некоторый элемент, не выбирает его дочерние элементы. Мне так всегда казалось, потому что когда я просматривал некий элемент в файрбаге, то в списке CSS-правил элемента фигурировали и селекторы родительских компонентов. На самом деле, стиль родительского компонента будет применен к дочернему лишь в том случае, если его значение в дочернем компоненте равно inherit. Вы скажете: «Ха! Так это ж очевидно!» Я понимаю, что это очевидно, но пока ты это сам не прочувствуешь, пока сам с этим не столкнешься, это будет лежать в твоей голове бессмысленным грузом.

О наследовании CSS

Вот пример, который полностью перевернул мое представление о CSS:

Как вы думаете, каким шрифтом будет выведена ссылка? Если исходить из понятия «Какой из селекторов круче?», то шрифт будет Comic Sans MS. Очевидно, первый селектор круче второго, потому что в нем целых два класса против одного. Но на самом деле правильный ответ — Arial! Почему? Потому что первый селектор выбирает только лишь компонент

Как же так? А почему же тогда, если удалить второе CSS-правило, то шрифт будет Comic Sans MS, ведь этот селектор не выбирает дочерний компонент?

Все дело в том, что по умолчанию в любом браузере шрифт всех ссылок установлен в значение inherit. Последний приведенный CSS-файл эквивалентен следующему:

Так как ссылка наследует шрифт родителя, то мы и получаем шрифт Comic Sans MS. Честно, когда я это впервые понял, мой мозг просто взорвался =)

Решение

Решение проблемы наследования CSS-стилей, по нашему с Юрой мнению, заключается во внедрении стандарта построения DOM и CSS-файлов. Ниже перечислены правила, описывающие данный стандарт:

1. Не использовать !important

Все это знают, но все равно делают. Делают, потому-что так проще. Когда какой-то стиль в течение 20 минут не хочет прикручиваться куда надо, обычно сдаются и ставят этот проклятый !important. Но это плохо, потому что !important-important нету. И если этот самый !important испортит жизнь другим компонентам, то справиться с этим будет еще сложнее. Лучше поступить так: внимательно всмотреться в CSS-правила и найти-таки несоответствие стандартам, перечисленным в данной статье. Это несоответствие с большой долей вероятности и будет служить причиной проблемы.

2. Ни один CSS-селектор не должен содержать записи вида #myid

По той же самой причине, по которой нельзя использовать !important, нельзя использовать и селекторы по идентификаторам. Ибо они всегда круче. У них сильно высокий приоритет. Кроме того, вы не можете дать разным компонентам один и тот же идентификатор, поэтому подобные селекторы не дают возможности использовать CSS в полной мере. Лучше прикрутить к компонентам какие-то классы, и заменить все селекторы по идентификаторам селекторами по классам.

3. Правильно именовать классы

Для каждого компонента ввести уникальный класс x, и классы всех дочерних элементов определять как x-y. Пример:

Это гарантирует, что все классы имеют уникальные имена.

4. CSS-файл приложения должен для всех тегов переопределить стили, использующие по умолчанию значение inherit

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

5. Все остальные селекторы строятся только из классов и псевдоклассов

Можно, при желании, добавлять еще класс самого компонента. В итоге, получим примерно следующее:

Это гарантирует, что стили будут применяться ровно к тем компонентам, о которых мы говорим. Тем самым решается проблема приоретизации.

Важно! Не допускайте селекторов вида:

Это испортит вам всю жизнь. Данный стиль будет прикручиваться ко всем дочерним ссылкам и перебивать их своим высоким приоритетом. Используйте такие селекторы лишь в том случае, если совершенно уверены, что внутри .application-main-panel не может быть вложенных компонентов произвольного вида.

6. (опционально) Для компонентов определить стили по умолчанию

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

Заключение

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

Я тоже постараюсь ближайшее время посвятить переверстке своего проекта, поскольку неразбериха в CSS файлах уже неоднократно давала о себе знать. По ходу дела буду вносить коррективы в данную статью, если предоставленные выкладки содержат ошибки или недоработки.

Отменить наследование (сбросить) стиль CSS определенного элемента?

Хорошо, у меня есть прекрасная сеть с ее стилями в CSS и всем остальным

Но теперь я нашел проблему, я хочу, чтобы ОДИН список был девственным, без какого-либо унаследованного стиля.

Я знаю, что могу сделать это, просто задав ему style=»(. )» чтобы он перезаписывал унаследованный стиль, но есть ли какая-нибудь инструкция / трюк / что-то, что можно сделать без этого?

4 ответа

Спецификация CSS 3 Cascading and Inheritance Level 3 предоставляет возможность сброса всех свойств одновременно. Это достигается путем использования свойства all сокращений со значением initial или unset зависимости от того, нужно ли сбрасывать унаследованные свойства.

Обратите внимание, что они не имеют ничего общего со значениями браузера по умолчанию.

Эта функция доступна в Firefox 27+, Chrome 37+ и Opera 24+.

Пока функция не будет широко реализована, вы можете использовать классы «пространства имен». Например, чтобы отделить стили макета от стилей контента, класс, подобный content можно использовать в качестве пространства имен для всех стилей контента.

Эта проблема решается лучше всего, избегая ее с самого начала. Я стараюсь свести к минимуму контекстные (или потомковые) селекторы и избегаю использования имен тегов в качестве селекторов. Вместо этого я использую классы, чтобы мои HTML-элементы ( ,

,

    , и т. Д.) Всегда выглядели так, как будто они не были стилизованы, независимо от контекста / его родительского элемента. ,

В вашем случае, я думаю, вы можете перезаписать только унаследованные стили, как вы упомянули, с помощью атрибута inline-style или с помощью !important .reset или, что еще лучше, создать класс .reset :

Все решения, упомянутые выше, имеют недостатки, поэтому вам нужно будет выбрать битву.

Вы можете попробовать этот http://cleanslatecss.com/, он полностью сбрасывает целевой элемент, это только css, нет js, вам просто нужно добавить класс к цели, и все готово.

Проблема, которую я обнаружил в других ответах, заключается в том, что никто не использовал !important так что может случиться так, что сброс не будет применен к элементу, все решается с помощью cleanslate, который сделает это за вас.

Shadow DOM

Функциональные возможности Shadow DOM v1 настоящее время (постоянно подверженные изменениям) имеют растущую поддержку , предлагая множество возможностей, в том числе CSS с областями видимости .

Shadow DOM v0 был реализован в Chrome / Opera, но другие производители браузеров внедряют v1 .
Статус MS Edge: на рассмотрении
Статус Firefox: в разработке

Передайте наиболее полезную функцию теневого DOM — CSS:

  • Селекторы CSS с внешней страницы не применяются внутри вашего компонента.
  • Стили, определенные внутри, не кровоточат. Они ограничены элементом хоста.

Селекторы CSS, используемые внутри теневого DOM, применяются локально к вашему компоненту. На практике это означает, что мы можем снова использовать общие имена идентификаторов / классов, не беспокоясь о конфликтах в других местах на странице. Более простые CSS-селекторы — лучшая практика в Shadow DOM. Они также хороши для производительности.

Ниже мы attachShadow к новому createElement( «div» ) к которому мы применяем style.all = «unset» чтобы лишить style.all = «unset» all правила, применяемые к остальным элементам div document .

Затем мы заполняем наш shadow-root любым содержимым, которое нам нравится, и предоставляем любые желаемые стили, прежде чем appendChild( «new_div» ) наш контент в body .

Результат — стилистически изолированный контент.

Читать еще:  Расходы на похороны наследодателя 2020 год
Ссылка на основную публикацию
Adblock
detector
unset

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

inherit

как у родителя

initial

по умолчанию