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

Чтобы избежать дублирования кодирования линейных таблиц стилей, можно применять встроенную таблицу стилей. Встроенная таблица стилей определяется в теге <style type="text/css">, который обычно располагается в разделе страницы <head>. Внутри этого раздела <style> находится список имен тегов, называемых селекторами, которым присваивают объявления стилей (свойства и значения). Когда эти объявления сделаны, они автоматически применяются к определенным тегам, если они появляются на странице. Общая форма раздела <style> документа показана в листинге 3.3 .

<style type="text/css">
 selector {property:value [; property:value] ...}
 ... 
</style>
    

Селектор является именем тега (без охватывающих символов "<" и ">"). Свойства и значения стиля тега представлены в виде списка объявлений стиля, разделенном точками с запятой и помещенном внутри пары фигурных скобок "{ }". Например, следующий код определяет объявления стиля для тега <hr/>, задавая такие же параметры стиля, как и предыдущая линейная таблица стилей.

<head>
<title>Пример встроенной таблицы стилей</title>

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

</head>    

Селектор hr связан с четырьмя объявлениями property:value стиля горизонтальной линейки. Когда эти стили определены во встроенной таблице стилей, они автоматически применяются, если браузер встречает в документе тег <hr/>. Нет необходимости кодировать отдельные линейные таблицы стилей в каждом теге <hr/>. Тег сам несет в себе оформление стиля, описанное во встроенной таблице стилей. Хотя показанная выше встроенная таблица стилей содержит только один селектор для тега <hr/>, на самом деле она может содержать любое число записей, в зависимости от того, сколько различных тегов должно быть оформлено. Пример также записан на одной строке. Многие авторы страниц Web предпочитают кодировать настройки property:value на отдельных строчках, как показано на листинге , чтобы облегчить чтение и редактирование.

<style type="text/css">

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

Форма записи таблицы стилей не влияет на результат оформления. Подобно коду XHTML код таблицы стилей имеет свободный формат, его можно организовать любым образом, если только код и пунктуация будут оставаться правильными.

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

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

Внешняя таблица стилей является отдельным документом, содержащим настройки property:value в том же формате, что и встроенная таблица стилей. Единственное различие состоит в том, что этот документ не содержит вокруг записей тегов <style>. Например, документ внешней таблицы стилей, содержащий описанные выше спецификации оформления тега <hr/>, включает в себя записи, показанные в листинге 3.6 .

Stylesheet.css (документ)

 hr {height:10px;
  width:50%;
  color:red;
   text-align:center} 

Этот отдельный документ создается с помощью текстового редактора и сохраняется как стандартный текстовый файл, обычно с расширением файла .css, чтобы идентифицировать его как документ таблицы стилей. Широко распространено сохранение этого документа таблицы стилей с именем Stylesheet.css в том же каталоге, где находятся страницы Web, к которым она применяется.

Документ внешней присоединяемой таблицы стилей содержит настройки стиля оформления, которые применимы ко всем страницам сайта Web. Поэтому все страницы, которые используют эту таблицу стилей, должны с ней "соединяться", чтобы сделать стили доступными для этих страниц. Соединение происходит с помощью тега <link>, кодируемого в разделе <head> страницы. Общая форма тега <link> показана в листинге 3.7 .

<link
 href="url"
 type="text/css"
 rel="stylesheet"
/> 

Атрибут href (hypertext reference) задает расположение присоединяемой таблицы стилей. Если таблица стилей находится в том же каталоге, что и страница Web, к которой она применяется, то эта запись является просто именем этого документа. Атрибут type определяет тип документа, с которым делается соединение (всегда "text/css"). Атрибут rel определяет взаимоотношения внешнего документа с данной страницей (всегда "stylesheet").

Если имеется документ таблицы стилей с именем Stylesheet.css, который расположен в той же папке, что и страница Web, то страница Web соединяется с этим документом с помощью следующего кода XHTML.

<head>
<title>Пример присоединяемой таблицы стилей</title>
<link href="Stylesheet.css" type="text/css"
rel="stylesheet"/>
</head>/> 

Теперь страница Web имеет все доступные для нее настройки стиля оформления, заданные в документе Stylesheet.css. Эта присоединенная таблица стилей может служить для замены встроенных или линейных таблиц стилей, которые в противном случае должны были бы появиться на отдельных страницах Web. Как и в случае встроенных таблиц стилей, все теги, определенные селекторами в присоединенной таблице стилей, несут в себе объявленные стили оформления.

Нет ничего необычного в том, чтобы использовать все три типа таблиц стилей для одной страницы Web. Внешняя таблица будет содержать стили, которые являются общими для всех страниц Web; встроенная таблица будет включать в себя стили, которые относятся к определенной странице; линейные таблицы будут применяться к отдельным тегам, которым не требуется общее оформление. Браузер использует это множество таблиц стилей следующим образом.

Первое: все внешние таблицы стилей применяются на странице для заданных селекторов тегов.

Второе: применяются все встроенные таблицы стилей. Если одинаковые селекторы тегов присутствуют во внешних и встроенных таблицах стилей, то встроенные стили переопределяют или расширяют внешние стили.

Третье: применяются все линейные таблицы стилей. Если эти настройки относятся к тем же тегам, которые присутствуют во внешних или встроенных таблицах стилей, то линейные стили переопределяют или расширяют присоединенные и встроенные стили.

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

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

hr {height:1px;
 width:50%;
 color:red;
 text-align:center}

Все страницы, которые соединяются с этой таблицей стилей, выводят горизонтальные линейки этим стилем. Предположим теперь, что одна определенная страница должна иметь другое оформление линеек, скажем, голубым цветом, а не красным. Поэтому на этой единственной странице кодируется встроенная таблица стилей, чтобы переопределить объявление цвета во внешней таблице стилей.

<style type="text/css">
hr {color:blue}
</style>   

Все горизонтальные линейки на этой странице будут синими; однако они сохраняют свойства height, width, и text-align внешней таблицы стилей. Теги на этой странице наследуют свойства внешней таблицы стилей, если не модифицируются встроенной таблицей стилей.

Предположим дальше, что одна определенная горизонтальная линейка на этой странице должна быть зеленого цвета и проходить по всей ширине страницы. Поэтому для этой конкретной линейки добавляется линейная таблица стилей.

<hr style="color:green; width:100%"/>

Зеленый цвет стиля переопределяет синий, который наследуется из встроенной таблицы стилей; ширина в 100% переопределяет ширину в 50%, унаследованную из внешней таблицы стилей. Однако, эта конкретная линейка сохраняет толщину в 1 пиксель и выравнивание по центру, унаследованные из внешней таблицы стилей.

Именно наследование стилей делает таблицы стилей "каскадными". Внешние стили наследуются, или каскадно распространяются, на все страницы Web, которые с ними соединены; встроенные стили наследуются, или каскадно распространяются, на отдельные теги, содержащие линейные таблицы стилей.

В этом учебнике свойства и значения стилей иллюстрируются в виде линейных таблиц стилей, с обсуждением того, как их можно перенести во встроенные или внешние таблицы стилей для расширения приложения. К окончанию курса читатель не будет иметь никаких проблем с использованием таблиц стилей и способами их использования при проектирования страниц Web любой степени сложности.

Когда текст выводится в окне браузера, он распространяется от одного края окна до другого с полями примерно в 6 мм (четверть дюйма), окружающими текст на странице. Можно было видеть эти поля на созданных ранее страницах Web. Они показаны на простой странице Web с одним параграфом на рисунке 3.3 .

Рис. 3.3. Страница Web с полями по умолчанию

