Принудительное наследование

Можно определить принудительное наследование — даже для свойств, которые не наследуются по умолчанию — используя ключевое слово inherit. Однако это должно использоваться с осторожностью, так как Microsoft Internet Explorer (включая версию 7) не поддерживает это ключевое слово.

Следующее правило заставит все параграфы наследовать все свойства фона от своих предков:

p {

background: inherit;

}

С помощью сокращенных свойств можно использовать inherit вместо обычных значений. Вы должны использовать сокращение для всего или ни для чего — в обычной записи нельзя определить некоторые значения и использовать наследование для других, так как значения могут задаваться в любом порядке и нет способа определить, какие значения мы хотим наследовать.

Принудительное наследование не предназначено для постоянного использования. Оно может быть полезно для "отмены" объявления в конфликтующем правиле, или для того, чтобы избежать жесткого кодирования некоторых значений. В качестве примера рассмотрим типичное навигационное меню:

<ul id="nav">

<li><a href="/">Home</a></li>

<li><a href="/news/">News</a></li>

<li><a href="/products/">Products</a></li>

<li><a href="/services/">Services</a></li>

<li><a href="/about/">About Us</a></li>

</ul>

Чтобы вывести этот список ссылок как горизонтальное меню, можно использовать следующий код CSS:

#nav {

background: blue;

color: white;

margin: 0;

padding: 0;

}

#nav li {

display: inline;

margin: 0;

padding: 0 0.5em;

border-right: 1px solid;

}

#nav li a {

color: inherit;

text-decoration: none;

}

Здесь в правиле для #nav цвет фона всего списка задается как синий. Оно также задает цвет переднего плана как белый, и это наследуется каждым элементом списка и каждой ссылкой. Это правило для элементов списка задает правую границу, но не определяет цвет границы, что означает, что будет использоваться наследованный цвет переднего плана (белый). Для ссылок используется color:inherit, чтобы принудительно реализовать наследование и переопределить используемый по умолчанию в браузере цвет ссылок.

Конечно, можно было бы точно так же определить цвет границы как белый и цвет текста ссылок как белый, но преимущество использования для этого наследования состоит в том, что вы теперь имеете только одно место для изменения цветов, если решите перейти к другой цветовой схеме.

Каскадирование

CSS означает Каскадные таблицы стилей (Cascading Style Sheets), поэтому нет ничего удивительного, что каскадирование является важной концепцией. Это механизм, который управляет конечным результатом, когда несколько конфликтующих объявлений CSS применяются к одному элементу. Имеется три основные концепции, которые управляют порядком, в котором применяются объявления CSS:

1. Важность

2. Специфичность

3. Порядок исходного кода

Мы рассмотрим эти концепции далее по очереди.

Важность является наиболее значимой. Если два объявления имеют одинаковую важность, специфичность правил определяет, какое из них будет применяться. Если правила имеют одинаковую специфичность, то порядок исходного кода управляет результатом.