files/ru/web/css/inheritance/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---
title: Наследование
slug: Web/CSS/inheritance
translation_of: Web/CSS/inheritance
---
<h2 id="Описание">Описание</h2>

<p>Описание каждого <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">CSS-свойства</a> говорит наследуется ли оно по умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.</p>

<h2 id="Inherited_properties">Наследуемые свойства</h2>

<p>Когда никакого значения для <strong>свойства, которое наследуется</strong>,  у элемента не установлено, элемент получает <a href="/ru/docs/Web/CSS/computed_value" title="en/CSS/computed_value">вычисленное значение</a> этого свойства от его родителя. Только корневой элемент документа получает <a href="/ru/docs/Web/CSS/initial_value" title="en/CSS/initial_value">начальное значение</a> из описания свойства.</p>

<p>Типичный пример наследуемого свойства {{ Cssxref("color") }}. Стили:</p>

<pre class="brush: css">p { color: green }</pre>

<p>и разметка:</p>

<pre class="brush: html">&lt;p&gt;В этом параграфе &lt;em&gt;подчёркнутый текст&lt;/em&gt;.&lt;/p&gt;</pre>

<p>слова "подчёркнутый текст" станут зелёными, т.к. тег <code>em</code> унаследовал значение свойства {{ Cssxref("color") }} от элемента <code>p, </code>а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).</p>

<h2 id="Non-inherited_properties">Ненаследуемые свойства</h2>

<p>Когда значения <strong>свойства </strong>элемента, которое<strong> не наследуется</strong>, не указано(иногда называемое Mozilla - <strong>сброшенное свойство</strong>), элемент получает <a href="/ru/docs/Web/CSS/initial_value" title="en/CSS/initial_value">начальное значение</a> этого свойства (как указано в описании свойства).</p>

<p>Пример ненаследуемого свойства {{ Cssxref("border") }}. Стили:</p>

<pre class="brush: css"> p { border: medium solid }</pre>

<p>и разметка:</p>

<pre class="brush: html">  &lt;p&gt;В этом параграфе &lt;em&gt;подчёркнутый текст&lt;/em&gt;.&lt;/p&gt;</pre>

<p>у слов "подчёркнутый текст" не будет рамки (т.к. начальное значение {{ Cssxref("border-style") }}:<code>none</code>).</p>

<h2 id="Notes">Замечание</h2>

<p>Ключевое слово {{ Cssxref("inherit") }} позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.</p>

<h2 id="See_Also">Смотрите также</h2>

<ul>
 <li><a href="/ru/docs/Web/CSS/Reference" title="CSS Reference">CSS документация</a></li>
 <li>{{ CSS_key_concepts() }}</li>
 <li>{{ Cssxref("inherit") }}</li>
</ul>