В некоторых случаях эти настройки полей работаю вполне успешно. Однако, если на странице находится много текста, то эти узкие поля создают перегруженный вид, что затрудняет чтение страницы. Может быстро надоесть монотонное перемещение по строкам текста, которые тянутся от одного края окна до другого. Страница Web станет более привлекательной, более удобочитаемой и более приятной для глаз, если вокруг текста появится больше свободного пространства. Однако в других случаях может понадобиться сократить или удалить используемые по умолчанию настройки полей, чтобы некоторые элементы страницы выводились еще ближе к границам окна.

Вспомните, что тег <body> ограничивает все содержимое страницы, которое выводится в окне браузера. Этот тег можно использовать также для управления полями вокруг границ страницы. Для этого необходимо применить к тегу <body> таблицу стилей, которая определяет поля страницы.

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

Свойство margin задает одну и ту же ширину поля со всех сторон элемента; свойства margin-top, margin-right, margin-bottom, и margin-left задают поля индивидуально для каждой из четырех сторон. Значение auto заставляет поля вернуться к их значению ширины по умолчанию при переопределении предыдущих настроек полей.

Свойства полей, как и различные другие свойства стиля оформления, используют значения размера. В большинстве случаев требуется определять размер в пикселях (px) или в процентах (%) от ширины окна браузера. Это два наиболее распространенных способа измерения расстояния на экране компьютера. Если тип измерения не определен, то предполагаются пиксели.

Поля, окружающие контент страницы Web, можно задать, применяя таблицу стилей к тегу <body>. Например, следующая линейная таблица стилей задает 25-пиксельное поле вокруг всей страницы, используя свойство margin и задавая пробел в 25 пикселей между содержимым страницы и границами окна браузера.

<body style="margin:25px">

<p>Эта страница Web выводит параграф текста с окружающими страницу 
полями величиной 25 пикселей. Эти поля создаются линейной таблицей 
стилей, заданной для тела документа. Строки текста лежат в этих границах и 
переносятся по словам. </p>

</body>

Это оформление создает страницу, показанную на рисунке 3.4 . Текстовый параграф кажется менее перегруженным, чем на рисунке 3.3 , что делает его более привлекательным и облегчает чтение текста, сокращая длину строк.

Рис. 3.4. Страница Web с 25-пиксельными полями

В приведенном выше примере тег <body> включает линейную таблицу стилей для задания полей этой конкретной страницы. Вместо этого можно написать встроенную таблицу стилей для получения такого же результата. Следующая запись <style> задает селектор body со свойством стиля оформления margin и значением для этого тега.

<head>
 <title> Поля страницы </title>
  <style type="text/css">
   body {margin:25px}
  <style>
</head>

<body>

<p>Эта страница Web выводит параграф текста с окружающими страницу
полями величиной 25 пикселей. Эти поля создаются линейной таблицей 
стилей, заданной для тела документа. Строки текста лежат в этих границах и 
переносятся по словам.</p>

</body>

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

Если сайт Web имеет много страниц и все страницы должны использовать одинаковые поля, то необходимо применять внешнюю таблицу стилей. Поместите оформление body в этот отдельный документ и соедините его со всеми страницами, которые должны использовать это оформление.

Следующий код показывает документ Stylesheet.css, в котором определено оформление полей для тега <body>. Этот документ находится в том же каталоге Web, что и страницы, где этот стиль оформления применяются.

Stylesheet.css 

body {margin:25px}

Когда эта внешняя таблица стилей будет создана, любая страница Web может использовать ее настройки полей, соединяясь с ней. Код для подключения этой внешней таблицы стилей показан ниже.

<head>
 <title> Любая страница </title>
 <link href="Stylesheet.css" type="text/css"
rel="stylesheet"/>
</head>

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

<style type="text/css">
 body {margin-top:50px; margin-left:30px; margin-right:30px;
   margin-bottom:50px}
</style>

