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

ГЛАВА 4. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ

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

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

h1 {color: red}

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

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

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

<head> <title>Пример подключения css</title> <link rel="stylesheet" type="text/css" href="css/styles.css" > </head>

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

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

<head> <title>Пример внедрения css</title> <style type="text/css"> h1 {color: red} </style> </head>

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

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

Данное свойство может быть записано внутри тега <style>, либо внутри css-файла, образуя, таким образом, каскад из таблиц. Причем свойство @import обязательно должно идти сразу после тега <style> или являться самой первой строкой в css-файле. При этом допускается использование нескольких подряд идущих свойств @import:

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

Например,

<html> <head> <meta charset="windows-1251"> <title>Импорт стиля</title> <style> @import url("/style/main.css"); @import url("/style/palm.css"); </style> </head> <body> <p>...</p> </body> </html>

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

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

<p style="color: blue;">Синий цвет</p>

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