Основы оформления документов

Использование стилей оформления

Атрибуты

Стили форматирования можно применять с помощью атрибутов, кодируемых в тегах XHTML. Разные теги имеют разные атрибуты, которые определяются их спецификой и управляют внешним видом контента страницы. В качестве простого примера можно взять горизонтальную линейку, которая выводится через всю страницу, когда на странице появляется тег <hr/>. Этот тег создает линию, которую часто используют для разделения контента на странице.

-------------------------------------------------------------------

Приведенная выше линейка является используемым по умолчанию выводом тега. Она может, однако, иметь другое представление при задании в теге дополнительных атрибутов. Атрибут size управляет толщиной линейки; атрибут width задает ее длину; атрибут color задает цвет, а атрибут align определяет ее горизонтальное положение на линии (слева на странице, справа на странице или по центру страницы).

Атрибуты имеют общую форму кодирования: атрибут="значение" - название атрибута и задаваемое в кавычках его значение. Ниже, например, тег <hr/> закодирован с четырьмя атрибутами управления характеристиками вывода, как показано на рисунке 3.1.

<hr size="10" width="50%" color="red" align="center"/>

Рис. 3.1. Красная горизонтальная линейка в 50% ширины страницы Web

Линейка имеет толщину 10 пикселей ( size="10" ), 50% ширины окна браузера ( width="50%" ), красный цвет ( color="red" ) и выровнена горизонтально по центру страницы ( align="center" ). Таким образом, значения атрибутов задают характеристики оформления для вывода линейки отлично от ее обычного, используемого по умолчанию оформления. В ходе изложения учебника будет представлены различные атрибуты, связанные с различными тегами в качестве параметров оформления этих тегов.

Однако стандарты XHTML исключают большинство атрибутов оформления тегов. Это означает, что атрибуты все еще распознаются современными браузерами, но рекомендуется избегать их применения в пользу других методов оформления. Для оформления элементов XHTML рекомендуется использовать вместо атрибутов каскадные таблицы стилей (CSS).

Каскадные таблицы стилей

Предпочтительным способом оформления элементов страницы является использование каскадных таблиц стилей (CSS). Таблица стилей - это набор характеристик стилей оформления и соответствующих значений оформления, описывающих внешний вид элементов XHTML, к которым они применяются. Существует три способа создания таблиц стилей. Линейная ( in-line ) таблица стилей появляется внутри тега, к которому применяются ее объявления стилей; встроенная ( embedded ) таблица стилей является отдельным разделом стилей страницы Web, которая применяет свои стили ко всем определяемым на странице тегам; внешняя ( linked ) таблица стилей является внешним документом, содержащим задания стилей, которые применимы ко всем страницам, которые с ней соединены.

Линейные таблицы стилей

Линейная таблица стилей кодируется внутри тега для применения оформления к этому конкретному тегу. Она использует общий формат, показанный в листинге 3.2.

<tag style="property:value [; property:value] ...">

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

Свойства и значения, которые могут кодироваться для тега, зависят в большой степени от конкретного оформляемого тега. Стилевые настройки для горизонтальной линейки, например, могут включать свойства height, width, color, и text-align, идентичные по результату исключенным атрибутам size, width, color, и align, которые они заменяют. Эти свойства кодируются как линейная таблица стилей, что показано на рисунке 3.2. Атрибут style появляется внутри тега <hr/> и определяет набор свойств и значений, применяемых к тегу, когда он выводится в браузере.

<hr style="height:10px; width:50%; color:red; text-align:center"/>

Рис. 3.2. Горизонтальная линейка, использующая линейную таблицу стилей

При использовании в качестве линейных таблиц стилей свойства и значения относятся только к тому тегу, в котором они определены. Это означает, например, что если на странице имеется несколько тегов <hr/>, то каждый должен будет включать одну и ту же линейную таблицу стилей, чтобы они были оформлены одним стилем. Это может не создавать проблем для нескольких тегов; однако для множества тегов это может быть утомительно и приводить к ошибкам при кодировании одной и той же таблицы стилей во всех отдельных тегах. Поэтому необходим способ объявления настроек стилей один раз и последующего совместного использования этих настроек множеством тегов.