03. Стили отдельного файла

На этой странице:

• Описание стилей файла
• Наследование стилей
• Каскадирование стилей

Описание стилей файла

Можно задавать стиль для тега или группы тегов так, чтобы определение работало на протяжении всего HTML-документа. Например, можно указать вид всех заголовков. Для этого достаточно написать стилевое определение в головной части документа:

Браузер отображает заголовки в этом документе рубленым шрифтом цвета maroon и выравнивает их по центру окна. Поведение браузера соответствует инструкции:

Стилевые определения располагаются внутри элемента <STYLE>...<STYLE> “запакованные” в HTML-комментарии (для браузеров, которые не поддерживают CSS).

Стилевое определение состоит из заголовка, в котором записывается имя тега (или список имён), и тела, заключённого в фигурные скобки. В теле определения через точку с запятой перечисляются стилевые правила:

Имя тега (или имена тегов через запятые)
{
 свойство: величина;
 ...
 свойство: величина;
}

В приведённом выше примере описаны три свойства:

• text-align:center — задаёт выравнивание по центру;
• color:maroon — задаёт коричневый цвет текста;
• font-family:Geneva,Helvetica,sans-serif — задаёт рубленый шрифт.

Заголовки будут выводиться шрифтом Geneva, если, конечно, этот шрифт есть на компьютере пользователя. Если шрифта нет, браузер последовательно ищет шрифты Verdana, Helvetica или, в конце концов, какой-нибудь рубленый шрифт (указание sans-serif). “Каким-нибудь” рубленым шрифтом оказывается стандартный для данной операционной системы рубленый шрифт (для Windows это шрифт Arial).

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

Стили обладают свойством наследования — элемент сохраняет (наследует) стили своего родителя.

Заметьте, что текст на странице записывается красным цветом, несмотря на атрибут text=black в теге BODY — стилевое свойство оказываются главнее атрибута.

Каскадирование стилей

С документом может быть связано несколько стилевых определений (в отдельном стилевом файле, в головной части кода и в отдельных тегах).

Принцип обработки множественных определений, заданных для одного элемента, называется каскадированием.

Общее правило каскадирования: конкретное определение главнее общего.

Можно сформулировать и так: стилевое определение потомка отменяет аналогичное определение родителя и передаётся по наследству.

Сформулируем правила каскадирования более детально.

1. Если для родительского элемента (например, BODY) задано стилевое определение, и оно не конфликтует со стилевыми определениями, заданными для потомка (например, для P), то стилевое определение родителя наследуется потомком.
2. Стилевое определение потомка (например, P) главнее аналогичных определений родителя (например, BODY).
3. Стилевое определение в теге главнее стилевого определения в головной части HTML-кода, а последнее главнее определений, заданных в отдельном стилевом файле.
4. Если задано несколько конфликтующих стилевых определений равного каскадного веса, то действует последнее из них. Например, текст в абзаце <P style="color:red;color:blue"> будет синего цвета.

Посмотрите, как работают правила каскадирования в этом примере: