Наследование 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 наизусть, так как этого не требуется.
- Что такое поля и отступы элементов, чем они отличаются, и какие свойства их изменяют?
- Какие свойства изменяют ширину и высоту элементов? Подумайте хорошенько.
- Чем отличаются классы CSS от идентификаторов, а псевдоклассы от псевдоэлементов.
- Какое свойство изменяет способ позиционирования элементов и чем отличается абсолютное позиционирование от относительного.
| Псевдоэлементы | ← Содержание → | Приоритеты стилей |