Как сделать наследование в css
Перейти к содержимому

Как сделать наследование в 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
 
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

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

Описание каждого CSS-свойства говорит наследуется ли оно по умолчанию («Наследуется: да/нет»). Наследование контролирует, что происходит, если значение свойства элемента не определено.

Наследуемые свойства

Когда никакого значения для свойства, которое наследуется, у элемента не установлено, элемент получает вычисленное значение этого свойства от его родителя. Только корневой элемент документа получает начальное значение из описания свойства.

Типичный пример наследуемого свойства color (en-US). Стили:

p  color: green; > 
p>В этом параграфе em>подчёркнутый текстem>.p> 

слова «подчёркнутый текст» станут зелёными, т.к. тег em унаследовал значение свойства color (en-US) от элемента p , а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).

Ненаследуемые свойства

Когда значения свойства элемента, которое не наследуется, не указано(иногда называемое Mozilla — сброшенное свойство), элемент получает начальное значение этого свойства (как указано в описании свойства).

Пример ненаследуемого свойства border . Стили:

p  border: medium solid; > 
p>В этом параграфе em>подчёркнутый текстem>.p> 

у слов «подчёркнутый текст» не будет рамки (т.к. начальное значение border-style (en-US): none ).

Замечание

Ключевое слово inherit позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

Смотрите также

  • CSS документация
  • Ключевые концепции CSS
    • Синтаксис CSS
    • @-правила
    • комментарии
    • специфичность
    • наследование
    • блочная модель
    • режимы компоновки
    • модели визуального форматирования
    • Схлопывание отступов
    • Значения
      • начальные
      • вычисленные
      • используемые
      • действительные

      Found a content problem with this page?

      • Edit the page on GitHub.
      • Report the content issue.
      • View the source on GitHub.

      This page was last modified on 7 авг. 2023 г. by MDN contributors.

      Your blueprint for a better internet.

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

      На прошлом шаге мы задали белый цвет текста для nav , а он применился и для заголовка «Записи в блоге». Почему это произошло? Всё дело в наследовании.

      Наследование в CSS — это механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

      Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том случае, если они где-то явно не переопределены. Например, размер шрифта и его цвет достаточно применить к body , чтобы большинство элементов внутри имели те же свойства. Рассмотрим пример наследования:

      body < font-size: 14px; >nav

      Размер шрифта у всего текста на странице, кроме текста внутри навигации, станет равен 14px. У nav есть своё объявленное значение размера шрифта (18px), и оно будет использоваться вместо наследуемого от body значения (14px). А ещё 18px станет новым наследуемым значением для потомков nav .

      Если на странице из примера будут заголовки, то их размер тоже будет отличаться от 14px. Дело в том, что размер для заголовков тоже кое-где явно задан (и это кое-где мы обсудим в 11 задании). А значит у заголовков есть объявленное значение, которое будет использоваться вместо наследуемого значения.

      Давайте убедимся, что наследование действительно работает. Смените название шрифта для всего body .

      Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 28 февраля цена 17 900 ₽ 22 900 ₽

      Перейти к заданию

      • index.html Сплит-режим
      • style.css Сплит-режим

      Сайт начинающего верстальщика

      Сайт начинающего верстальщика

      Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.

      Моё первое задание — вести дневник и честно писать обо всех своих свершениях.

      Раздел про навыки

      Подвал сайта

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

      Некоторые 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; >      

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

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