Отключить style в css

Наследование (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-свойство?

Добрый день, нужно удалить CSS свойство, как это можно сделать?

Хочу удалить left: 0; и поставить right: 0;

Как это можно реализовать?

p.s если поставить просто right: 0; то объект читает left и забивает на right.

Егор Рублёв: Встречный вопрос: а зачем? Вы просто сбрасываете свойство на значение по умолчанию и получаете эффект, как будто бы и не устанавливали его.

С любыми свойствами так. Смотрите в доках, какое стоит значение по умолчанию, и ставите его.
Initial — штука интересная, но пока не работает везде.

Сергей: ну мне в принципе нет разницы, а вот лишний код же на выходе будет?
left: auto; = 11 символов, да и не люблю грязь.

Сброс конкретного свойства установленного через element.style.property или через атрибут style в html:

element.style.property = void 0; //void 0 - это оператор возвращающий безопасный undefined

А вообще лучше не устанавливать свойства через атрибут style или через element.style (что равносильно), манипулируйте классами

Источник