Современные принципы создания HTML-документов подразумевают четкое разделение содержания документа от его вида (стилей форматирования). Это упрощает его редактирование, уменьшает объем загружаемой страницы, сокращает время создания документа, представление одного и того же документа с различными стилями. Отделение стилей форматирования от содержания осуществляется при помощи каскадных таблиц стилей (от англ. Cascading Style Sheets, сокращенно CSS). Здесь слово «каскадные» означает возможность использования набора таблиц стилей для представления одного документа. Браузер объединяет наборы таблиц по установленным правилам, в соответствии с заданными приоритетами и отображает документ в своем окне на основе полученных стилей.

Каскадные таблицы стилей представляют собой текстовый файл, в котором определены селекторы и их определения . В качестве селектора могут выступать теги языка HTML, классы, идентификаторы. Определение селектора задается внутри фигурных скобок парой: <свойство>: <значение>. Например, чтобы задать красный цвет шрифта для тегов

следует записать такое определение:

Здесь h1 – это селектор, color – свойство, red – его значение. Ниже будут более подробно рассмотрены различные селекторы и наборы свойств, с помощью которых можно манипулировать видом документа в окне браузера.

4.1. Встраивание CSS в HTML-документ

Каскадные таблицы стилей применяются к документу только в том случае, если они подключены к нему. Это можно сделать различными способами, которые могут комбинироваться в пределах одного документа. Распространенным вариантом является подключение таблиц в разделе head, записанных в текстовых файлах с расширением css:

При этом число подключаемых таблиц неограниченно. В данном примере подключается одна таблица из файла styles.css, находящаяся в каталоге css, т.е. общий путь доступа к этому файлу имеет вид: http://домен/css/styles.css.

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

Следующим вариантом является импортирование таблиц стилей в HTML-документ с помощью свойства

@import: url(URL на css-файл);

Данное свойство может быть записано внутри тега

Следует отметить, что использовать свойство @import следует крайне осторожно, т.к. в ряде случаев такой способ подключения может приводить к ошибочным ситуациям, например, при использовании JavaScript совместно с CSS может случиться, что документ будет загружен раньше, чем необходимая импортируемая таблица. В результате сценарий не сможет отработать так, как это задумывалось разработчиком. Без крайней необходимости рекомендуется вместо @import использовать подключение через тег в разделе (первый описанный вариант).

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

Следующим образом:

Синий цвет

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

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

Вставка непосредственно в заголовок HTML-документа. Правила таблицы стилей заключаются в контейнерный тег

Вставка непосредственно тег виде строки описания в атрибуте style.

Импорт ‑ вставка таблицы стилей из внешнего файла. Файл таблицы стилей является текстовым файлом с расширением css . Оператор@import используется перед другими правилами таблицы стилей в контейнере

Связывание с таблицей стилей в внешнем файле с помощью ссылки задаваемой тегом , который помещаемого в контейнер . Общий вид:

Пример .

href="http:// www.myserver.ru/css/mystyle.css ">

head >

Таблица стилей, вставленная с помощью тега , который должен размешаться в разделе документа:

), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML?элемента LINK.

Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат:

@import url(«URI внешней таблицы стилей»);

Пример подключения внешней CSS может выглядеть так:

P {font-size: 16pt}

@import url("external_stylesheer.css"); /*подключение таблицы стилей*/

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