Таблицы стилей и управление стилями

Современные текстовые процессоры, например, Microsoft Word, позволяют пользователю определять стиль, то есть, набор правил оформления и форматирования, который может применяться к различным частям документа. С другой стророны, в стандартном HTML для присвоения элементу определенных свойств (цвет, размер, положение на странице) эти свойства приходится каждый раз описывать заново, даже если на странице находится 10 или 100 таких элементов.

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

В настоящее время CSS является одной из самых перспективных технологий, облегчающих и автоматизирующих разработку Web-сайтов. Браузеры Internet Explorer и Netscape Navigator поддерживают стили начиная с четвертых версий. К сожалению, как и сам HTML, технология CSS тоже стала жертвой "войны браузеров" и не все элементы стилевого форматирования поддерживаются обеими лидирующими браузерами. Мы ограничимся рассмотрением "ядра" CSS, одинаково воспринимаемого Internet Explorer и Netscape Navigator.

Существует 3 основных способа применения таблицы стилей к документу:

1) связывание (Linking) - можно связать HTML-документ с таблицей стилей, хранящейся в отдельном файле;

2) встраивание (Embedding) - можно встроить таблицу стилей в документ с помощью тага <style>;

3) задание стиля для отдельного элемента (Inline) - можно определять элементы стиля "на лету", то есть, указывать их в тагах HTML, например, в таге абзаца <p>.

Наиболее перспективен первый способ, поскольку однажды созданный и размещенный на сервере стиль может быть затем применен ко всем страницам Вашего сайта. Хранить таблицу стилей следует в тектовом файле с расширением *.css, который можно создать при помощи любого текстового редактора. Для связывания таблицы стилей с документом HTML в последнем используется таг следующего вида:

Здесь URL, как всегда, обозначает абсолютный или относительный адрес стилевого файла, а остальные опции служат для того, чтобы сообщить браузеру, что на странице используется CSS. Обычно этот таг располагают в таге <head> или между тагами <head> и <body>.

Вместо первого можно использовать второй способ - встроить таблицу стилей непосредственно в документ. В этом случае указывать таг <link> не нужно, а таблица стилей будет действовать только внутри одного документа. Общий вид таблицы стилей следующий:

<!--

описание стиля

-->

</style>

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

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

Здесь мы определили цвет текущего заголовка первого уровня как синий.

Данный метод указания стиля поддерживается всеми подчиненными тагами тага <body>. Три способа определения стиля упорядочены иерархически - наивысший приоритет имеет оперативное указание стиля в конкретном таге, затем - указание стиля в таге <style> и затем - указание в стилевом файле. Поэтому второй и третий способ обычно используются лишь для "разового" переопределения свойств какого-либо тага, указанных в стилевом файле. При злоупотреблении оперативным определением стиля теряется основное преимущество CSS - разделение содержание и форматирования.

Следует также помнить, что CSS поддерживает механизм наследования - то есть, подчиненные таги по умолчанию копируют некоторые свойства, определенные для родительских тагов. Например, используя стиль в таге <div> можно определять стиль целого раздела документа:

<h1>Это заголовок внутри раздела</h1>

<p>Это абзац внутри раздела</p>

</div>

Здесь таги <h1> и <p> унаследуют синий цвет шрифта от тага <div>.

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

название_элемента { свойство: значение; }

где "название_элемента" - имя HTML-тага без символов <...> (например, H1, P, TD), а параметры в фигурных скобках - список свойств элементов и присвоенных им значений. Элементы списка разделены символом точки с запятой. Пример:

h1 { color: blue; font-size: 12pt; text-line: center }

Если это определение сделано в таге <style> или в стилевом файле, все заголовки первого уровня будут выведены синим шрифтом размером 12 пунктов с выравниванием по центру окна. Для всех прочих свойств будут использованы значения по умолчанию.

Если Вы хотите определить одно и то же свойство для нескольких тагов HTML, Вы можете перечислить их в отдельном списке:

P { font-size: 12pt }

UL { font-size: 12pt }

или более компактно указать в одной строке

P, UL { font-size: 12pt }

Иногда возникает необходимость определения двух (и более) стилей для одного тага - например, для тага элемента списка <li> может понадобиться один стиль, если <li> подчинен тагу нумерованного списка <ol> и другой - если он находится в маркированном списке <ul>. Это можно сделать с помощью контекстных определений, задав точную последовательность тагов, для которой будет применен стиль:

OL LI { list-type-style: decimal }

UL LI { list-type-style: square }

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

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

H1.blue { color: blue }

H1.red { color: red }

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

<h1 class=red>Красный заголовок</h1>

<h1 class=blue>Синий заголовок</h1>

Здесь описаны два класса для форматирования текста с именами normal и letter. Они могут использоваться с любыми текстовыми элементами страниц, для чего достаточно указать в нужном таге опцию class="имя_класса":

<font class="normal">текст</font>

При указании любых размеров в CSS используются следующие единицы измерения:

px - пикселы,

pt - пункты,

cm - сантиметры,

mm - миллиметры,

% - проценты

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

Наконец, таблицы стилей можно комментировать. Комментарии располагаются между символами /* и */ и игнорируются программами просмотра. Пример:

body { margin-left: 1.5in } /* отступ на 1.5 дюйма */

Познакомимся со свойствами CSS более подробно:

Свойства шрифта. font-family используется для указания шрифта или шрифтового семейства, которым будет отображаться документ. Пример:

P { font-family: Times New Roman, serif}

В качестве приоритетного шрифта абзацев указан шрифт Times New Roman, при его отсутствии документ будет отображаться любым подходящим шрифтом семества serif.

font-weight определяет жирность шрифта и имеет значения lighter, normal, bold и bolder. Можно задавать жирность также числами 100,200,...,900. 400 примерно соответствует нормальной жирности начертания.

font-size указывает размер шрифта.

Цвет элемента и фона. color определяет цвет элемента. Цвет может указываться одним из стандартных способов - по имени или в виде RGB (см. п. 7).

A { color: green } /* определили цвет ссылок как зеленый */

background-color устанавливает цвет фона элемента. Цвета указываются также, как у совйства color. Браузеры могут интерпретировать данное свойство по-разному: Internet Explorer отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator - лишь ширину, занимаемую этим элементом.

Свойства текста. text-decoration указывается для наложения текстовых эффектов:

overline Линия над строкой

line-through Зачеркивание

underline Подчеркивание

blink Мерцание

text-indent используется для отступа в первой строке текста элемента.