Наследование CSS
наследование
Наследование - это процесс получения значений свойств дочерним элементом от его родительского элемента.
Это простой пример наследования:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head> <title>This is to understand CSS Inheritance - Example 1</title>
<head>
<link href="inheritance.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<h1>This is to test <i>inheritance</i> in CSS</h1>
</body>
</html>Исходный код CSS:
h1 {
color: maroon;
}Во внешнем css-файле мы установили цвет для элемента H1 как maroon. Теперь посмотрим на исходный код html, у нас есть элемент i, расположенный внутри элемента H1, чтобы сделать курсивное наследование слова. Из-за наследования наследование слов также стало бордовым, поскольку оно является дочерним элементом H1.
Чтобы установить значение свойства, которое вы хотите применить ко всему веб-документу, вы можете поместить значение этого свойства на самом верхнем уровне дерева документа, для HTML, который является html или body element. Вот пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head> <title>This is to understand CSS Inheritance - Example 2</title>
<head>
<link href="inheritance-all.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<h1>This is to test <i>inheritance</i> in CSS</h1>
<p>This paragraph inherits the value form body element</p>
</body>
</html>Исходный код файла CSS:
body {
color: maroon;
}Во внешнем CSS-файле мы установили значение цвета переднего плана (шрифта) maroon для элемента body. Из-за наследования все элементы, являющиеся потомками элемента body, то есть все элементы веб-документа, используют это значение для цвета шрифта.
Мы можем использовать значение свойства как унаследовать, чтобы позволить этому свойству наследовать значение от его родительского элемента. Этот пример показывает, как мы можем это сделать:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head> <title>This is to understand CSS Inheritance - Example 3</title>
<head>
<link href="inheritance-make.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div class="up">w3resource<//div>
<p class="down">This paragraph inherits the value form its
parent element</p>
</div>
</body>
</html>
Исходный код CSS:
.up {
background-color: lightyellow;
color: maroon;
font-weight: bold;
}
.down {
background-color: inherit;
color: inherit;
font-weight: normal;
} В коде CSS мы установили цвет фона, цвет и вес шрифта для конкретного вызываемого класса. А в другом классе мы использовали наследование как значение для цвета фона и цвета. Так как класс down используется в элементе ap, который находится ниже элемента div с классом up, свойство background color и color элемента p использует те же значения, которые установлены в классе up элемента div.
Посмотреть пример в браузере.
Предыдущая: Происхождение и порядок каскадирования
Далее: Специфика CSS
Новый контент: Composer: менеджер зависимостей для PHP , R программирования