Спадкування називається перенесення правил форматування для елементів, що знаходяться всередині інших. Такі елементи є дочірніми, і вони успадковують деякі стильові властивості своїх батьків, усередині яких розташовуються.
Розберемо спадкування на прикладі таблиці. Особливістю таблиць можна вважати строгу ієрархічну структуру тегів. Спочатку варто контейнер <table> всередині якого додаються теги <tr> , а потім йде тег <td> . Якщо в стилях для селектора TABLE задати колір тексту, то він автоматично встановлюється для вмісту осередків, як показано в прикладі 18.1.
Приклад 18.1. Спадкування параметрів кольору
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Спадкування </title>
<style>
TABLE {color: red; /* Колір тексту */ background: #333; /* Колір фону таблиці */ border: 2px solid red; /* Червона рамка навколо таблиці */ } </style>
</head>
<body>
<table cellpadding="4" cellspacing="0">
<tr>
<td>
Комірка 1 </td>
<td>
Комірка 2 </td>
</tr>
<tr>
<td>
Комірка 3 </td>
<td>
Комірка 4 </td>
</tr>
</table>
</body>
</html>
В даному прикладі для всієї таблиці встановлений червоний колір тексту, тому в осередках він також застосовується, оскільки тег < ; td> успадковує властивості тега <table> . При цьому варто розуміти, що не всі стильові властивості успадковуються. Так, border задає рамку навколо таблиці в цілому, але ніяк не навколо осередків. Аналогічно не успадковується значення властивості background . Тоді чому колір фону у осередків в даному прикладі темний, раз він не успадковується? Справа в тому, що у властивості background в якості Значення за умовчанням виступає transparent, т. е. прозорість. Таким чином колір фону батьківського елементу « проглядає » крізь дочірній елемент.
Щоб визначити, успадковується значення стильової властивості чи ні, потрібно заглянути в довідник по властивостям CSS і подивитися там. Підключати свою інтуїцію в подібному випадку марно, може і підвести.
Спадкування дозволяє задавати значення деяких властивостей одного разу, визначаючи їх для батьків верхнього рівня. Припустимо, потрібно встановити колір і шрифт для основного тексту. Досить скористатися селектором BODY, додати для нього бажані властивості, і колір тексту усередині абзаців та інших текстових елементів зміниться автоматично (приклад 18.2).
Приклад 18.2. Параметри тексту для всієї веб-сторінки
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Спадкування </title>
<style>
BODY {font-family: Arial, Helvetica, sans-serif; /* Гарнітура шрифту */ color: navy; /* Синій колір тексту */ } </style>
</head>
<body>
<p>
Колір тексту цього абзацу синій. </p>
</body>
</html>
В даному прикладі рубаний шрифт і колір тексту абзаців встановлюється за допомогою селектора BODY . Завдяки спадкоємства вже немає потреби ставити колір для кожного елемента документа окремо. Однак бувають варіанти, коли потрібно все-таки змінити колір для окремого контейнера. В цьому випадку доведеться перевизначати потрібні параметри явно, як показано в прикладі 18.3.
Приклад 18.3. Зміна властивостей успадкованого елемента
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Спадкування </title>
<style>
BODY {font-family: Arial, Helvetica, sans-serif; /* Гарнітура шрифту */ color: navy; /* Синій колір тексту */ } P.red {color: maroon; /* Темно-червоний колір тексту */ } </style>
</head>
<body>
<p>
Колір тексту цього абзацу синій. </p>
<p class="red">
А у цього абзацу колір тексту вже інший. </p>
</body>
</html>
В даному прикладі колір першого абзацу успадковується від селектора BODY, а для другого встановлений явно через клас з ім'ям red .