IZONE

IZONE- http://www.izcity.com/- бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Каскадные таблицы стилей

Вадим Беляков, vadimka@novgorod.net

Встраивание таблиц стилей в документ

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

Существует целых четыре способа связывания документа и таблицы стилей:
1. Связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
2. Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе.
3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.
4. Встраивание в теги документа - позволяет изменять форматирование конкретных элементов страницы.

Остановимся на каждом из этих способов более подробно.
Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять её к документу при помощи тега <LINK>, задаваемого в разделе <HEAD>:

Связываемый файл содержит набор правил каскадных таблиц стилей, определяющих форматирование документа, и должен иметь расширение css.
Связывание позволяет разработчику применить одинаковый набор правил форматирования к группе HTML-документов, что приводит к единообразному отображению различных документов и придаёт некоторую системность сайту.

При внедрении таблицы стилей в документ правила, её составляющие, задаются в стилевом блоке, ограниченном тегами <STYLE TYPE="text/css"> и </STYLE>, который должен размещаться в разделе <HEAD> документа:
<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

Не смущайтесь, видя в этом коде тег комментария , это сделано для того, чтобы избежать проблем с браузерами, не поддерживающими DHTML (правда осталось таких немного...)
В приведённом примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент P) на сером фоне с центрированными строками. Полужирный текст, определяемый любым элементом B (тег <B>) документа, будет отображаться прописными буквами, даже если в документе он задан строчными.

В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей.

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

<H1 STYLE="color:red">Заголовок красного цвета</H1>

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

Все способы встраивания таблиц стилей свободно сочетаются в одном документе. Например, можно разработать главную таблицу стилей для всех документов и связывать её с каждым HTML файлом. Импортируемая или внедряемая таблица стилей будет уточнять форматирование элементов конкретного документа, а встраиваемые в тег определения будут уточнять их отображение.

Группирование и наследование.

Правила каскадных таблиц состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделённых запятыми, если для них задаётся одно правило. Например, следующие правила

H1 {font-family: Verdana}
H2 {font-family: Verdana}
H3 {font-family: Verdana}
можно сгруппировать и задать в виде одного правила со списком селекторов

H1, H2, H3 {font-family: Verdana}

Аналогично группируются определения, только в списке они разделяются точками с запятой. Следующие правила форматирования заголовка первого уровня

H1 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
можно сгруппировать в виде одного правила, сгруппировав определения:

H1 (font-weight: bold;
font-size: 14pt;
font-family: Verdana;
}

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

H1 {font: bold 14pt Verdana}

При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.

В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет? Например, пусть цвет шрифта абзаца определён как синий(P {color: blue}). Как будет отображаться выделенный элемент текста, задаваемый тэгом <em>, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом. Другие свойства ведут себя аналогично свойству color, например font-family, font-size.

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

Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тегом <BODY>:

BODY {color: black;
font-family: "Times New Roman";
background: url(texture.gif) white;
}

Приведённые правила задают форматирование документа по умолчанию: чёрным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом texture.gif, или на белом фоне, если файл недоступен.

Селекторы

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

< STYLE TYPE="text/css">

</--STYLE>

А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в теге, а можно применить параметр CLASS, значением которого является ссылка на класс, задаваемый в таблице стилей.

Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования. Например, можно определить два класса для отображения заголовка первого уровня:

В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:

<H1 CLASS="red">Красный шрифт</H1>
<H1 CLASS="blueBgrd">Красный шрифт на синем фоне</H1>

В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:

Теперь два класса red и blueBgrd можно применять к любым элементам документа:

<P CLASS="red">Красный шрифт</P>
<P CLASS="blueBgrd">Красный шрифт на синем фоне</P>

Первый абзац отразится красным шрифтом, а второй - красным шрифтом на синем фоне.

Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #: <STYLE TYPE="text/css">

</STYLE>
<BODY>
<P ID=par24> Разрежённые слова в абзаце</P>
<H1 ID=form2>Чёрный заголовок</P>

В этом примере абзац идентифицирован именем par24 в параметре ID, поэтому к нему применимо правило с селектором #par24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.

Эта и другие статьи на сайте pl.hut.ru/.