Успадкування

У CSS успадкування контролює те, що відбувається, коли на елементі не задано значення властивості.

Властивості CSS можна поділити на два різновиди:

Зверніться до визначення властивостей CSS, аби дізнатися, чи успадковується усталено конкретна властивість ("Успадковується: так"), чи ні ("Успадковується: ні").

Успадковані властивості

Коли для успадкованої властивості на елементі не було задано значення, елемент отримує обчислене значення цієї властивості з батьківського елемента. Лише кореневий елемент документа отримує початкове значення, доступне в описі властивості.

Типовий приклад успадкованої властивості – властивість color. Розгляньмо наступні правила стилю та розмітку:

p {
  color: green;
}

<p>Цей абзац містить <em>виділений текст</em>.</p>

Слова "виділений текст" будуть зеленими, адже елемент em успадкував значення властивості color від елемента p. Він не отримує початкового значення властивості (котре є кольором, що використовується на кореневому елементі, коли сторінка не задає кольору).

Неуспадковані властивості

Коли для неуспадкованої властивості на елементі не було задано значення, елемент отримує початкове значення цієї властивості (задане в її описі).

Типовий приклад неуспадкованої властивості – властивість border. Розгляньмо наступні правила стилю та розмітку:

p {
  border: medium solid;
}

<p>Цей абзац містить <em>виділений текст</em>.</p>

Слова "виділений текст" не матимуть обрамлення (адже початкове значення border-style – none).

Примітки

Ключове слово inherit дає розробникам змогу явно задавати успадкування. Воно працює і для успадкованих, і для неуспадкованих властивостей.

Контролювати успадкування всіх властивостей водночас можна за допомогою властивості-скорочення all, котра застосовує своє значення до всіх властивостей. Наприклад:

p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

Це повертає стиль властивості font абзацу до усталеного значення користувацького агента, якщо немає користувацької таблиці стилів, у випадку чого використовується значення з неї. А потім цей код подвоює розмір шрифту та застосовує font-weight зі значенням "bold".

Відкидання успадкування, приклад

Якщо у попередньому прикладі з border явно задати успадкування за допомогою inherit, вийде таке:

p {
  border: medium solid;
}

em {
  border: inherit;
}

<p>Цей абзац містить <em>виділений текст</em>.</p>

Помітне додаткове обрамлення навколо слів "виділений текст".

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.