We
Study
Together
cat

baner


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

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

Примером наследования свойств могут служить таблицы. Они отличаются строгой иерархической структурой тегов. Вначале следует контейнер <table>, внутри которого добавляются теги строк <tr>, а в них теги ячеек <td>. Если в стилях для селектора <table> задать цвет текста, то он автоматически устанавливается для текста в ячейках.

Еще один пример. Название шрифта, его размер и цвет, назначенные в селекторе <body>, будут распространять свои свойства на все текстовые элементы внутри Web-страницы. Чтобы изменить назначенные в <body> параметры для отдельного элемента, нужно будет предопределить их конкретно в нем при помощи локального стиля.
<html>
<head>
<title>наследование параметров</title>
<style type="text/css">
body {
color: blue;
font-family: Arial, Helvetica, sans-serif
}
p.red {
color: red
}
table {
background: #faf0e6;
border: 2px solid red
}
</style>
</head>
<body>
<p>Цвет текста в этом абзаце синий.</p>
<p class="red">А в этом абзаце красный.</p>
<table cellpadding="4" cellspacing="0">
<tr>
<td>ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
<td>ячейка 4</td>
</tr>
</table>
</body>
</html>


Вот, как это выглядит.

В вышеприведенном HTML-коде, в родительском теге <body> установлен синий цвет текста, поэтому текст синий и в заголовке, и в абзаце. В ячейках таблицы текст тоже синего цвета, поскольку тег <td> наследует свойства тега <table>, а тот, в свою очередь, свойства текста назначенные в <body>.

Но не все стилевые атрибуты наследуются. Так, параметр border задает рамку вокруг таблицы в целом, но не между ячейками. Не наследуется и значение параметра background. Цвет фона в таблице бежевый потому, что у свойства background в качестве значения по умолчанию задан transparent (прозрачный), поэтому если аргумент явно не задан, то цвет фона родительского элемента "проглядывает" сквозь дочерний элемент.



на следующую страницу  
CSS
  
Hosted by uCoz