Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 3:

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

Аннотация: Большая часть кодирования XHTML обеспечивает применение характеристик оформления к элементам страницы. Оформление включает размещение элементов на странице вместе с их визуальным представлением типа шрифта, размеров, цветов и других характеристик вывода. Существует два основных способа управления компоновкой и представлением элементов страницы - с помощью атрибутов тегов и с помощью таблиц стилей оформления. Эти методы кратко описаны здесь и будут подробно рассматриваться и иллюстрироваться в дальнейшем

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

Атрибуты

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

-------------------------------------------------------------------
Листинг 3.1. Используемая по умолчанию горизонтальная линейка

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

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

<hr size="10" width="50%" color="red" align="center"/>
Красная горизонтальная линейка в 50% ширины страницы Web

Рис. 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] ...">
Листинг 3.2. Общая форма линейной таблицы стилей

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

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!