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

Рамка создается при помощи HTML‑элемента FIELDSET. Между парными тегами

и помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка.

Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Этот HTML‑элемент задается при помощи парных тегов и , между которыми помещается текст подписи. Можно «поиграть» также с выравниванием подписи при помощи атрибута align, однако следует знать, что разные браузеры по‑разному реализуют значения этого атрибута, а некоторые значения и совсем не поддерживают.

В заключение рассмотрим, как реализована группировка элементов управления формы, показанной на рис. 9.1 (пример 9.6).

Регистрация почтового ящика

Персональная информация

Фамилия:

Имя:

Информация о почтовом ящике

Адрес:

Пароль:

Подтверждение пароля:

tabindex="5">

Дополнительные сведения

Желаете получать рекламные рассылки?

Да

tabindex="7">Нет

Желаете получать прогноз погоды на каждый день?

Да

tabindex="9">Нет

Этот пример является практически законченной страницей с формой: жаль, что по адресу somesite.com/cgi-bin/proc.exe нет реального CGI‑приложения, способного обрабатывать форму.

Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб‑сайтов, – каскадным таблицам стилей (CSS, Cascade Style Sheets).

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

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

По‑настоящему убедиться в полезности CSS можно тогда, когда приходит время менять дизайн всего сайта. Представьте себе, что есть сайт, представляющий собой достаточно большое учебное пособие, например по программированию на С++, содержащее 50 страниц с 200 примерами (листингами). По какой‑то причине нужно поменять цвет шрифта этих самых листингов: ничего не поделаешь, придется вносить изменения в каждый тег

(200 штук). При использовании CSS достаточно изменить (или добавить) одну запись в таблице стилей. И это лишь один из множества возможных примеров.
Наверное, теперь понятно, почему технология CSS получила большое распространение вскоре после разработки и реализации ее поддержки в браузерах. Кроме того, с использованием каскадных таблиц стилей можно создавать документы, которые по‑разному отображаются на различных типах устройств: от карманного ПК до проектора.
Чтобы использовать таблицы стилей в документах, нужно сначала научиться их создавать, не так ли? Именно с рассмотрения особенностей создания таблиц стилей и начнем.
Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML‑элемента LINK. При этом используются следующие атрибуты этого элемента:
• href – задает URI файла с подключаемой таблицей стилей;
• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;
• type – при подключении CSS задается значение text/css;
• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).
HTML‑элемент LINK задается при помощи одиночного тега , который помещается в шапке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:




Встроенные таблицы стилей задаются внутри HTML‑элемента STYLE (между парными тегами и ), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML‑элемента LINK.
Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат:
@import url(«URI внешней таблицы стилей»);


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


P {font-size: 16pt}


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


...


В примерах данной главы используются встроенные таблицы стилей. Однако имейте в виду, что это сделано только потому, что, во‑первых, примеры небольшие и создавать для них два файла просто нерационально, а во‑вторых, такие примеры проще помещать в книгу и они так лучше воспринимаются. На практике удобнее использовать внешние таблицы стилей. Тогда не придется при изменении стиля одного элемента заново выкладывать на сервере все содержимое документа: достаточно обновить файл с измененной таблицей стилей.
Таблицы стилей представляют собой множество записей, называемых правилами. Каждое правило CSS состоит из двух частей: селектора и объявления стиля. Селектор несет в себе информацию, достаточную для нахождения в документе элементов, к которым применяется стиль. Объявление стиля представляет собой набор пар свойство/значение, заключенный в фигурные скобки {}. Синтаксис правила CSS следующий:
селектор {свойство: значение; свойство: значение; ...}


При объявлении стиля может быть задано как значение только одного свойства, так и значения сразу нескольких свойств CSS. В последнем случае пары свойство/значение отделяются друг от друга символом ;.
То, что обозначено в приведенном примере как селектор, может быть названием HTML‑элемента (например, P, STRONG, H1), идентификатором фрагмента документа (#par1, #tabl1), именем стилевого класса (.par1, P.par1) или более сложной конструкцией, описанной ниже.
Свойство представляет один из предопределенных строковых идентификаторов, обозначающих тот или иной параметр, поддерживаемый для HTML‑элемента (например, color, backgroundcolor, font-family). Тип присваиваемого значения зависит от конкретного параметра.
Одни и те же правила отображения могут применяться к нескольким различным селекторам. В этом случае запись в таблице стилей будет иметь следующий вид:
селектор, селектор, ... {свойство: значение; свойство: значение; ...}


Свойства CSS, которые можно задать для различных элементов, существенно отличаются. Часть их мы рассмотрим на примерах в тексте книги. Более полный перечень свойств с их описаниями вы сможете найти в приложении 2. Читать дальше