Не наследовать стиль css

Удобное свойство для сброса всех стилей сразу.

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

Кратко

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

Свойство all сбрасывает значения всех CSS-свойств, кроме direction и unicode — bidi .

Как пишется

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

У all 4 возможных значения:

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

Читайте также: Python date this month

Значение revert

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

Действие значения revert зависят от источника стилей.

Браузерные стили: действие аналогично unset .
Пользовательские стили: откатываемся по каскаду к браузерным стилям (словно пользовательских для этого свойства не существует).
Авторские стили: откатываемся по каскаду к пользовательским стилям (словно авторских для этого свойства не существует).

Пример

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

Для начала создадим базовый блок с контентом.

   Предисловие о многоножках.   div class="container"> span>Предисловие о многоножках. span> p class="paragraph"> p> div>

 .container  font-size: 30px;> .container  font-size: 30px; >

Сбросим у параграфа стили при помощи: all : initial; . Ещё зададим color : white; , иначе цвет текста сбросится до чёрного и текст станет не читаем на тёмном фоне.

 .paragraph  all: initial; color: white;> .paragraph  all: initial; color: white; >

Все значения сбросились до дефолтных. Больше всего бросаются глаза изменения font — family , font — size , display .

Поддержка

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

all поддерживается всеми современными браузерами (Can I Use).

Источник

Наследование (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: inherit; background: #E6E2FF;">inherit

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

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

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

  color: initial;

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

 .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 Изменить текст:

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

допустим у меня по наследованию к тегу div добавляются какие-то свойства. Мне необходимо, чтобы определенный div не наследовал никакие свойства. Как это можно сделать?

Ссылка на комментарий

Поделиться на других сайтах

2 ответа на этот вопрос

Присоединяйтесь к обсуждению

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

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник

Не наследовать стиль css