Как работает наследование
Каждый элемент в документе HTML будет наследовать все наследуемые свойства своего предка, за исключением корневого элемента (html), который не имеет предка.
Так или иначе унаследованные свойства будут зависеть также от других вещей, как вы увидите позже, когда будет рассматриваться каскадирование. Также как голубоглазая мать может иметь кареглазого сына, если отец кареглазый, унаследованные свойства в CSS могут быть переопределены.
Пример наследования
Скопируйте следующий документ HTML в новый файл в текстовом редакторе и сохраните его как inherit.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inheritance</title>
</head>
<body>
<h1>Heading</h1>
<p>A paragraph of text.</p>
</body>
</html>
Если открыть этот документ в Web-браузере, то вы увидите достаточно скучный документ, выведенный согласно используемому по умолчанию в браузере оформлению.
Создайте новый пустой файл в текстовом редакторе, скопируйте в него показанное ниже правило CSS, и сохраните файл как style.css в том же месте, что и файл HTML.
html {
font: 75% Verdana,sans-serif;
}
Соедините таблицу стилей с документом HTML, вставляя следующую строку перед тегом </head>.
<link rel="stylesheet" type="text/css" href="style.css">
Сохраните модифицированный файл HTML и перезагрузите документ в браузере. Шрифт изменится с используемого по умолчанию в браузере (часто Times или Times New Roman) на Verdana. Если шрифт Verdana не установлен в компьютере, то текст будет выводиться используемым по умолчанию шрифтом без засечек, определенным в настройках браузера.
Размер текста станет также меньше, только три четверти от того, что было в нестилизованной версии.
Определенное нами правило CSS применимо только к элементу html. Мы не определили никаких правил для заголовков или параграфов, тем не менее весь текст теперь выводится шрифтом Verdana размером 75% от размера по умолчанию. Почему? В связи с наследованием.
Свойство font является сокращенным свойством, которое задает целый ряд связанных с текстом свойств. Мы определили только два из них — размер шрифта и семейство шрифта — но это правило эквивалентно следующему:
html {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 75%;
line-height: normal;
font-family: Verdana,sans-serif;
}
Все эти свойства наследуются, поэтому элемент body будет наследовать их из элемента html, а затем передавать дальше своим потомкам — заголовкам и параграфам.
Но подождите секунду! Происходит что-то подозрительное с наследованием размера шрифта, не так ли? Размер шрифта элемента html задается как 75%, но 75% от чего? И не будет ли размер шрифта тела (body) составлять 75% размера шрифта его предка, а размеры шрифта заголовка и параграфа не будут ли составлять 75% от размера шрифта элемента body?
Наследуемое значение не является определенным значением — значением, написанным в таблице стилей — а является так называемым вычисляемым значением. Вычисляемое значение будет, в случае размера шрифта, абсолютным значением, измеренным в пикселях. Для элемента html, который не имеет элемента предка, из которого он наследует, значение процента для размера шрифта связано с используемым по умолчанию размером шрифта, заданным в браузере. Большинство современных браузеров задают по умолчанию размер шрифта как 16px. 75% от 16 равно 12, поэтому вычисленное значение для размера шрифта элемента html будет, вероятно, 12px. И именно это значение наследуется в теле и передается дальше в заголовок и параграф.
(Размер шрифта заголовка будет больше, так как браузер применяет некоторое свое собственное встроенное оформление. Смотрите обсуждение каскадирования ниже.)
Добавьте еще два объявления в правило в своей таблице стилей CSS:
html {
font: 75% Verdana,sans-serif;
background-color: blue;
color: white;
}
Сохраните файл CSS и перезагрузите документ в браузере.
Теперь фон стал ярко голубым, а весь текст белым. Правило применяется к элементу html — всему документу — фон которого будет голубым. Белый цвет переднего плана наследуется элементом body и передается всем наследникам body — в данном случае заголовку и параграфу. Они не наследуют фон, но он будет по умолчанию прозрачным, поэтому окончательный визуальный результат будет белый текст на синем фоне.
Добавьте еще одно новое правило в таблицу стилей, сохраните и перезагрузите документ:
h1 {
font-size: 300%;
}
Это правило задает размер шрифта заголовка. Указанный процент применяется к наследованному размеру шрифта — 75% от размера по умолчанию в браузере, который по нашему предположение будет 12px — поэтому размер заголовка будет 300% от 12px, или 36px.