HTML: Популярный самоучитель
Шрифт:
Рамка создается при помощи HTML-элемента FIELDSET. Между парными тегами <FIELDSET> и </FIELDSET> помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка.
Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Этот HTML-элемент задается при помощи парных тегов <LEGEND> и </LEGEND>, между которыми помещается текст подписи. Можно «поиграть» также с выравниванием подписи при помощи атрибута align, однако следует знать, что разные браузеры по-разному реализуют значения этого атрибута, а некоторые значения и совсем не поддерживают.
В заключение рассмотрим, как реализована группировка элементов управления
<HTML>
<HEAD>
<TITLE>Пример страницы с формой</TITLE>
</HEAD>
<BODY>
<FORM action="somesite.com/cgi-bin/proc.exe">
<H1>Регистрация почтового ящика</H1>
<FIELDSET>
<LEGEND>Персональная информация</LEGEND>
Фамилия: <INPUT name="personal_lastname" type="text" tabindex="1"><BR>
Имя: <INPUT name="personal_firstname" type="text" tabindex="2"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND>Информация о почтовом ящике</LEGEND>
Адрес: <INPUT name="mail_address" tabindex="3"> <BR>
Пароль: <INPUT name="mail_password" type = "password" tabindex="4">
<BR>
Подтверждение пароля: <INPUT name="mail_password" type = "password"
tabindex="5">
</FIELDSET>
<FIELDSET>
<LEGEND>Дополнительные сведения</LEGEND>
Желаете получать рекламные рассылки?
<INPUT name="add_goods" type="radio" value="Yes" tabindex="6">Да
<INPUT name="add_goods" type="radio" checked value="No"
tabindex="7">Нет
<BR>
Желаете получать прогноз погоды на каждый день?
<INPUT name="add_weather" type="radio" value="Yes" tabindex="8">Да
<INPUT name="add_weather" type="radio" checked value="No"
tabindex="9">Нет
</FIELDSET>
<INPUT type = "submit" value = "Регистрация" tabindex = "10">
<INPUT type = "reset" value = "Сброс" tabindex = "11">
</FORM>
</BODY>
</HTML>
Этот пример является практически законченной страницей с формой: жаль, что по адресу somesite.com/cgi-bin/proc.exe нет реального CGI-приложения, способного обрабатывать форму.
Глава 10
Введение в CSS
Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб-сайтов, – каскадным таблицам стилей (CSS, Cascade Style Sheets).
10.1. Возможности CSS
Таблицы стилей позволяют управлять отображением практически любого содержимого HTML-документа. Например, с их помощью можно задать цвет, шрифт и прочие параметры, влияющие на то, как должны показываться заголовки. Можно задать полужирное или еще какое-нибудь начертание шрифта определений в списке определений. Помните, как это приходилось делать вручную в примерах гл. 4?
С использованием таблиц стилей можно забыть о необходимости физического форматирования текста, а также о настройке отображения таблиц, списков и других элементов HTML-документов. Кроме того, таблицы стилей позволяют настраивать даже параметры отображения содержимого документа, недоступные при использовании HTML-элементов (отступы абзацев, стили рамок рисунков и многое другое, вплоть до интервала между буквами текста и свободного позиционирования элементов страницы).
По-настоящему убедиться в полезности CSS можно тогда, когда приходит время менять дизайн всего сайта. Представьте себе, что есть сайт, представляющий собой достаточно большое учебное пособие, например по программированию на
С++, содержащее 50 страниц с 200 примерами (листингами). По какой-то причине нужно поменять цвет шрифта этих самых листингов: ничего не поделаешь, придется вносить изменения в каждый тег <PRE> (200 штук). При использовании CSS достаточно изменить (или добавить) одну запись в таблице стилей. И это лишь один из множества возможных примеров.Наверное, теперь понятно, почему технология CSS получила большое распространение вскоре после разработки и реализации ее поддержки в браузерах. Кроме того, с использованием каскадных таблиц стилей можно создавать документы, которые по-разному отображаются на различных типах устройств: от карманного ПК до проектора.
Чтобы использовать таблицы стилей в документах, нужно сначала научиться их создавать, не так ли? Именно с рассмотрения особенностей создания таблиц стилей и начнем.
10.2. Внешние и встроенные таблицы стилей
Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML-элемента LINK. При этом используются следующие атрибуты этого элемента:
• href – задает URI файла с подключаемой таблицей стилей;
• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;
• type – при подключении CSS задается значение text/css;
• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).
HTML-элемент LINK задается при помощи одиночного тега <LINK>, который помещается в шапке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:
<HEAD>
<LINK href = "mystyle.css" rel = "stylesheet" type = "text/css">
<LINK href = "mystyle_ex.css" rel = "stylesheet" type = "text/css">
<HEAD>
Встроенные таблицы стилей задаются внутри HTML-элемента STYLE (между парными тегами <STYLE> и </STYLE>), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML-элемента LINK.
Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат:
@import url(«URI внешней таблицы стилей»);
Пример подключения внешней CSS может выглядеть так:
...
P {font-size: 16pt}
@import url("external_stylesheer.css"); /*подключение таблицы стилей*/
...
В примерах данной главы используются встроенные таблицы стилей. Однако имейте в виду, что это сделано только потому, что, во-первых, примеры небольшие и создавать для них два файла просто нерационально, а во-вторых, такие примеры проще помещать в книгу и они так лучше воспринимаются. На практике удобнее использовать внешние таблицы стилей. Тогда не придется при изменении стиля одного элемента заново выкладывать на сервере все содержимое документа: достаточно обновить файл с измененной таблицей стилей.