Skip to main content

Що таке «успадкування» в CSS? Які властивості типово успадковуються?

CSSJunior~1 хв читання
Запропонувати правку

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

Як це працює

Приклад:

html
<div style="color: blue;"> <p>Текст всередині абзацу</p> </div>

Тег <p> сам не має color, але успадкує його від <div>, і текст буде синім.

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

Успадковуються властивості, пов'язані переважно з текстом і шрифтами, наприклад:

  • color, колір тексту
  • font-family, шрифт
  • font-size, розмір шрифту
  • font-style, font-weight, накреслення і жирність
  • line-height, міжрядковий інтервал
  • text-align, вирівнювання тексту
  • visibility, видимість
  • cursor, стиль курсора
  • list-style, оформлення списків
  • letter-spacing, word-spacing, відстань між буквами і словами

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

Більшість властивостей, пов'язаних із розмірами, відступами, рамками, позиціонуванням і фоном, не успадковуються:

  • margin, padding, border, width, height, background тощо.

Як керувати успадкуванням

CSS дозволяє керувати цим явно за допомогою значень:

  • inherit, примусово успадкувати
  • initial, скинути до типового значення
  • unset, успадкувати, якщо властивість зазвичай успадковується; інакше скинути

Приклад:

css
p { background-color: inherit; }

Підсумок: успадкування робить оформлення передбачуваним і економить код, дочірні елементи автоматично приймають частину візуальних властивостей батьків, особливо текстових.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку