Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

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

В этом уроке мы поговорим с вами о наследовании в CSS, хотя я уверен, что многие из вас уже догадались, что это такое и как оно работает. Да, в предыдущих занятиях мы уже не раз сталкивались с вами с эффектом наследования, причем не только сталкивались, но и успешно им пользовались. И все же есть у этого эффекта несколько таких тонкостей, которые возможно будут для вас определенным открытием, но обо всем по порядку, итак.

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

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

Пример наследования в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Наследование</title>
  <style type="text/css">
   body {
    color: green; /* цвет текста */
    text-align: center; /* ставим текст по центру */
    border: 2px blue solid; /* стили рамки */
   }
  </style>
 </head>
 <body>
  <p>Изучаем <em>наследование в CSS</em>.</p>
  <p>И получаем от этого удовольствие. :)</p>
 </body>
</html>

Результат в браузере

Изучаем наследование в CSS.

И получаем от этого удовольствие. :)

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

А теперь скажите мне, вам ничего не показалось странным в этом примере? Нет? Тогда вопрос. Как это так получилось, что в справочнике по CSS указано, что text-align не может применяться к тегу <BODY>, а мы его указали в селекторе ссылающемся на него? Ошибка? Вовсе нет! Просто запомните раз и навсегда — абсолютно любое свойство CSS можно указывать для абсолютно любого HTML-элемента. А вот будет ли каждое из этих свойств применено к самому элементу и его потомкам (в результате наследования) или нет — как раз и будет зависеть от правил языка CSS.

В нашем примере выравнивание текста по центру наследуется всеми элементами внутри тела документа без исключения, но вот применится оно только к тем, которые его поддерживают, у нас это теги <P>. Чтобы вы получше запомнили этот момент, я вам покажу еще два небольших примера.

Пример 1

<style type="text/css">
 body {
  caption-side: bottom;
 }
</style>

Пример 2

<style type="text/css">
 caption {
  caption-side: bottom;
 }
</style>

Результаты этих примеров будут абсолютно одинаковыми — заголовки всех таблиц на странице окажутся под таблицами. Просто в первом случае свойство caption-side будет унаследовано тегами <CAPTION> от «сами знаете чего», а во втором оно будет применено непосредственно к каждому заголовку в отдельности. Ни на какие другие элементы данное свойство воздействовать не будет, ведь в спецификации CSS сказано, что оно может применяться только к табличным заголовкам.

Наследование относительных значений в CSS

Если вы используете относительные единицы измерения в значениях каких-то свойств, и если эти свойства наследуются, то имейте в виду, что элементы-потомки будут наследовать от предка не то значение, которое вы указали, а то, которое было вычислено браузером изначально. В общем-то, все это очень похоже на HTML, так что не будет для вас чем-то необычным. Смотрим пример.

Пример наследования относительных значений

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Относительные значения в наследовании</title>
  <style type="text/css">
   body {
    font-size: 20px; /* размер шрифта страницы */
   }
   div {
    font-size: 120%; /* размер шрифта у DIV */
   }
  </style>
 </head>
 <body>
  <div>
   <p>Текст размером 24px.</p>
  <div>
 </body>
</html>

Результат в браузере

Текст размером 24px.

В этом примере у элемента <DIV> установлен размер шрифта в 120%, что в данном случае соответствует 24px. А вот параграфу не задано свойство font-size, он просто наследует размер шрифта от предка. И это не 120%, а те самые 24 пикселя, которые браузер высчитал изначально. И любые потомки параграфа также будут наследовать эти 24px, если конечно для них вы не установите размер шрифта отдельно.

Что такое значение inherit в CSS?

Практически каждое свойство CSS имеет в своем арсенале значение inherit, которое означает, что к данному HTML-элементу будет применено свойство с тем же значением, что и у его родителя. Иногда это бывает очень удобно, так как, задав один раз единое оформление нескольким элементам, в будущем не надо будет править стили каждого из них, чтобы это оформление изменить.

Пример использования значения inherit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Значение inherit</title>
  <style type="text/css">
   .kvadr {
    width: 140px; /* ширина блока */
    height: 140px; /* высота */
    border: 2px green solid; /* стили рамки */
   }
   .kvadr > div {
    width: 120px; /* ширина */
    height: 120px; /* высота */
    border: inherit; /* стили рамки наследуются от родителя */
   }
   .kvadr > div > div {
    width: 100px; /* ширина */
    height: 100px; /* высота */
    border: inherit; /* наследование стилей рамки */
   }
  </style>
 </head>
 <body>
  <div class="kvadr">
   <div>
    <div></div>
   </div>
  </div>
 </body>
</html>

Результат в браузере

В этом примере достаточно изменить стили рамки у блока с class="kvadr", чтобы у остальных блоков они также изменились.

Internet Explorer 6.0 и 7.0 не понимают значение inherit, поэтому в них вы результат примера не увидите.

Домашнее задание.

Делать домашнее задание по наследованию я не вижу смысла, так как тут все достаточно очевидно. А давайте-ка лучше проверим ваши теоретические знания CSS. Только, пожалуйста, не бегите сразу к справочнику, попробуйте для начала порыться в своей головке. А уж если не получится, то тогда и к справочнику не грех обратиться. И самое главное — не переживайте по этому поводу, большинство верстальщиков (если вообще не все) не помнят весь CSS наизусть, так как этого не требуется.

  1. Что такое поля и отступы элементов, чем они отличаются, и какие свойства их изменяют?
  2. Какие свойства изменяют ширину и высоту элементов? Подумайте хорошенько.
  3. Чем отличаются классы CSS от идентификаторов, а псевдоклассы от псевдоэлементов.
  4. Какое свойство изменяет способ позиционирования элементов и чем отличается абсолютное позиционирование от относительного.
Псевдоэлементы← Содержание →Приоритеты стилей