0Pricing
CSS Academy · Урок

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

Изучите правила наследования CSS и используйте свойство all для сброса унаследованных стилей.

«Наследование и свойство all» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое наследование

Некоторые свойства CSS автоматически передают своё вычисленное значение дочерним элементам. Это называется наследованием. Благодаря ему не нужно записывать одно и то же правило для каждого элемента компонента.

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

Обычно наследуются свойства типографики и текста:

  • font-family, font-size, font-weight, font-style
  • color
  • line-height
  • letter-spacing
  • text-align
  • visibility
  • пользовательские свойства CSS

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

Обычно NOT наследуются свойства блочной модели и компоновки:

  • margin, padding, border
  • width, height
  • background
  • display, position
  • box-shadow, transform

Ключевое слово inherit

Явно включайте наследование с помощью ключевого слова inherit — это полезно для элементов форм, которые по умолчанию не наследуют шрифт:

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

Ключевое слово initial

Ключевое слово initial сбрасывает свойство до его исходного значения по умолчанию в браузере, определённого спецификацией CSS, игнорируя наследование и стили пользовательского агента.

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

Ключевое слово unset

unset зависит от контекста:

  • для наследуемых свойств действует как inherit
  • для ненаследуемых свойств действует как initial

Фактически оно «сбрасывает» свойство в его естественное состояние.

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

Ключевое слово revert

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

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

Свойство all

Свойство all — это сокращённая запись, которая одновременно применяет ключевое слово ко всем свойствам CSS, кроме direction и unicode-bidi.

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

Практическое применение all: initial

Используйте all: initial, когда нужно создать полностью изолированный компонент, на который не влияют глобальные стили или стили родителя:

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

Шаблон all: unset

Удалите стили кнопки браузера для пользовательских кнопок, не перечисляя все соответствующие свойства:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

Наследование и пользовательские свойства

Пользовательские свойства CSS по умолчанию наследуются. Именно это делает их такими мощными: переменная, заданная в :root, доступна повсюду. Используйте @property { inherits: false }, чтобы пользовательское свойство не наследовалось.

Быстрая проверка

Какое ключевое слово сбрасывает свойство до значения по умолчанию пользовательского агента браузера, а не до начального значения из спецификации CSS?

Итоги

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

Часто задаваемые вопросы

Урок «Наследование и свойство all» бесплатный?

Да — полный текст урока «Наследование и свойство all» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Наследование и свойство all»?

Изучите правила наследования CSS и используйте свойство all для сброса унаследованных стилей. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Наследование и свойство all»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Расчёт специфичности: встроенный стиль, ID, класс, элемент
  2. Каскад: источник и порядок
  3. !important: когда и почему не следует использовать
  4. Наследование и свойство all
← Назад к CSS Academy