Отметим, что эти свойства можно записывать в любом порядке. Не забывайте только, что пара property:value должна соединяться двоеточием (:), а отдельные объявления разделяются точкой с запятой (;).

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

leftmargin="n"
rightmargin=""n"
topmargin="n"
bottommargin="n"

marginwidth="n"
marginheight="n"

Величину полей задает значение (n), представляющее число пикселей пустого пространства между содержимым страницы и границами окна браузера. Значения задают индивидуально для каждой из границ (leftmargin, rightmargin, topmargin, bottonmargin), для двух боковых сторон (marginwidth) или для верхнего и нижнего полей (marginheight) страницы, например:

<body leftmargin="30" rightmargin="30"
topmargin="30" bottommargin="30">

или

<body marginwidth="30" marginheight="30">

Хотя эти исключенные атрибуты тега <body> все еще работают в современных браузерах - и их, наверняка, можно встретить на существующих страницах Web - не следует применять их при создании новых страниц. Вместо этого используйте свойства оформления полей, задействуя внешние, встроенные или линейные таблицы стиля.

Стили полей применимы для многих тегов XHTML, а не только для тега <body>. Фактически любой контейнерный тег может использовать задание полей. Тег <p> является таким тегом. Объявляя для этого тега свойства стиля полей margin, margin-top, margin-right, margin-bottom и/или margin-left, параграф может настроить свои поля со всех сторон блока текста или с каждой стороны независимо.

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

<p>Здесь три параграфа. Первый параграф форматирован с помощью
стандартного тега параграфа с используемыми по умолчанию настройками 
стиля.</p>

<p style="margin-left:40px; margin-right:40px">Второй параграф
форматирован с
настройкой стиля "margin-left:40px; margin-right:40px" для задания
левого 
и правого полей для смещения параграфа относительно окружающих 
параграфов. Это оформление создает параграф, похожий по результату на 
использование тега blockquote.</p>

<p>Третий параграф кодируется так же, как и первый. Он заключен в 
стандартный тег параграфа с используемым по умолчанию оформлением.</p>

Вывод в браузере этого кода показан на рисунке 3.5 .

Рис. 3.5. Задание полей параграфа

В этом примере применяется линейная таблица стилей, так как настройки полей применяют только для одного параграфа. Нет необходимости определять встроенную таблицу стилей или создавать внешнюю таблицу стилей, так как это оформление используется только одним параграфом.

Ранее упоминалось, что можно использовать несколько тегов <br/> для увеличения вертикального пробела на странице. Каждый тег <br/>, кроме тега в конце строки текста, создает ниже на странице дополнительную пустую строку.

Тот же самый результат можно получить, задавая настройки стиля margin-top и margin-bottom. При определении значений ширины полей вверху и внизу блока текста заданное число пикселей пустого пространства вставляется перед или после текста, производя результат, подобный вставке пустых строк. Следующий код, например, вставляет дополнительное пространство перед и после смещенного параграфа, увеличивая его верхнее и нижнее поля с помощью линейной таблицы стилей. Результат будет такой же, как было показано ранее для параграфа цитирования, где интервалы были увеличены с помощью дополнительных тегов <br/>. Результат вывода в браузере приведен на рисунке 3.6 .

<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду ее 
преследовала.<p>

<p style="margin-left:40px; margin-right:40px;
   margin-top:50px; margin-bottom:50px">
Была у Мери овечка,<br/>
Была ее шерсть снежно-белой;<br/>
И куда бы ни шла Мери,<br/>
Овечка бежала за нею. <br/>
</p>

<p>У Мери ужасная жизнь. Очень трудно сходить на свидание, когда вокруг 
тебя все время скачет овечка.</p>

Рис. 3.6. Использование настройки полей для увеличения вертикального интервала

Можно применять либо несколько тегов <br/>, либо увеличенные настройки полей для создания вертикальных интервалов. Однако при использовании margin-top и margin-bottom обеспечивается большая точность в пикселях.

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