Это текстовый параграф.

Листинг 1.8. Присвоение таблицы стилей параграфу (html, txt)

В этом примере параграфу текста, окруженному тегом (paragraph), задается тип шрифта Arial размером 14pt (14 пунктов), красного цвета (red), с жирной насыщенностью (bold). Четыре спецификации свойство:значение (например, font-family:arial) задают эти стили оформления.

Любому тегу XHTML можно присвоить одну или несколько характеристик оформления, и существуют сотни различных свойств оформления и значений, которые могут использоваться. Большая часть изучения XHTML состоит из изучения этого множества возможностей оформления. Категории стилей оформления включают:

стили шрифта - для задания типа шрифта, размера и насыщенности.;

стили текста - для задания интервала между буквами и словами, высоты строк, горизонтального и вертикального интервала и абзацных отступов;

стили цвета - для задания цвета фона и переднего плана;

стили рамок - для вывода различных рамок, окружающих текстовые и графические элементы;

стили отступов - для задания ширины различных отступов, окружающих текстовые и графические элементы;

стили фильтрации - для применения специальных эффектов к текстовым и графическим элементам;

стили задания размера - для задания высоты и ширины текстовых и графических контейнеров;

стили позиционирования - для позиционирования элементов страницы в фиксированных пиксельных координатах на странице.

Консорциум WWW поддерживает стандарты языка каскадных таблиц стилей, так же, как это делается для языка разметки XHTML. Текущей версией стандартов, рассматриваемой в данном учебнике, является CSS Level 2 (CSS2).

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

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

Комментарии в XHTML

Контейнерные и пустые теги

Корневой элемент

NSFNET - Развитие Интернет

Обслуживание страниц Web

Пролог

Просмотр локальных страниц Web

Работа с документами XHTML

Развитие стандартов HTML

Редактирование документа и вывод

Редактирование текста с помощью Notepad

Форматировать эту строку текста.

Серверы и клиенты

Сохранение документа XHTML

Сохранение и вывод первой страницы Web

Некоторые средства кодирования страницы Web,

Создание первой страницы Web

Создание присутствия в Web

Стандарты кодирования XHTML

Стандарты соответствия кодированию

Форматировать эту строку текста.

Форматировать эту строку текста.

Тег

Тег

Тег

Тег . здесь находится содержимое страницы .
Листинг 2.1. Шаблон страницы Web (html, txt)
Каждая создаваемая страница начинается с этого кода. Необходимо написать подходящее название для страницы в теге

---

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


Этот параграф также оформляется охватывающим разделом. Внутри этого параграфа слово BLUE использует собственный класс стиля.

---

Листинг 3.42. Объявление и использование различных классов стилей (html, txt)


Рис. 3.17.  Применение классов стилей

Оба параграфа выше оформляют, помещая их внутри раздела, которому присвоен класс стиля Offset. Поэтому параграфы наследуют оформление раздела, которое в данном случае смещает оба параграфа относительно полей страницы и выравнивает их текст по ширине. Эта техника имеет такой же результат, как и объявление селектора ID для оформления раздела (div#Offset) и применение стиля через этот селектор ID (

В каждом параграфе есть отдельные слова, которые получают оформление цветом. Эти слова помещены внутри тегов , которые задают цвет, присваивая теги классу стиля .Blue или .Orange. В связи с этим, если какие-либо другие разделы страницы - параграф, заголовок, что-то еще - понадобится вывести одним из этих цветов, то ограничивающим их тегам можно будет присвоить эти же самые классы стиля. Любое обычное оформление этих тегов будет дополняться этими заданными цветами.

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

---

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

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

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

Листинг 3.2. Общая форма линейной таблицы стилей (html, txt)
Одна или несколько пар property:value задают настройки стиля оформления в атрибуте style тега. Несколько настроек свойств стиля разделяются друг от друга с помощью точки с запятой, для удобства чтения между настройками можно использовать пробелы.
Свойства и значения, которые могут кодироваться для тега, зависят в большой степени от конкретного оформляемого тега. Стилевые настройки для горизонтальной линейки, например, могут включать свойства height, width, color, и text-align, идентичные по результату исключенным атрибутам size, width, color, и align, которые они заменяют. Эти свойства кодируются как линейная таблица стилей, что показано на рисунке 3.2. Атрибут style появляется внутри тега

---

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

---

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

---

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

Области действия и разделы

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

Оформление тегов и

Оформление тегов и

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

Листинг 3.38. Избегайте использования простых селекторов для тегов

и (html, txt)
Однако, используя селекторы ID с этими тегами, можно применять различное оформление для различных тегов и

, не связывая их с одним определенным стилем.
В следующем примере двум параграфам задают один и тот же стиль, помещая их внутри тега

, для которого задается специальное оформление. Это оформление влияет только на этот единственный раздел с помощью своего уникального селектора ID. Оформление других разделов не затрагивается, так как они не имеют этого значения id. В то же самое время два тега , получают свое уникальное оформление через свои уникальные значения id, оставляя незатронутым все остальное оформление охваченного тегами текста.

Этот параграф оформляется наследованием оформления своего контейнерного раздела, который форматируется с помощью "Justify" style.

Это параграф также оформляется наследованием оформления своего контейнерного раздела. Кроме того, к одному из его слов применяется оформление "Blue"

Листинг 3.39. Использование селекторов ID для оформления отдельных тегов

и (html, txt)

Основные стили цвета

Использование цвета для различных элементов страницы можно задавать с помощью свойств color и background-color. Значения цвета (color) можно задавать с помощью названия цвета, шестнадцатеричного значения, представляющего комбинацию оттенков используемых красного, зеленого и синего цветов или десятичным значением RGB (red, green, blue). Например, спецификации цвета могут иметь следующие формы:
color:red color:#FF0000 color:rgb(255,0,0)
Эти задания цветов обсуждаются более полно в дальнейшем. Пока для задания стиля цвета на странице можно применять обычные системные названия или имена цветов. Существует 16 основных имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow), называемых стандартными цветами Windows и показанных на рисунке 3.13. Эти цвета можно использовать для элементов страницы, задавая в таблице стилей с помощью color:name или background-color:name.

увеличить изображение
Рис. 3.14.  Свойства и названия основных цветов

Плавающие изображения

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

Таблица 3.3. Свойство floatСвойствоЗначение

float	left right none

Изображение на рисунке 3.9 выводится у правого поля страницы (float right). Сопровождающий текст параграфа заполняет оставшееся свободным пространство. Задание стиля содержится во встроенной таблице стилей.

Рис. 3.9.  Плавающее изображение

Плавающие изображения

Альтернативой размещению изображения в отдельной строке является размещение изображения у левого или правого поля, позволяя тексту заполнять оставшееся свободное пространство. Сопровождающее изображение смещается вправо от текста на странице.

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


Листинг 3.23. Код страницы со смещенным вправо изображением (html, txt)
Отметим, что свойство float ассоциировано с селектором img в предыдущей таблице стилей. Это свойство тега - тег будет плавающим, в отличие от случая, когда на строке размещается только изображение, которое выравнивается свойством text-align охватывающего тега .
Изображения, которые смещаются на странице влево или вправо, должны кодироваться сразу перед текстом, который окружает изображение. В приведенном выше примере тег находится в начале параграфа, который окружает изображение. Между изображением и окружающим контентом нет никаких символов переноса строк. Тегу присвоено свойство стиля float:right, чтобы поместить у правого поля охватывающего параграфа. Он имеет также параметр стиля margin-left:25px, чтобы оставить пустое пространство между изображением и окружающим текстом слева.
Изображения могут смещаться на странице влево или вправо; они не могут находиться в середине страницы с текстом, окружающим их с обеих сторон. Для плавающих изображений желательно обычно включать дополнительное пустое пространство между изображением и окружающим его текстом, расширяя его поля. Подобно большинству свойств стиля оформления свойство float может применяться для множества других тегов. В дальнейшем мы узнаем, как смещать текстовые контейнеры на странице влево или вправо.
В примере выше все теги оформляются с помощью вложенной таблицы стилей. Хотя это и не показано, но все другие появляющиеся на этой странице теги ,

и будут получать такие же характеристики оформления.

Поля параграфа

Стили полей применимы для многих тегов XHTML, а не только для тега . Фактически любой контейнерный тег может использовать задание полей. Тег является таким тегом. Объявляя для этого тега свойства стиля полей margin, margin-top, margin-right, margin-bottom и/или margin-left, параграф может настроить свои поля со всех сторон блока текста или с каждой стороны независимо.
Следующий код выводит три параграфа, средний из которых использует линейную таблицу стилей для задания левого и правого полей шириной 40 пикселей.
Здесь три параграфа. Первый параграф форматирован с помощью стандартного тега параграфа с используемыми по умолчанию настройками стиля.

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

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

Листинг 3.17. Задание полей параграфа с помощью линейной таблицы стилей (html, txt)
Вывод в браузере этого кода показан на рисунке 3.5.

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

Применение таблиц стилей

Нет ничего необычного в том, чтобы использовать все три типа таблиц стилей для одной страницы Web. Внешняя таблица будет содержать стили, которые являются общими для всех страниц Web; встроенная таблица будет включать в себя стили, которые относятся к определенной странице; линейные таблицы будут применяться к отдельным тегам, которым не требуется общее оформление. Браузер использует это множество таблиц стилей следующим образом.
Первое: все внешние таблицы стилей применяются на странице для заданных селекторов тегов.
Второе: применяются все встроенные таблицы стилей. Если одинаковые селекторы тегов присутствуют во внешних и встроенных таблицах стилей, то встроенные стили переопределяют или расширяют внешние стили.
Третье: применяются все линейные таблицы стилей. Если эти настройки относятся к тем же тегам, которые присутствуют во внешних или встроенных таблицах стилей, то линейные стили переопределяют или расширяют присоединенные и встроенные стили.
Общий действующий принцип состоит в том, что любое определение стиля более нижнего уровня имеет преимущество над эквивалентным значением стиля более высокого уровня. Линейные таблицы стилей имеют преимущество над встроенными таблицами стилей, которые имеют преимущество над внешними таблицами стилей.
Предположим, например, что присоединенная таблица стилей содержит следующее объявление стиля для горизонтальных линеек.
hr {height:1px; width:50%; color:red; text-align:center}
Листинг 3.9. Внешняя таблица стилей для горизонтальных линеек (html, txt)
Все страницы, которые соединяются с этой таблицей стилей, выводят горизонтальные линейки этим стилем. Предположим теперь, что одна определенная страница должна иметь другое оформление линеек, скажем, голубым цветом, а не красным. Поэтому на этой единственной странице кодируется встроенная таблица стилей, чтобы переопределить объявление цвета во внешней таблице стилей.

Листинг 3.10. Встроенная таблица стилей для горизонтальных линеек (html, txt)

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

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

---

Листинг 3.11. Линейная таблица стилей для горизонтальной линейки (html, txt)

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

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

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

Простые селекторы

За счет пересмотра большую часть встроенного оформления можно выполнить с помощью селекторов отдельных тегов и соответствующих объявлений стиля. Эти простые селекторы объявляют используемое по умолчанию оформление тега для всей страницы. Общий формат простого селектора показан в листинге 3.33.
selector {property:value [; property:value] ... }
Листинг 3.33. Общий формат встроенной таблицы стилей для простого селектора (html, txt)
Любое число селекторов можно объединять во встроенной таблице стилей с любым числом свойств стиля. Например, следующие простые селекторы задают форматирование уровня страницы для полей страницы, заголовков и параграфов. В любом месте на странице, где встретится один из этих тегов, браузер будет использовать соответствующий стиль оформления.

Листинг 3.34. Встроенная таблица стилей, использующая простые селекторы (html, txt)
Существуют, однако, ситуации, когда эти стили уровня страницы необходимо для определенных тегов модифицировать. Например, один или несколько параграфов в документе могут требовать отличающегося выравнивания или отступов, или определенный заголовок может использовать другой стиль для выделения его среди остальных заголовков. Хотя можно применять линейные таблицы стилей для переопределения этих встроенных объявлений, существуют способы определения исключительных стилей в самой встроенной таблице стилей.

Селекторы и классы стиля

Использование встроенных таблиц стилей было предложено в качестве обычного способа применения к тегам стилей оформления уровня страницы. Там, где некоторым тегам нужно задать специальные стили, отличающиеся от стилей уровня страницы, для изменения оформления используются линейные таблицы стилей.
Тем не менее, там, где удобно, встроенные таблицы стилей всегда должны быть предпочтительным методом оформления, даже для приложения специальных только одноразовых стилей. Встроенные таблицы стилей локализуют настройки стиля оформления в одном разделе страницы
Листинг 3.37. Задание стилей для селектора ID (html, txt)
Синтаксис p#Special относится к тегу со значением id (#), заданным как "Special". Стандартный отступ первой строки в 25 пикселей, заданный простым селектором p, изменен на 0 пикселей для этого конкретного параграфа. Для этого параграфа также заданы значения левого и правого полей, отличающиеся от обычных параграфов. Однако его текст остается выровненным по ширине, как унаследовано из оформления стандартного параграфа, заданного селектором p. Другими словами, все параграфы наследуют оформление, заданное простым селектором p, если только стили не модифицируются или не дополняются селекторами p#id.
Такой тип идентификация тега и оформления можно использовать для любого тега. Присвойте просто тегу уникальный id и выделяйте его из других тегов такого же типа, добавляя это значение #id к селектору тега.

Ширина и высота изображений

Достаточно часто бывает, что графические изображения имеют не те размеры, которые требуются для размещения на странице Web. Эта проблема постоянно возникает, если не используется или отсутствует программное обеспечение, которое позволяет изменять размер изображения прежде, чем помещать его на странице. Однако с помощью свойств стиля width и height, используемых для этих изображений, размеры изображений можно изменять во время вывода в браузере.
Реальный размер изображения, показанного на рисунке 3.12, равен 162 x 108 пикселей. При выводе на странице его ширина задается равной 100 пикселям с помощью линейной таблицы стилей.


Рис. 3.13.  Динамическое изменение размера изображения
При изменении размеров изображения задают свойство высоты или ширины, но обычно не оба. Браузер автоматически задаст другой размер, чтобы сохранить правильную пропорцию. Можно, конечно, задать оба свойства независимо, если известны правильные измененные размеры или если необходимо создать специальные визуальные эффекты с непропорционально измененными шириной и высотой.
Хотя размеры изображения могут автоматически изменяться при выводе в браузере, его реальные размеры останутся без изменений. Слишком большое изображение может занимать значительное дисковое пространство и создавать задержку при загрузке. В идеале необходимо отредактировать большое изображение, чтобы уменьшить его реальный размер до размеров его изображения на странице, а не использовать стили ширины и высоты для изменения только выводимого размера. Изображение не должно обычно выводиться с размером большим, чем его исходный размер. При увеличении размера можно потерять точность и получить нечеткое изображение.
Вспомните из предыдущего материала, что тег имеет исключенные атрибуты width и height для изменения размеров изображений. Эти атрибуты должны заменяться соответствующими свойствами стиля width и height для удовлетворения стандартам XHTML. Хотя их имена совпадают, способы их применения различаются.
Значения стиля для ширины и высоты можно применять для любых тегов XHTML, а не только для тегов

---

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

Ширина и высота линейки

Как говорилось ранее, разделы страницы Web могут визуально разделяться выводом между ними горизонтальных линеек. Это делается с помощью тега

---

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

---

стили width и height. Такое изменение размеров показано в следующей линейной таблице стилей и выводе браузера.

---

Рис. 3.12.  Задание стиля горизонтальной линейки
При определении ширины элементов страницы часто предпочтительнее кодировать их в виде процентов. В этом случае ширина всегда выводится в правильной пропорции с другими элементами на странице Web, даже если пользователь изменяет размер окна браузера. Если горизонтальная линейка получает размер меньше ширины окна браузера, то ее можно также позиционировать на горизонтальной линии с помощью text-align:left, text-align:center, или text-align:right. В предыдущем примере линейка занимает 75% ширины страницы и расположена по центру.
Обычно все горизонтальные линейки на странице оформлены в одном стиле. Поэтому имеет смысл поместить этот стиль оформления во вложенной или внешней таблице стилей, чтобы ее можно было закодировать один раз для всех линеек на странице или всех линеек на сайте. Следующий код является примером того, как горизонтальные линейки можно стандартизовать для страницы с помощью вложенной таблицы стилей.

Листинг 3.25. Код стиля всех горизонтальных линеек на странице (html, txt)
С помощью такого задания стиля все теги

---

на странице создают линейки толщиной 1 пиксель, 50% от ширины окна браузера (независимо от размера окна) и расположенные горизонтально по центру страницы.

Стиль text-align

Свойство стиля text-align позволяет осуществлять выравнивание элементов страницы left (слева), center (по центру), right (справа) или justified (по ширине). Значения свойства показаны в таблице 3.2.

Таблица 3.2. Свойство выравнивания текста и значенияСвойствоЗначения

text-align	left center right justify

Свойство стиля text-align является заменой исключенного атрибута align, использовавшегося ранее для тегов , , и

---

. С данного момента все горизонтальное выравнивание должно делаться с помощью свойства text-align.

Стиль text-indent

Предыдущие примеры выравнивания параграфа слева показывают их в "блочном стиле", в котором все строки текста прижаты к левому полю. Однако широко распространено использование отступа для первой строки параграфа, чтобы визуально выделить начало нового параграфа. Отступ первой строки на самом деле не требуется, когда параграфы разделены пустыми строками, как в случае страниц Web; тем не менее, такое форматирование может применяться для смягчения внешнего вида страниц.
Для создания отступа первой строки параграфа используется свойство стиля text-indent. Величина отступа задается числом пикселей или как процент от ширины страницы.

Таблица 3.4. Свойство задания отступа и значенияСвойство:Значение

text-indent	npx n%

Следующий код делает отступ первой строки двух параграфов, первого на 25 пикселей и второго на 5% ширины страницы. Вывод в браузере показан на рисунке 3.10.

Этот параграф форматируется с помощью style="text-indent:25px". Первая строка параграфа смещается на 25 пикселей от левого поля. Остальные строки параграфа прижаты к левому полю и переносятся по словам по правому полю.

Этот параграф форматируется с помощью style="text- indent:5%". Первая строка параграфа смещается на 5 процентов ширины страницы от левого поля. Остальные строки параграфа прижаты к левому полю и переносятся по словам по правому полю.

Листинг 3.24. Задание отступа первых строк параграфов (html, txt)

Рис. 3.10.  Отступ первой строки текста в параграфах
В этом примере значения в пикселях и процентах задают примерно одинаковую величину отступа первой строки. Однако при использовании измерения в процентах для отступа параграфа помните, что это значение основано на ширине страницы. Будет создаваться отступ разной величины, в зависимости от ширины окна браузера. Чтобы сохранить фиксированную величину отступа, независимо от размера окна, задавайте значение в пикселях, а не в процентах.

Стили оформления полей страницы

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

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

Стили определения ширины и высоты

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

Таблица 3.5. Стили для задания ширины и высоты элементаСвойствоЗначения

width	npx n%
height

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

Стили выравнивания

Элементы на странице Web обычно располагаются у левого края страницы или на левых границах, созданных свойствами стиля оформления margin или margin-left. Однако часто бывает, что требуется изменить это выравнивание по умолчанию и выровнять элемент страницы по правому краю, разместить его горизонтально по центру страницы или "сместить" элемент влево или вправо, чтобы позволить тексту обтекать стороны элемента.

Стратегии оформления

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

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

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

Определите классы стилей, чтобы выполнять оформление через теги общего назначения, - например, теги и

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

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

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

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

Свойства стиля оформления полей страницы

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

Таблица 3.1. Свойства полей и значенияСвойствоЗначения

margin margin-top margin-right margin-bottom margin-left	npx n% auto

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

Тег

Тег

(division) служит, как и тег , разновидностью маркера. Его назначение состоит в ограничении и определении набора элементов страницы для применения стиля оформления к вложенному множеству. Тег

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

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

, который определяет эти стили. Параграфы наследуют стили охватывающего тега

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

Этот параграф имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между двумя полями.

Этот параграф также имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между полями. Оба параграфа оформлены с помощью охватывающего тега раздела div для применения этих стилей к обоим параграфам.

Листинг 3.32. Код оформления двух параграфов с помощью охватывающего тега

(html, txt)

Рис. 3.16.  Параграфы, оформленные охватывающим тегом

Тег

не имеет никаких видимых собственных характеристик форматирования, кроме того факта, что он создает перенос строки перед и после окаймленного содержимого. Эти переносы строк не видны в приведенном выше примере, так как теги сами создают собственные переносы строк, которые объединяются с переносами строк тега

.
Так как тег

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

для применения форматирования к широкому набору элементов страницы.

Тег

Тег является линейным тегом, который помещают вокруг текста с целью идентификации строки символов, где применяется таблица стилей этого тега. Тег может ограничивать одну букву, слово, фразу, предложение или любую другую подстроку текста с целью ее определения для применения оформления. Напомним также, что линейный тег окружает строку текста, расположенную внутри блочного контейнера.
В следующем параграфе слова "КРАСНЫЙ" и "СИНИЙ" выделяются тегами как слова, для которых эти теги определяют цвет. Когда этот параграф выводится в браузере, эти два слова выводятся соответствующими цветами.
Этот параграф содержит слово RED, которое находится внутри тега , чтобы определить цвет этого слова. В этом предложение для слова BLUE задан этот цвет.

Листинг 3.31. Код оформления отдельных слов в параграфе (html, txt)
Тег является просто маркером для выделения текста, к которому можно применить его таблицу стилей. Он не имеет своих собственных встроенных характеристик форматирования. Он не создает разрыва строки и не создает пробела. Поэтому его можно использовать линейным образом, в обычном потоке текста просто для оформления ограниченного им контента. Конечно, применяемый стиль должен подходить для вложенной строки текста. Например, было бы неуместно применять свойство text-indent для создания отступа "первой строки" для одного слова, ограниченного тегом .

Вертикальные поля

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

Была у Мери овечка,
Была ее шерсть снежно-белой;
И куда бы ни шла Мери,
Овечка бежала за нею.


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

Листинг 3.18. Задание вертикальных полей с помощью линейной таблицы стилей (html, txt)

Рис. 3.6.  Использование настройки полей для увеличения вертикального интервала
Можно применять либо несколько тегов
, либо увеличенные настройки полей для создания вертикальных интервалов. Однако при использовании margin-top и margin-bottom обеспечивается большая точность в пикселях.
При изучении других тегов в этом учебнике помните, что они могут использовать свойства полей для изменения свободного пространства между их содержимым и окружающими элементами на странице. Настройка полей является одним из основных методов для организации содержимого на странице Web.

Внешние таблицы стилей

Если сайт Web имеет множество страниц, то третий вариант таблиц стилей будет, вероятно, лучшим решением. Он позволяет применять одни стили оформления ко всем страницам, не требуя копирования линейных или встроенных таблиц стилей на каждую страницу.
Внешняя таблица стилей является отдельным документом, содержащим настройки property:value в том же формате, что и встроенная таблица стилей. Единственное различие состоит в том, что этот документ не содержит вокруг записей тегов
Листинг 3.3. Общая форма встроенной таблицы стилей (html, txt)
Селектор является именем тега (без охватывающих символов "<" и ">"). Свойства и значения стиля тега представлены в виде списка объявлений стиля, разделенном точками с запятой и помещенном внутри пары фигурных скобок "{ }". Например, следующий код определяет объявления стиля для тега

---

, задавая такие же параметры стиля, как и предыдущая линейная таблица стилей.



Листинг 3.4. Применение встроенной таблицы стилей (html, txt)
Селектор hr связан с четырьмя объявлениями property:value стиля горизонтальной линейки. Когда эти стили определены во встроенной таблице стилей, они автоматически применяются, если браузер встречает в документе тег

---

. Нет необходимости кодировать отдельные линейные таблицы стилей в каждом теге

---

. Тег сам несет в себе оформление стиля, описанное во встроенной таблице стилей. Хотя показанная выше встроенная таблица стилей содержит только один селектор для тега

---

, на самом деле она может содержать любое число записей, в зависимости от того, сколько различных тегов должно быть оформлено. Пример также записан на одной строке. Многие авторы страниц Web предпочитают кодировать настройки property:value на отдельных строчках, как показано на листинге 3.5, чтобы облегчить чтение и редактирование.


Листинг 3.5. Другая форма записи встроенной таблицы стилей (html, txt)

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

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

Выравнивание изображений

Вспомните, что выравнивание изображений происходит при включении тега в контейнерный тег, который выравнивает вложенное изображение. Это выравнивание можно осуществить, помещая тег в тег , к которому применяется стиль text-align. Вложенное в параграф изображение размещается в отдельной строке и выравнивается по левому полю параграфа, по правому полю или размещается в центре страницы. Например, следующий код линейной таблицы стилей в теге задает вывод изображения в центре страницы.

Рис. 3.8.  Выравнивание изображения по центру
Отметим также, что хотя именем свойства является "text"-align (т.е., выравнивание "текста"), содержимое любого вида, вложенное в параграф, текст или что-то другое, будет выводиться в центре строки.

Выравнивание параграфа

Тег окружает блок текста, который также располагает свои строки у левого края страницы или у левой границы, созданной заданием стиля оформления параграфа margin или margin-left. Для параграфа можно задать стиль text-align, чтобы изменить это используемое по умолчанию выравнивание слева.
Следующий код создает четыре параграфа, каждый с линейной таблицей стилей для использования различного выравнивания текста. Браузер выводит эти параграфы, как показано на рисунке 3.7.
Листинг 3.19. Задание выравнивания параграфов с помощью линейных таблиц стилей (html, txt)

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

Листинг 3.20. Задание выравнивания для всех параграфов с помощью встроенной таблицы стилей (html, txt)
Если в дальнейшем будет решено, что все параграфы на всех страницах сайта Web будут выровнены по ширине, то такую встроенную таблицу стилей можно преобразовать во внешнюю таблицу стилей для общего использования всеми страницами.

Выравнивание заголовка

Стили выравнивания текста можно применять к тегам для размещения заголовков на странице слева, в центре или справа. В следующем примере свойство text-align задается для заголовка

в линейной таблице стилей для выравнивания его на странице горизонтально по центру. Это свойство стиля оформления заменяет старый атрибут align="center", использовавшийся ранее для выравнивания заголовков.

Центрированный заголовок

Листинг 3.21. Задание выравнивания заголовка (html, txt)
Как правило, различные заголовки, встречающиеся на одной странице Web, имеют общие стили, чтобы обеспечить общий вид страницы. Поэтому обычно выравнивание заголовков включают во встроенную таблицу стилей для общего использования всеми подобными заголовками. Следующий код задает стили выравнивания для трех размеров заголовков, которые встречаются на странице. Кроме того увеличены верхние поля, чтобы создать дополнительное свободное вертикальное пространство между заголовками и предшествующим текстом.

Листинг 3.22. Задание стилей выравнивания для всех заголовков на странице (html, txt)
Хотя выравнивание текста не требуется для приведенных выше тегов

и

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

Задание индивидуальных полей страницы

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

Листинг 3.16. Задание индивидуальных полей страницы Web с помощью встроенной таблицы стилей (html, txt)
Отметим, что эти свойства можно записывать в любом порядке. Не забывайте только, что пара property:value должна соединяться двоеточием (:), а отдельные объявления разделяются точкой с запятой (;).

Задание полей с помощью линейной таблицы стилей

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

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


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

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

Задание полей с помощью вложенной таблицы стилей

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

¼ + ½ = ¾

Листинг 4.24. Применение стилей для кодов символов (html, txt)

Рис. 4.13.  Коды символов с заданным стилем

Групповые селекторы

Заголовки различного уровня на странице Web должны обладать общим оформлением, так как являются визуальными ключами своей общей функции разделителей разделов содержимого страницы. Часто заголовки используют один тип шрифта и цвет, различаясь размером и выравниванием. Использование тегов облегчает управление стилями заголовков во встроенных таблицах стилей с помощью групповых селекторов.
Групповой селектор - это два или несколько селекторов тегов, разделенных запятыми, которые обладают одинаковым стилем оформления. Например, следующая таблица стилей объявляет общий тип шрифта и цвет для набора тегов , создавая общий визуальный стиль для всех используемых на странице заголовков.

Листинг 4.14. Использование групповых селекторов для оформления группы тегов (html, txt)
Селектор h1, h2, h3 является групповым селектором, поэтому связанные с ним объявления стилей применяются ко всем тегам в этом списке. Предположим далее, что заголовки

располагаются по центру, заголовки

и

выровнены по левому полю и заголовки

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

Листинг 4.15. Использование групповых селекторов для дополнительного оформления групп тегов (html, txt)

Рис. 4.9.  Вывод в браузере заголовков, оформленных групповыми селекторами
Групповые селекторы не отличаются по результату от простых селекторов. Они позволяют просто сократить запись объявления общих стилей. Они также иллюстрируют достаточно четко концепцию наследования стилей. В приведенном выше примере все три заголовка наследуют один тип шрифта и цвет из общего группового селектора h1, h2, h3; заголовки

и

наследуют выравнивание по левому полю из группового селектора h2, h3. Используя преимущества такого наследования, можно избавиться от кодирования отдельных дублирующих стилей для каждого селектора тега.
Кстати, не требуется, чтобы групповые селекторы состояли из тегов одного типа. Все теги, которые используют один стиль, могут быть частью группового селектора. Например, групповой селектор, показанный на листинге 4.16, указывает, что все теги параграфов , теги и

на странице применяют один и тот же тип шрифта и размер.

Листинг 4.16. Использование групповых селекторов для оформления различных тегов (html, txt)

Исключенный тег

Хотя и не используемый в XHTML, но распространенный способ задания оформления шрифта состоит в применении тега . Этот тег, подобно тегу , задает для ограничиваемого текста тип шрифта, размер, и цвет. Общая форма тега и его атрибуты показаны ниже.
... форматируемый текст ...
Атрибут face определяет разделенный запятыми список до трех типов шрифта, которые могут использоваться для текста, заключенного внутри тега . Размеры шрифта можно задавать или изменять с помощью атрибута size. Значение этого атрибута может изменяться от 1 до 7, от наименьшего до наибольшего. Если размер не определен, то по умолчанию применяется системный размер шрифта 3, который соответствует примерно размеру шрифта 12 пунктов. Отметим, что размер шрифта определяется не в пунктах. Размер шрифта может изменяться относительно текущего размера с помощью модификаторов "+" или "-". Поэтому значение атрибута "+1" задает размер шрифта на один размер больше текущего значения.
Цвет шрифта можно задавать с помощью атрибута color. Значение цвета задается именем цвета или шестнадцатеричным значением. Эти способы будут рассмотрены в дальнейшем.

Использование отрицательных значений

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

Рис. 4.6.  Использование оформления текста для создания библиографических записей
Как показано на листинге 4.11, оформление задается окружающим тегом

, который использует класс стиля .biblio для своих параграфов. Левое поле для всех параграфов задается равным 20px. Такая настройка смещает весь параграф, так что задание смещения в -20px смещает первую строку влево до края поля.

Библиография

Duthie, P. A. & MacDonald, M. (2002). ASP.NET in a Nutshell: A Desktop Quick Reference. Sebastopol, CA: O`Reilly & Associates, Inc.

Goodman, Danny (2002). Dynamic HTML: The Definitive Reference.. Sebastopos, CA: O`Reilly & Associates, Inc.

Griffin, J., Morales, C., & Finnegan, J. (2003). Web Design & Development Using XHTML. Wilsonville, Oregon: Franklin, Beedle & Associates.

Листинг 4.11. Код для создания выступающих параграфов (html, txt)

Коды символов

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

Таблица 4.6. Специальные символы - названия и кодыВыводимый символНазваниеКодОписание

"	"	"	двойная кавычка
&	&	&	амперсанд
'		'	апостроф
<	<	<	меньше
>	>	>	больше
™	™	™	торговая марка
			неразрывный пробел
?	¢	¢	центы
¦	¦	¦	разорванная вертикальная черта
§	§	§	параграф, раздел
©	©	©	авторское право
«	«	«	левая угловая кавычка
»	»	»	правая угловая кавычка
¬	¬	¬	знак отрицания
®	®	®	зарегистрированная торговая марка
°	°	°	градус
±	±	±	плюс/минус
¶	¶	¶	параграф, абзац
·	·	·	точка посредине
•	•	•	маркер, буллит
?	¼	¼	дробь одна четвертая
?	½	½	дробь одна вторая
?	¾	¾	дробь три четвертых
?	÷	÷	деление
?	×	×	умножение
o	ø	ø	маленькое перечеркнутое о
O	Ø	Ø	большое перечеркнутое О
?		–	короткое тире
?		—	длинное тире

В качестве примера применения этих специальных символов следующий код оставляет по пять пробелов между словами, используя между ними символы неразрывного пробела ( ) и маркера (•).
МЕЖДУ  •  ЭТИМИ  •   СЛОВАМИ  •  ЗАДАНО  •   ПО  •  ПЯТЬ  •   ПРОБЕЛОВ.
Листинг 4.20. Использование специальных символов для вывода страницы Web (html, txt) МЕЖДУ · ЭТИМИ · СЛОВАМИ · ЗАДАНО · ПО · ПЯТЬ · ПРОБЕЛОВ.
Листинг 4.21. Вывод браузером фиксированных пробелов и маркеров (html, txt)

Названия цветов

Цвета можно также определять с помощью специальных названий цветов. Большинство браузеров распознает более 200 названий цветов. Обычное множество из 16 цветов Windows представлено ниже с названиями цветов и их соответствующими шестнадцатеричными значениями и значениями RGB.
Название HEX Значение цвета значение RGB

Рис. 4.11.  Названия цветов Windows и значения Hex и RGB

Параметры шрифта

Когда текст изображается в браузере, он выводится используемым по умолчанию типом, размером, стилем и цветом шрифта. Большинство браузеров используют тип шрифта Times New Roman, размером около 12 пунктов, и черный цвет. Однако некоторые параметры таблицы стилей позволяют изменять эти настройки, чтобы придать страницам другой вид.
При работе с текстовыми шрифтами необходимо учитывать, что тип шрифта, который выводится в браузере, ограничен набором шрифтов, установленных в компьютере. Поэтому необходимо помнить о том, какие типы компьютеров используют посетители страницы и какие типы шрифтов могут быть у них установлены. Лучше придерживаться распространенных типов, если только предполагаемая аудитория Web не известна заранее. Следующие виды шрифтов, типичные на ПК на основе Windows, представлены здесь размером 12 пунктов.

Рис. 4.1.  Типичные виды шрифтов ПК (arial, arial narrow, comic sans ms, courier new, georgia, impact, tahoma, times new roman, verdana)

Представление заголовков таблицами стилей

Вспомните, что теги заголовков окаймляют строки текста для вывода одним из шести стилей заголовков. Число n в теге изменяется от 1 (самый крупный) до 6 (наименьший). Заголовки выводятся полужирными символами используемого по умолчанию типа шрифта. Конечно, для изменения настроек тега заголовка можно применить таблицу стилей. Например, объявление стиля

Листинг 4.12. Оформление тега заголовка в таблице стилей (html, txt)
выводит заголовок размером 2, наклонным типом шрифта Arial, переопределяя обычный вывод заголовка шрифтом Times New Roman. Другие стили могут использоваться в теге для вывода заголовка с дополнительными характеристиками оформления.
Таким же образом, как физические и логические теги шрифтов можно реализовать с помощью таблиц стилей, можно создавать заголовки с помощью таблиц стилей вместо использования специальных тегов . Следующая таблица стилей объявляет классы стилей, идентичные шести типам заголовков. Это кодирование выводится в браузере, как показано на рисунке 4.8.

Заголовок уровня 1

Заголовок уровня 2

Заголовок уровня 3

Заголовок уровня 4

Заголовок уровня 5

Заголовок уровня 6

Листинг 4.13. Теги оформления заголовков стилями (html, txt)

Рис. 4.8.  Вывод в браузере заголовков, созданных с помощью объявлений стилей
Таким образом, существует несколько возможных вариантов оформления заголовков. Можно использовать теги с настройками по умолчанию, использовать эти теги с измененным оформлением или вообще отказаться от тегов и создать свои собственные классы заголовков. Ни один из вариантов не является лучшим решением во всех случаях.

Применение свойств текста

Результаты действия некоторых свойств текста можно видеть ниже, как показано на рисунке 4.5. Вывод организован так, чтобы напоминать печатный отчет.

Рис. 4.5.  Использование оформления для создания отчета
Большая часть оформления находится во встроенной таблице стилей, определяющей классы стиля, которые применяются тегами и

. Линейные таблицы стилей используются в одном определенном разделе страницы для одноразовых стилей, которые не применяются в других разделах документа. Используемый по умолчанию формат страницы задается селектором тега : полуторный (1 1/2) межстрочный интервал, отступ первой строки параграфа и выравнивание текста по ширине.
Листинг 4.7. Код создания отчета (html, txt)
Уместен, вероятно, комментарий относительно воспроизведенного здесь следующего раздела вывода областей

и .
Практический 4 3 2 1 1 2 3 4 Эмоциональный Факты 4 3 2 1 1 2 3 4 Чувства Действие 4 3 2 1 1 2 3 4 Обсуждение
Листинг 4.8. Использование span внутри div (html, txt)
По умолчанию тег

расширяет ширину страницы, охватывая три блока текста. Являясь блочным, тег

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

Практический
Факты
Действие
4 3 2 1 1 2 3 4
4 3 2 1 1 2 3 4
4 3 2 1 1 2 3 4
Эмоциональный
Чувства
Обсуждение

Листинг 4.9. Код вложения span в div (html, txt)
Тег является линейным тегом, не задающим перенос строки или дополнительные пустые строки перед или после тега. Поэтому несколько тегов , закодированные один за другим, выводятся браузером на одной строке. Хотя слова и числа внутри тегов выводятся на разных строках, содержимое самих тегов появляется рядом на одной строке внутри окружающего тега

.
В этом примере теги задают также фиксированную ширину и различное выравнивание, чтобы равномерно распределить свое содержимое. Это пример использования свойства width, которое применялось ранее для задания размеров горизонтальных линеек и графических изображений, для определения точных размеров блока текста. Другие примеры определения размеров блоков текста будут представлены далее.
Еще одно замечание относительно тегов : тег не может появиться в строке сам по себе. То есть, тег должен быть ограничен блочным тегом, таким, как тег или

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

_________________

Листинг 4.10. Вложение тега в блочный тег (html, txt)
Если этот тег будет закодирован не внутри своего контейнерного тега

, то он не пройдет проверку (валидацию) XHTML 1.1, хотя и может выводиться браузером правильно.

Промежутки между буквами и словами

Вспомните, что свойства letter-spacing и word-spacing могут принимать как положительные, так и отрицательные значения. Строки на рисунке 4.10 заданы с различными значениями промежутков между буквами и словами для демонстрации результатов.

Рис. 4.7.  Положительные и отрицательные интервалы между буквами и словами

Шестнадацатеричные цвета

Шестнадцатеричные числа имеет в основании число 16. То есть, значения формируются с помощью 16 цифр счета 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифра 0 эквивалентна по значению десятичному 0, цифра F эквивалентна десятичному значению 15. При использовании для представления значений цвета применяются три пары шестнадцатеричных цифр для представления объединенной интенсивности красного, зеленого и синего цветов; этому значению цвета предшествует символ "#", чтобы указать на шестнадцатеричное значение:
#rrggbb
Значение шестнадцатеричного "00" (наименьшее двузначное шестнадцатеричное значение эквивалентное десятичному 0) с точки зрения цвета означает отсутствие цвета; значение "FF" (наибольшее двузначное шестнадцатеричное значение эквивалентное десятичному 255) означает цвет полной интенсивности. Таким образом, шестнадцатеричное значение "#FF0000" представляет красный цвет: "#FF" в позиции "#rr" присваивает полную интенсивность красному цвету; "00" в позициях "gg" и "bb" представляет отсутствие интенсивности зеленого и синего цветов.
Аналогично, значение "00FF00" является зеленым цветом, а значение "0000FF" -- синим. Белый цвет представляется всеми цветами полной интенсивности: "FFFFFF"; черный цвет отсутствием цветов: "000000". Между этими крайними значениями находятся цвета всех оттенков и интенсивностей более чем 16 миллионов видов, хотя не все цвета могут правильно отображаться на мониторах всех компьютеров.

Специальные символы

Существуют определенные символы текста, которые невозможно вывести в браузере, если ввести их непосредственно в текстовом редакторе. Некоторые из этих символов имеют специальное значение в XHTML, и, вместо их вывода, браузер будет интерпретировать эти символы как код XHTML. Например, символы "<" (меньше) и ">" (больше) используются для определения тегов. Поэтому нельзя вводить эти символы непосредственно как часть контента страницы Web, так как они будут интерпретироваться как теги XHTML, а не выводиться как символы "меньше" и "больше"".
Другие символы, такие, как © (copyright) и ™ (trademark), не имеют эквивалента на клавиатуре. Тем не менее, требуется способ представления их на странице Web. Далее, браузеры всегда объединяют последовательности символов пробелов в один пробел, независимо от количества введенных в текстовом редакторе пробелов. Однако, иногда может понадобиться оставить более одного пробела между буквами и словами.

Стили шрифта

Существует шесть параметров стиля шрифта, которые можно использовать для создания разнообразия, привлекательности или выделения в тексте на странице Web. Эти настройки свойств перечислены в таблице 4.1.

Таблица 4.1. Свойства стиля оформления шрифта СвойствоЗначение

font-family	Может быть именем любого системного шрифта или обобщенным именем serif, sans-serif, cursive, monospace. Можно определять несколько значений, в порядке предпочтения, разделяются запятой. Используется первый найденный шрифт font-family:arial,verdana,sans-serif.
font-size	Размер шрифта, определяемый обычно в пунктах (pt). Если единицы измерения не заданы, используются пиксели (px)
font-style	Стиль шрифта определяется как normal, italic, oblique
font-weight	Насыщенность шрифта определяется как lighter, normal, bold, bolder или значением от 100 (самый светлый) до 900 (самый насыщенный). Не все числовые значения в диапазоне распознаются браузерами.
font-variant	Вариант шрифта определяется как normal small-caps
font	Сокращенный способ определения множества стилей шрифта с помощью задания в строгом порядке значений, разделенных пробелами: font-style, font-variant, font-weight, font-size, font-family. Если значения не задаются, они могут отсутствовать в списке: style="font:italic bold 10pt times new roman"

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

для блоков текста.
Свойство font-family задействуют для изменения настройки браузера по умолчанию, т.е. изменения шрифта Times New Roman. При использовании для вывода специальных стилей шрифта необычного семейства шрифтов, которое может не существовать на компьютере каждого пользователя, необходимо предоставить другие, более распространенные виды шрифтов, из которых может выбирать компьютер. Свойство font-family задает эти варианты в разделенном запятыми списке. Браузер ищет в компьютере первый подходящий вид шрифта и применяет его для вывода текста. Например, следующая таблица стилей задает стандартный стиль шрифта для страницы.


Листинг 4.1. Выбор значений для семейства шрифтов (html, txt)

Сначала браузер пытается использовать шрифт Helvetica. Если он отсутствует в системе пользователя, то браузер ищет шрифт Verdana. Если он также отсутствует, то браузер применяет любой доступный встроенный тип шрифта sans-serif. Обобщенные имена шрифтов serif, sans-serif, и monospace всегда будут находить тип шрифта, который похож на Times New Roman, Arial, и Courier, соответственно.

Необходимо также задать свойство font-size, чтобы изменить применяемый браузером по умолчанию размер в 12 пунктов. Обычно размер шрифта задается в пунктах; однако можно использовать пиксели для задания высоты букв для специального оформления.

Свойство font-style обычно определяет выбор между стилем normal и italic; oblique обычно выводится так же, как italic. По умолчанию браузер использует стиль normal.

Свойство font-weight обычно применяется для выбора между нормальным (normal) и полужирным (bold) шрифтом. Значения для более светлого и более насыщенного шрифтов, как правило, в браузере не различаются, как не различаются и все числовые значения. Значения между 100 и 500 задают обычную (normal) насыщенность, а значения между 600 и 900 определяют полужирные символы (bold).

Стиль font-variant со значением small-caps переводит все буквы в верхний регистр со слегка меньшим размером шрифта. Определение normal возвращает вывод текста к стандартному виду.

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

{font-family:arial; font-variant:small-caps; font-size:10pt; font-weight:bold; font-style:italic}

Листинг 4.2. Настройка шрифта с использованием отдельных свойств оформления (html, txt)

или как показано на листинге 4.3,

{font:italic small-caps bold 10pt arial}

Листинг 4.3. Настройка шрифта с использованием одного свойства font (html, txt)


со значениями, разделенными пробелами. При использовании свойства font не требуется определять все значения, но они должны быть представлены в строгом порядке: font-style font-variant font-weight font-size font-family. Типичное объявление может включать, например, только значения font-size и font-family: {font:10pt arial}.

Следующий код применяет встроенную таблицу стилей с различными комбинациями настройки шрифта текста. В этом примере все значения оформления стиля используют сокращенное свойство font. Вывод в браузере этой страницы показан на рисунке 4.2.

Оформление шрифта

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

Эти два параграфа смещают относительно окружающих параграфов, помещая их внутри раздела. Раздел имеет левое и правое поле по 25 пикселей, и ни один из параграфов не использует отступ первой строки.

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

Листинг 4.3. Задание стилей оформления шрифта для страницы (html, txt)


Рис. 4.2.  Приложение стилей шрифта

Оформление тега задает формат по умолчанию для всей страницы. После этого применяются различные классы стилей для отдельных частей текста.

Свойства цвета текста

Можно задавать цвет текста на странице или цвет фона контейнера, содержащего текст. Два эти свойства стиля показаны в следующей таблице.

Таблица 4.5. Свойства стиля цветаСвойствоЗначение

color	#rrggbb rgb(r,g,b) название цвета
background-color	#rrggbb rgb(r,g,b) название цвета

Цвета могут задаваться в диапазоне от всей страницы, связывая стиль цвета с тегом , и до одного текстового символа, связывая стиль цвета с тегом , окружающим символ. Для определения свойств цветов можно использовать шестнадцатеричные значения, RGB и названия цветов в любой комбинации.
Различные комбинации цветов фона и текста показаны в следующем коде. Вывод браузером этой страницы показан на рисунке 4.12.
Листинг 4.19. Код задания на странице свойств цвета текста (html, txt)

Рис. 4.12.  Изменение свойств цвета текста
Вся страница имеет серый фон с белыми буквами, что задается настройкой стиля для селектора body. Определены три класса стиля для приложения ко второму параграфу, чтобы переопределить эти настройки страницы. Класс PARAstyle применяется к параграфу, чтобы сделать его текст черным [rgb(0,0,0)]; класс PHRASEstyle применяется к части параграфа, чтобы изменить цвет текста с черного на синий [#0000FF]; класс TEXTstyle применяется к подстроке текста, чтобы вывести зеленые буквы на желтом фоне.
Конечно, скорее всего, такое количество цветов на одной странице вряд ли будет использоваться, так как чрезмерное использование цветов может отвлекать от информационного содержания страницы; однако этот пример дает общее представление о том, как гибко можно применять цвета фона и текста для элементов страницы.


Листинг 4.19. Код задания на странице свойств цвета текста

Рис. 4.12.  Изменение свойств цвета текста
Вся страница имеет серый фон с белыми буквами, что задается настройкой стиля для селектора body. Определены три класса стиля для приложения ко второму параграфу, чтобы переопределить эти настройки страницы. Класс PARAstyle применяется к параграфу, чтобы сделать его текст черным [rgb(0,0,0)]; класс PHRASEstyle применяется к части параграфа, чтобы изменить цвет текста с черного на синий [#0000FF]; класс TEXTstyle применяется к подстроке текста, чтобы вывести зеленые буквы на желтом фоне.
Конечно, скорее всего, такое количество цветов на одной странице вряд ли будет использоваться, так как чрезмерное использование цветов может отвлекать от информационного содержания страницы; однако этот пример дает общее представление о том, как гибко можно применять цвета фона и текста для элементов страницы.

Свойства текста

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

Таблица 4.2. Свойства оформления текстаСвойствоЗначение

letter-spacing	Задает горизонтальный интервал между буквами текста элемента. Значениями являются normal, npx, auto.
line-height	Задает высоту строки текста элемента. Значение в пикселях или пунктах является реальной высотой; число или процент является коэффициентом для текущего размера шрифта. normal, npx, npt, n, n%.
text-align	Задает горизонтальное выравнивание текста в элементе. Значениями являются left, center, right, justify.
text-decoration	Задает дополнительное оформление текста внутри элемента. Значениями являются none, line-through, overline, underline.
text-indent	Задает отступ текста внутри элемента. Значениями являются npx n%
text-transform	Задает использование прописных и строчных букв в элементе. Значениями являются none, capitalize, lowercase, uppercase.
vertical-align	Задает вертикальное выравнивание содержимого элемента. Значениями являются bottom, top, baseline, middle, sub, super, text-bottom, text-top.
word-spacing	Задает величину интервала между словами в элементе. Значениями являются npx, normal.

Мы уже знакомы со свойствами text-align и text-indent. Первое из них управляет выравниванием отдельных строк текста в блоке текста; второе задает величину отступа в начале первой строки текста.
Существует два свойства, которые управляют величиной горизонтального интервала в строке. Свойство word-spacing задает число пикселей между словами; свойство letter-spacing - число пикселей между буквами. Эти свойства используются для растягивания (с помощью положительных значений) или сжатия (с помощью отрицательных значений) слов или букв в горизонтальном направлении, добавляя или удаляя между ними пустое пространство.
Величина вертикального интервала в текстовом блоке задается свойством line-height. Хотя для измерения можно использовать пиксели или пункты, числовое значение лучше соответствует знакомым настройкам. Оно является коэффициентом текущего размера шрифта; поэтому объявление line-height:1.5 соответствует интервалу в полторы строки, а line-height:2 соответствует двойному интервалу. Отметим, что дробные значения являются допустимыми. Поэтому задание line-height:.8 сужает интервал между строками до 80% обычного межстрочного интервала.
Существует два свойства текста, которые лучше считать свойствами шрифта, так как они влияют на внешний вид символов. Свойство text-decoration прочерчивает линию над символами (overline), под символами (underline) или через символы (line-through). Свойство text-transform преобразует текст в символы верхнего регистра (uppercase), символы нижнего регистра (lowercase) или делает первые буквы слов заглавными (capitalize).
Свойство vertical-align имеет ряд различных применений, в зависимости от тега, в котором оно используется. Как свойство оформления шрифта оно может, например, преобразовать символы в верхние индексы (super) или нижние индексы (sub). Как свойство выравнивания текста оно позиционирует текст относительно его контейнера или относительно окружающего содержимого. Примеры этого свойства даются при обсуждении отдельных тегов или задач оформления.

Тег

Обычно браузер никак не форматирует текст, если текст не окружен тегами XHTML. Хотя в текстовом редакторе код мог быть как-то организован с помощью средств редактора, в браузере все смежные пробелы и пустые строки объединяются в одиночные пробелы и строки. Однако существует один случай, когда сформатированный в редакторе текст может выводиться таким же образом в браузере.
Блок текста, окруженный блочным тегом

 ("preformatted" или "preserve"), выводится моноширинным (равномерным) шрифтом (monospace) точно в том же виде, как он был сформирован в редакторе. То есть, пробелы между символами и пустые строки, использованные для форматирования кода XHTML в редакторе, точно воспроизводятся в браузере, пробел за пробелом и строка за строкой. Тег 
 часто применяется для создания простых таблиц, где выравнивание столбцов создается с помощью пробелов. Следующий код, например, создает таблицу, которая выводится в браузере подобно тому, как она была введена в редакторе.
 Таблица 1 Продажи по регионам ----------------------------------------------- Регион/Год 2000 2001 2002 2003 ----------------------------------------------- Восток 35.2 37.4 39.8 40.0 Запад 28.0 25.6 27.4 29.8 Юг 102.3 86.1 98.6 100.2 Север 10.5 8.6 9.8 10.4 ----------------------------------------------- 


Листинг 4.17. Использование тега 
 для сохранения форматирования редактора (html, txt)

Так как все строки текста помещены внутри тега 
, таблицу можно сформировать в редакторе с помощью пробелов и пустых строк. Это выравнивание возможно, потому что редактор и браузер в данном случае выводят символы моноширинным шрифтом (т.е. шрифтом постоянной ширины), создавая равномерно распределенные символы. Необходимо проверить только, что редактор применяет моноширинный шрифт (например, Courier New), чтобы аккуратно распределить текст. Вывод браузера здесь не показан, так как он совпадает с организацией таблицы, создаваемой в редакторе.
К моноширинному тексту можно добавить небольшое форматирование, если оно не изменяет размера символов, меняя тем самым величину интервала между буквами. Следующий код, например, задает для предыдущей таблицы стили шрифта полужирный и курсив, а также цвет текста.
Проверьте только, что таблица выровнена требуемым образом, прежде чем добавлять дополнительные теги оформления, что визуально смещает выравнивание текста при просмотре в редакторе. Однако эти дополнительные теги внутри тега 
 не добавляют в таблицу пробелы при просмотре в браузере. 
 Таблица 1 Продажи по регионам ---------------------------------------------- Регион/Год 2000 2001 2002 2003 ---------------------------------------------- Восток 35.2 37.4 39.8 40.0 Запад 28.0 25.6 27.4 29.8 Юг 102.3 86.1 98.6 100.2 Север 10.5 8.6 9.8 10.4 ---------------------------------------------- 


Листинг 4.18. Добавление оформления к тексту, форматированному тегом 
 (html, txt)


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


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


Таблица 4.3. Теги физических стилейТег физического стиляВывод в браузереЭквивалент в таблице стилей
big
big
font-size:18px
bold
bold
font-weight:bold
italic
italic
font-style:italic
small
small
font-size:12px
typewriter
typewriter
font-family:courier new
subscript
subscript
vertical-align:sub
superscript
superscript
vertical-align:super
strikeout (исключен)
strikeout
text-decoration:line-through
underscore (исключен)
underscore
text-decoration:underline


Как показано в приведенной выше таблице, обрамление текстовой строки тегами ..., например, преобразует текст в полужирные символы точно того же стиля, что и задание свойства font-weight:bold. Будут ли использоваться эти теги физических стилей или свойства стилей CSS, является вопросом личного предпочтения. Отметим, что теги strikeout и underscore исключены и порождают ошибки при проверке на соответствие XHTML Strict.
Эти теги могут иметь также связанные с ними свойства стиля. Например, объявление в таблице стилей b {color:red} связывает color с селектором b. Поэтому любой текст, задаваемый полужирным с помощью тега , будет также выводиться красным цветом.


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


Таблица 4.4. Теги логических стилейТег логического стиляНазначениеВывод в браузере
abbreviation
Указывает сокращение
abbreviation
acronym
Указывает акроним
acronym
citation
Содержит цитату или ссылку на другие источники
citation
code
Указывает фрагмент кода программы
code
definition
Указывает, что это пример определения термина
definition
emphasis
Указывает на выделение
emphasis
strong
Указывает на более сильное выделение
strong
keyboard
Указывает текст, вводимый пользователем
keyboard
sample
Определяет пример вывода программы, сценария и т.д.
sample
variable
Указывает экземпляр переменной или аргумента программы
variable


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


Теги стиля шрифта
Символы текста могут использовать такие стили, как bold (полужирный), italic (курсив), underscore (подчеркнутый) и другие для выделения или акцентирования букв и слов. Хотя эти стили можно задавать с помощью таблицы стилей, существуют также автономные теги, которые можно применять для непосредственного обрамления и форматирования символов текста.


Вложенные стили
Приведенная выше страница включает вложенные таблицы стилей, где внутренняя настройка стиля наследует и затем временно переопределяет, или изменяет, настройки внешнего стиля. Внешний стиль , например, задает вывод страницы шрифтом типа Arial размером 12 пунктов с полями страницы 20 пикселей и отступом параграфа 25 пикселей. Эти настройки остаются в силе, пока не будут переопределены, например, вложенными стилями 
, которые изменяют поля для двух вложенных параграфов на 25 пикселей и задают отступ параграфа как 0 пикселей. Эти стили разделов переопределяются далее в одном из вложенных параграфов, в котором стиль шрифта изменяется на Comic Sans MS 13 пунктов, сохраняя поля и отступ из раздела. В этом параграфе теги  используются для переопределения стиля параграфа для отдельных строк текста, которые будут иметь отличающийся тип шрифта и раз меры. Таблицы стилей могут вкладываться друг в друга, так что стили каскадно спускаются на любое количество уровней. Окончание действия настроек стиля происходит в обратном порядке. Этот момент иллюстрирует следующий код, показывающий структуру со сдвигами тегов , которые применяют, а затем удаляют увеличивающиеся размеры шрифта с помощью линейных таблиц стилей.
  Здесь  показано  вложение  стилей  друг  в  друга.  


Листинг 4.4. Вложенные настройки стиля, использующие теги  (html, txt)


Рис. 4.3.  Применение вложенных стилей шрифта с помощью тегов 
Хотя такое количество вложенных стилей вряд ли будут часто использоваться, суть вопроса состоит в том, что каждый закрывающий тег , начиная с самого внутреннего, завершает действие связанного с ним стиля, что приводит к возвращению действия следующего внешнего стиля, пока не будет отменено действие всех вложенных стилей. Не забывайте только правильно поддерживать пары открывающих и закрывающих тегов оформления.
Приведенный выше пример еще раз подчеркивает тот факт, что теги  не имеют своих собственных характеристик форматирования. Хотя они записаны на отдельных строках, чтобы показать вложенную структуру примера, они не создают переноса строк или пробелов при выводе в браузере. Результат вывода такой же, как если бы код был записан в виде следующей непрерывной строки.
Здесьпоказановложениестиля  другв друга.




Листинг 4.5.  Другая запись кода задания вложенных стилей (html, txt)


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

 Here 
 are 
 styles 
 nested 
 inside 
 one 
 another. 



Листинг 4.6. Вложенные настройки стилей, использующие теги 
 (html, txt)



Рис. 4.4.  Применение вложенного оформления шрифта с помощью тегов 


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


Вывод кода XHTML
Если необходимо выводить теги XHTML как часть текста на странице Web, то нельзя просто ввести символы "<" и ">". Эти символы воспринимаются браузером как вложенные теги XHTML и будут соответственно интерпретироваться. Вместо этого необходимо использовать для вывода этих символов специальные символы XHTML "<" и ">".
Предположим, что на странице Web нужно вывести следующий код XHTML.
Это параграф, в котором слово RED выводится красным цветом, помещенное внутри тега , к которому применяется класс стиля.


Листинг 4.22. Вывод в браузере кода XHTML (html, txt)

Этот код необходимо ввести в текстовом редакторе, используя специальные символы вместо символов < и >.
 <p>Это параграф, в котором слово <span class="red"> RED</span> выводится красным цветом, помещенное внутри тега <span> , который использует класс стиля.</p> 


Листинг 4.23. Код для вывода тегов XHTML в браузере без интерпретации (html, txt)


Графические форматы
Анимированные изображения
Несколько одиночных изображений можно упаковать вместе для создания анимированных изображений GIF. Они являются файлами изображений, содержащими два и более изображений, которые открываются по очереди в определенном порядке.

Рис. 5.4.  Анимированное изображение GIF
Следующий экран Adobe ImageReady показывает создание нескольких из 60 изображений, которые используются для создания показанных выше часов, секундная стрелка которых последовательно показывает все 60 секунд. Каждое положение стрелки создается в отдельном слое изображения. Программа преобразует слои в анимационные кадры, или ячейки, которые выводятся в определенной последовательности, когда сохраняются как файл GIF.

Рис. 5.5.  Экран Adobe ImageReady, который показывает анимационные ячейки, созданные из отдельных слоев изображения часов
Немного отличающаяся техника анимации используется в других программах анимации. Некоторые программы для анимации GIF требуют создания отдельных сохраненных изображений GIF. Каждое изображение представляет собой отдельный кадр анимации. Эти отдельные файлы GIF импортируются в программу и преобразуются в последовательность ячеек анимации.
Файл анимированного GIF извлекается браузером, так же, как и любой другой файл GIF. При выводе в браузере файл создает анимацию. Конечно, если у вас нет опыта работы с графикой или не хватает терпения создавать последовательность изображений для анимации, то необходимые анимированные изображения GIF вполне можно найти в Web.


Автономные изображения
Если изображение появляется отдельно стоящим в строке, то его можно сместить по горизонтали влево, вправо или поместить в центре. Такое позиционирование осуществляется с помощью применения стиля text-align, только не для самого изображения, а для охватывающего изображение контейнера, обычно тега  или 
, который отделяет свое содержимое от окружающего текста с помощью пустой строки или переноса строки.




Рис. 5.11.  Горизонтальное выравнивание изображения с помощью тега 
В приведенном выше примере тег  вложен внутрь параграфа, чтобы отделить его от окружающего текста пустыми строками. Содержимое параграфа выравнивается по центру, размещая, таким образом, содержащееся в параграфе изображение по центру.


Фильтр alpha()
Фильтр alpha() является ссылкой на альфа-канал изображения, который используется для управления плотностью или прозрачностью изображения. Существует четыре стиля alpha, каждый из которых производит различные эффекты или обесцвечивание изображения от полной до частичной интенсивности. Эти четыре варианта фильтров alpha - uniform, linear, radial, и rectangular - представлены в таблице 5.4.


Таблица 5.4. Свойства и значения фильтра alpha()СвойствоЗначения
filter:alpha()
style=0 (uniform) opacity=n

style=1 (linear) opacity=n finishOpacity=n startX=n finishX=n startY=n finishY=n

style=2 (radial) opacity=n

style=3 (rectangular) opacity=n



Фильтр blur()
Фильтр blur() создает впечатление движения, размывая изображение на определенное число пикселей в определенном направлении. Свойства этого фильтра показаны в таблице 5.5.


Таблица 5.5. Свойства и значения фильтра blur()СвойствоЗначения
filter:blur()
strength=n direction=n add=true|false


Свойство strength=n задает число пикселей для размывания: чем больше число, тем больше размывание. Свойство direction=n задает угол размывания в градусах, при этом 0 соответствует направлению вверх, 90 - направлению вправо, 180 - направлению вниз и 270 - направлению влево. Можно использовать промежуточные значения. Свойство add со значением true создает наложение размывания на исходное изображение для создания эффекта размытого движения, а не просто размытого изображения.
Следующий код создает изображение, показанное на рисунке 5.28 Размывание на расстояние 25 пикселей выполняется влево от изображения.



Рис. 5.28.  Изображение с фильтром blur()


Фильтр dropShadow()
Существуют определенные фильтры, которые нельзя применить непосредственно к изображению, а нужно применять к контейнеру, окружающему изображение. Изображение может находиться, например, внутри тега  или 
, с которыми работает фильтр. По сути, фильтр применяется к содержимому контейнерного тега.
Фильтр dropShadow() является примером одного из таких фильтров, который должен использоваться посредством контейнера. Для правильной работы контейнер должен быть достаточно большого размера, чтобы вмещать изображение и падающую от него тень. Свойства и значения фильтра dropShadow() показаны в таблице 5.6.


Таблица 5.6. Свойства и значения для фильтра dropShadow()Свойство:Значения
filter:dropShadow()
color=color offX=n offY=n


Фильтр dropShadow() требует задания трех свойств. Свойство color=color задает цвет падающей тени; можно использовать название любого цвета или числовое значение. Свойство offX=n задает горизонтальную ширину тени в пикселях; свойство offY=n задает вертикальную высоту тени в пикселях. Помните только, что эти значения применяются к контейнерному элементу, а не к самому изображению. Поэтому необходимо задавать ширину и высоту контейнера достаточно большими, чтобы в нем могло поместиться изображение и его падающая тень.
В следующем примере изображение имеет размер 225 х 150 пикселей и падающую тень в 10 пикселей. Поэтому его контейнерный раздел имеет размер 235 x 160 пикселей, чтобы в нем разместилось само изображение плюс его горизонтальная и вертикальная падающая тень.
  



Рис. 5.33.  Изображение, выведенное с применением фильтра dropShadow() для контейнерного тега 

Падающую тень можно применять для изображения, даже если ее точный размер неизвестен. Задайте просто ширину или высоту контейнера равной 0px. Если одно из таких значений присутствует, то контейнер будет расширяться, чтобы вместить свое содержимое. Необходимо также задать для изображения значения margin-right и margin-bottom, которые не меньше ширины падающей тени, чтобы было пространство для ее изображения. Следующий пример использует эту методику для вывода такой же падающей тени, как и на предыдущем рисунке.
  



Фильтр emboss()
Фильтр emboss() выводит изображение в виде выпуклой текстуры (барельеф) с помощью полутоновых значений. С этим фильтром не связаны никакие свойства и значения, только специальное имя этого фильтра Microsoft.
Изображение на рисунке 5.29 создано с помощью следующего кода. Обратите внимание на полное имя этого фильтра.



Рис. 5.29.  Изображение с фильтром emboss()


Фильтр engrave()
Фильтр engrave() выводит изображение как выгравированнуюя текстуру с помощью полутоновых значений. Его действие обратно действию фильтра emboss(), т.е. создается текстура обратного барельефа. Для данного фильтра не существует свойств или значений, только специальное имя этого фильтра Microsoft.
Следующий код создает изображение, показанное на рисунке 5.30.



Рис. 5.30.  Изображение с фильтром engrave()


Фильтр glow()
Фильтр glow() добавляет сияние за пределами границ изображения. Подобно фильтрам dropShadow() и shadow(), фильтр glow() применяется к контейнерному элементу. Свойства и значения для фильтра glow() показаны в таблице 5.8.


Таблица 5.8. Свойства и значения для фильтра glow()СвойствоЗначение
filter:glow()
color=color strength=n


Свойство color=color задает цвет сияния, а свойство strength=n задает его размер в пикселях. Значение strength используется также в качестве размера поля, окружающего изображение, и размера поля, окружающего текст.
Следующий код создает эффект сияния, показанный на рисунке 5.36.
 
Сияющая картина
  



Рис. 5.36.  Текст и изображение, выводимые с фильтром glow(), который применяется к их контейнеру
Требуемый эффект к текстовой строке и изображению был создан с помощью контейнерного тега 
. В данном случае эффект сияния окружает оба элемента; поэтому используется стиль margin, чтобы создать достаточное для сияния свободное окружающее пространство вокруг всех четырех сторон элементов.


Фильтр shadow()
Такие принципы вывода падающей тени применимы и для фильтра shadow(). Изображение, к которому добавляется тень, должно находиться внутри контейнера, которое имеет достаточный размер для размещения изображения и его тени. Фильтр применяется к контейнеру, содержащему изображение. Свойства и значения, требуемые фильтру shadow(), показаны в таблице 5.7.


Таблица 5.7. Свойства и значения фильтра shadow()СвойствоЗначение
filter:shadow()
color=color direction=n strength=n


С фильтром shadow() связаны три свойства. Свойство color=color задает цвет тени как название цвета или как числовое значение. Свойство direction=n задает угол тени в градусах (направление вверх соответствует 0 градусов). Свойство strength=n задает длину тени в пикселях. Следующий код создает контейнер 
, окружающий изображение неизвестного размера, и применяет к контейнеру фильтр shadow().
  



Рис. 5.34.  Изображение, выводимое с фильтром shadow(), который применяется к его контейнерному тегу
Эффект тени можно применять к символам текста , так же, как к изображениям. Текст должен находиться внутри контейнера, размеры которого должны быть достаточны для размещения текста и его тени. В следующем примере контейнер  создает строку текста с тенью. Так как тег  имеет размер по умолчанию, достаточный только для размещения своего содержимого, то размер этого контейнерного тега надо увеличить, чтобы разместить и вложенный текст, и его тень.
 A Shadowed Text String 


Рис. 5.35.  Текст, выводимый с фильтром shadow(), который применяется к контейнерному тегу


Фильтры flipH() и flipV()
Имеется два фильтра, которые позволяют изменить на противоположное направление изображения. Фильтр flipH() переворачивает изображение в горизонтальном направлении, создавая зеркальное изображение исходной картинки. Фильтр flipV() переворачивает изображение в вертикальном направлении, представляя его "вверх ногами". Для этих фильтров не требуется задавать никакие свойства. Два изображения на рисунке 5.31 создают с помощью следующего кода.
 


Рис. 5.31.  Изображения, перевернутые горизонтально и вертикально
Необходимо отметить, что к одному и тому же изображению нельзя применить более одного фильтра. Невозможно, например, перевернуть изображение в обоих направлениях, применяя одновременно оба фильтра в одной таблице стилей.


Фильтры xRay(), invert(), и gray()
Имеются два фильтра, которые создают изображение, похожее на фотографический негатив. Фильтр xRay() удаляет из изображения цвет и выводит его в негативном полутоновом изображении. Фильтр invert() обращает уровни оттенков цвета, насыщенности и яркости цветного изображения, выводя его как цветной негатив. Если требуется просто удалить цвет из изображения и вывести его полутоновым, то можно воспользоваться фильтром gray(). Эти фильтры не используют никаких параметров.
  


Рис. 5.32.  Изображения, выводимые с помощью фильтров xRay(), invert() и gray()


Фильтры
Фильтры являются настройками стиля, которые применяются к изображению для изменения его визуального представления. Существуют различные фильтры для изменения уровней плотности цвета, расплывчатости изображений, создания зеркальных изображений, выпуклых и гравированных изображений, создания теней и для применения других специальных эффектов к содержимому страницы Web. Фильтры используют с помощью свойства filter, общая форма которого показана в листинге 5.7.
filter:filtername (property=value [, property=value]...)

Листинг 5.7. Общая форма применения фильтров (html, txt)

За именем фильтра filtername следует разделенный запятыми и заключенный в скобки список настроек property=value. Различные фильтры требуют различных свойств, в зависимости от нужного эффекта. Эти свойства будут указаны во время рассмотрения отдельных фильтров.



Рис. 5.23.  Исходные изображения
Исходные изображения, показанные на рисунке 5.23, используются для иллюстрации эффектов различных фильтров. Можно будет сравнить эти изображения с теми, которые создаются различными фильтрами.
Здесь описаны не все доступные фильтры. Некоторые из них требуют специального программирования для реализации этих эффектов, а программирование стилей находится за рамками этого учебника. Рассмотренные фильтры достаточно легко применяются с базовыми настройками таблицы стилей. Все настройки стилей показаны как линейные таблицы стилей, чтобы сохранить кодирование локальным. Можно, конечно, применять фильтры со встроенными или внешними таблицами стилей.


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


Формат изображений GIF
GIF (Graphics Interchange Format - формат для обмена графическими изображениями) является наиболее широко распространенным графическим форматом. Рисунки, сохраненные в этом формате, имеют расширение файла .gif. Формат GIF может выводить черно-белые изображения, полутоновые и цветные. При использовании цветных изображений формат GIF ограничен выводом не более 256 цветов. Обычно, когда графическая программа, сохраняет изображение в формате GIF, программа использует до 256 цветов, которые лучше всего представляют цвета изображения. В связи с технологией сжатия, применяемой для изображений GIF, этот формат лучше всего подходит для изображений с чистыми цветами, а не для непрерывно изменяющихся цветов. Другими словами это хороший формат для чертежей, логотипов, пиктограмм, текста и изображений с дискретным набором цветов; это не лучший формат для фотографических изображений.
Одной из проблем при использовании графики на странице Web является размер файлов. Большой размер файла означает более длительное время загрузки изображения и более продолжительное ожидание посетителем страницы для просмотра. Обычно на размер файла влияет не размер изображения GIF, а количество различных цветов в изображении. Поэтому наиболее эффективным способом сокращения размеров файлов и времени загрузки является сокращения числа цветов изображения.
Большинство графических программ позволяют выбирать число цветов, сохраняемых в изображении. На рисунке 5.1 показаны два варианта сохранения файлов GIF, доступные в Adobe PhotoShop. Используемый по умолчанию вариант слева применяет полный набор из 256 цветов. Цветовая палитра изображения показана внизу справа изображения. При этом создается файл размером примерно 10.9 кб. Справа то же самое изображение форматировано с 16 цветами. Между изображениями нет заметной разницы. Однако изображение справа создает файл размером только 3.5 кб. При создании собственных изображений необходимо исследовать методы, позволяющие в наибольшей степени уменьшить размеры файлов, не искажая при этом изображение, и сохраняющие правильное представление цветов.

Рис. 5.1.  Варианты сохранения изображений GIF с различными цветовыми палитрами


Формат изображений JPEG
Формат JPEG (Joint Photographic Experts Group) был создан для хранения с различной степенью сжатия фотографических изображений с миллионами цветов. Во время сжатия графические программы используют специальные алгоритмы для выделения и вывода цветов, близких к цветам исходного изображения, но не сохранют при этом всю информацию о цвете, чтобы минимизировать размер файла.
Обычно при сохранении изображений в формате JPEG имеется возможность задания степени сжатия. Меньшие размеры файлов обычно означают большую потерю деталей изображения. Тем не менее, при умеренном сжатии можно вывести на экране изображение, которое выглядит очень похоже по качеству на исходное изображение. Четыре изображения ниже показывают исходное изображение и три сжатых вместе с размерами файлов. Можно заметить потерю четкости изображений с более высокой степенью сжатия и меньшим размером файла.



Рис. 5.7.  Изображения JPEG с различной степенью сжатия
Для изображений Web, которые выводятся обычно с разрешением 72 пикселя на дюйм, степень сжатия, уменьшающая размер файла от 1/8 до 1/4 исходного размера файла, сохраняет удовлетворительную визуальную точность.
Изображения JPEG сохраняются как файлы с расширением .jpg. Формат JPEG не поддерживает многослойность или прозрачность; он также плохо подходит для текста или штриховых изображений, так как точность, которая требуется для создания прямых линий или четких ребер, будет недостаточна при сжатии.


Формат изображений PNG
Более новым форматом с увеличивающейся популярностью является формат PNG (Portable Network Graphic - переносимая сетевая графика, произносится "пинг"). Этот формат используется для тех же целей, что и GIF; однако, он создает файлы меньшего размера и без потери качества разрешения. Он может выводить многослойные изображения и делает это быстрее, чем формат GIF.
Наиболее заметное различие между форматами PNG и GIF находится в области прозрачных изображений. Формат PNG допускает до 254 уровней прозрачности, позволяя изображениям лучше смешиваться с цветом фона или узором страницы. Рисунок 5.6 показывает различия при смешивании между изображениями PNG и GIF.

Рис. 5.6.  Сравнение форматов PNG и GIF на фоне страницы
В изображении GIF справа прозрачность пикселей либо включена, либо нет, создавая четкие границы, окружающие то, что иначе было бы постепенным переходом между упавшей тенью и полной прозрачностью фона изображения. Белый ореол окружает упавшую тень на ее границе с полной прозрачностью. В противоположность этому, изображение PNG слева мягко смешивается с цветом фона. Это происходит за счет нескольких уровней прозрачности пикселей, посредством чего пиксели, окружающие упавшую тень, получают увеличивающиеся уровни прозрачности, по мере того как они удаляются от изображения.


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


Графический текст
Вспомните из предыдущего обсуждения, что установленные в компьютерной системе пользователя шрифты являются естественным ограничением возможностей выбора типа шрифта для использования. Независимо от шрифтов, которые использовались при создании страницы, они будут выводиться иначе, если эти шрифты недоступны посетителю. Если, тем не менее, желательно применение определенного шрифта, то можно преобразовать текст в графическое изображение и разместить его на странице.
Обычно создается одна буква () или слово для стилизованного вывода. Пример буквы в тексте этого параграфа заимствован из коллекции шрифтов Adobe Rosewood. Большинство пользователей, скорее всего, не имеют в системе этот шрифт. Однако он выводится браузером, так как он был преобразован в графическое изображение и помещен на страницу с помощью тега .


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


Исключенные атрибуты тега img
Существует ряд исключенных атрибутов тега , вместо которых используют настройки стиля. Эти атрибуты можно встретить на старых страница Web, но не рекомендуется применять их на новых страницах.
border=

Сплошная черная рамка вычерчивается вокруг изображения с помощью атрибута border. Толщина рамки задается как n пикселей.
align="top|middle|bottom" align="left|right"

Одна из версий атрибута align управляет размещением текста, окружающего изображение. При использовании align="top", align="middle", или align="bottom", изображение появляется в строке - на той же строке, что и окружающий текст - и сопровождающий текст выравнивается по верху, посредине, или по низу изображения. Три эти атрибута выравнивания идентичны по результату свойствам text-top, middle, и text-bottom стиля vertical-align. Если выравнивание не определено в теге , то изображение появляется в строке с окружающим текстом, выровненным с нижним краем изображения.
Второй вариант атрибута align управляет обтеканием изображения словами. Когда записывается align="left" или align="right", то изображение появляется возле указанного левого или правого поля страницы и сопровождается текстом, который его обтекает. Тег  должен находиться сразу перед текстом, который его обтекает. Эти выравнивания идентичны по результату свойствам стиля float:left и float:right.
hspace="n" vspace="n"

Можно добавить дополнительное свободное пространство вокруг изображения, используя один из двух или оба атрибута: hspace (горизонтальный интервал) или vspace (вертикальный интервал), - и задавая для каждого определенное число пикселей. Атрибут hspace задает число оставляемых пикселей пустого пространства с левой и правой стороны изображения; атрибут vspace определяет число оставляемых пикселей пустого пространства сверху и снизу изображения. В отличие от использования настроек стиля margin, невозможно управлять пустым пространством на сторонах изображения по отдельности.
height="n" width="n"

Размерами изображений управляют атрибуты height и width. Они работают аналогично свойствам стиля, используя значения в пикселях для задания размеров изображений.


Источники изображений

Рис. 5.17.  Изображение текстуры
Большинство фоновых изображений являются текстурами, а не рисунками. Рисунки оказываются слишком перегруженными и отвлекают внимание от сообщения. Эти текстуры являются стандартными изображениями GIF или JPEG, кроме того, эти изображения обычно не совпадают с размером контейнера, для которого они создают фон. Текстуры являются небольшими, специально созданными изображениям, которые могут повторяться на странице и незаметно соединяться, чтобы сформировать однородный фон.
Изображение на рисунке 5.17 является типичным изображением, используемым в качестве фона для элементов страницы. Оно выводит текстуру, которая хорошо согласуется, когда изображение повторяется горизонтально и вертикально вдоль и поперек области фона элемента страницы. Повторяемые текстуры, такие, как эта, иногда трудно создать, но существует множество готовых, доступных на большинстве сайтов репродукций в Web.


Изображения в строке
Изображение может появиться "в строке" (in-line), то есть, на той же строке, что и окружающий его текст. В этом случае необходимо определить, как текст должен выравниваться относительно изображения. По умолчанию, текст, окружающий изображение в строке, выравнивается с нижним краем изображения. Однако можно применить к тегу  подходящим образом стиль vertical-align, чтобы изменить положение окружающего текста. Значения свойства vertical-align показаны в таблице 5.1.


Таблица 5.1. Свойство стиля vertical-alignСвойство:Значение
vertical-align
text-top middle text-bottom (по умолчанию)


Применение стиля vertical-align в линейных тегах  проиллюстрировано на рисунке 5.13. Сопровождающий текст выравнивается по верху, середине и нижнему краю изображений.
Изображение с текстом, выровненным по верху изображения.


Изображение с текстом, выровненным по средине изображения.


Изображение  с текстом, выровненным по низу изображения.



Рис. 5.13.  Изображения в строке выровненные с сопровождающим текстом различным образом


Линейный фильтр alpha()
Линейный фильтр alpha осветляет изображение от начальной заданной плотности до конечной плотности, применяя операцию по горизонтали или по вертикали. Требуется задание пяти свойств. Свойство style=1 определяет линейный фильтр альфа. Свойство opacity=n задает начальный процент плотности; свойство finishOpacity=n задает конечный процент плотности. Оставшиеся два свойства определяют горизонтальное или вертикальное направление применения фильтра. Пара свойств startX=n и finishX=n задают начальную и конечную точки приложения горизонтального осветления, где n является процентом расстояния от левого края изображения. Пара свойств startY=n и finishY=n задают начальную и конечную точки для применения вертикального осветления, где n является процентом расстояния от верхнего края изображения.
Типичное приложение этого фильтра начинает обесцвечивание при startX=0 (левый край изображения) и заканчивает осветление при finishX=100 (правый край изображения). Эти свойства приведены в следующей таблице стилей для изображения, показанного на рисунке 5.25.



Рис. 5.25.  Изображение с линейной плотностью от 100% до 0%
Можно варьировать направление градиента осветления, изменяя на дополнительные значения начального и конечного процентов. То есть, задание startX=100 и finishX=0 осветляет изображение справа налево. Можно также осветлять изображение сверху вниз, используя свойства startY и finishY вместо startX и finishX.


Многослойные изображения
Другим свойством формата GIF89a является возможность создавать многослойные изображения. Обычно, когда изображение загружается в браузер, оно открывается постепенно, по несколько строк, начиная с верхнего края изображения. Если размер файла большой, а скорость соединения медленная, то изображение будет открываться небольшими порциями, пока не будет загружено целиком.
Если же изображение было сохранено в многослойном режиме, то открывается все изображение, со все возрастающим разрешением. То есть, оно открывается сначала в версии с низким разрешением всего изображения. В процессе загрузки оно становится все четче и четче, по мере того как добавляются дополнительные детали. Хотя время, необходимое для загрузки многослойного изображения, будет таким же, как и для обычного изображения, часто кажется, что оно загружается быстрее, так как полное, хотя и не окончательное, изображение можно видеть значительно быстрее. Использование стандартного или многослойного изображения является, впрочем, вопросом личного предпочтения, а не технической необходимостью.

Рис. 5.3.  Многослойное изображение открывается со все возрастающим разрешением


Обтекание текста вокруг изображений
Когда изображения смещаются влево и вправо на странице, последующий текст будет обтекать изображение. Это иллюстрирует рисунок 5.14, где изображение смещается влево, так что подпись к изображению обтекает его справа. В то же самое время следующий далее параграф также обтекает изображение.

увеличить изображение
Рис. 5.14.  Плавающее изображение с обтекающим его текстовым параграфом
Обратите внимание в следующем далее коде для показанного выше вывода, что тег  и заголовок находятся внутри тега 
, так как для изображения и текста согласно стандартам XHTML требуется блочный контейнер.
Это изображение с заголовком, где изображение смещается влево, а заголовок обтекает его справа.


  Figure 1.
 The Passion of the Western Mind. 


Этот следующий далее параграф также обтекает изображение справа, так как он записывается далее в строке ниже заголовка.


Листинг 5.5. Код для плавающего изображения с обтекающим его текстовым параграфом (html, txt)


Плавающие изображения

Рис. 5.12.  Плавающее изображение 
Изображения можно смещать влево или вправо на странице (окружающий текст при этом будет обтекать изображение), используя стиль float:left или float:right внутри тега . Вокруг изображения можно разместить дополнительные пробелы, чтобы отделить его от окружающего текста с помощью увеличения полей. Соответствующее изображение смещается вправо и имеет значение левого поля в 25 пикселей, чтобы оставить свободное пространство между изображением и этим параграфом.
  ... окружающий текст с переносом по словам ... 


Листинг 5.4. Код для смещения изображения на странице вправо (html, txt)

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


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


Прямоугольный фильтр alpha()
Прямоугольный фильтр альфа создает градиент осветления изнутри наружу, как и радиальный фильтр, только использует в качестве шаблона прямоугольник, а не окружность. Для фильтра требуется задать два параметра. Свойство style=3 определяет прямоугольный фильтр; свойство opacity=n задает процент начальной плотности в центре изображения. Начиная с этой плотности изображение осветляется к своим краям, создавая прямоугольное изображение.
Следующий код используется для создания изображения на рисунке 5.27. Он начинает градиент со 100% плотности в центре изображения и заканчивает плотностью 0% на его краях.



Рис. 5.27.  Изображение с прямоугольным фильтром с плотностью от 100% до 0%


Прозрачные изображения
Одна из версий формата GIF - GIF89a - имеет возможность создавать прозрачные изображения. Можно определить в изображении один определенный цвет, который затем будет выводиться прозрачным, когда изображение появляется на странице. Чаще всего на рисунке для этого используется один фоновый цвет. Когда он задается прозрачным, фон исчезает, оставляя только изображение переднего плана, выводимое на фоне страницы. Следующий рисунок демонстрирует эффект прозрачности.

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


Радиальный фильтр alpha()
Радиальный фильтр альфа осветляет изображение круговым образом по радиусам из середины наружу. Он требует задания только двух свойств. Свойство style=2 определяет радиальный фильтр; свойство opacity=n задает процент начальной плотности в центре изображения. Начиная с начальной плотности, изображение осветляется до его краев, создавая круговое изображение.
Следующий код используется для создания изображения на рисунке 5.26. Оно начинает градиент со 100% плотности в центре изображения.



Рис. 5.26.  Изображение с радиальной плотностью от 100% до 0%


Равномерный фильтр alpha()
Равномерный фильтр alpha (uniform) применяет один уровень плотности для всего изображения. Он выводит изображение с определенным процентом плотности: от 100% плотности, как в исходном изображении, и до плотности 0%, создающей вообще невидимое изображение.
Для этого фильтра требуются два значения свойства. Свойство style=0 определяет равномерный стиль альфа; свойство opacity=n задает уровень плотности (n) как процент от полной интенсивности. Результат применения альфа-фильтра к тегу  можно видеть на рисунке 5.24. Его плотность задана как 50, то есть изображение выводится с 50% от полной интенсивности.



Рис. 5.24.  Изображение с равномерной плотностью 50%


Размер изображения
Если не определено иначе, изображение выводится со своими исходными значениями ширины и высоты. Используя стили width и/или height, можно изменить размер изображения для вывода. Если размер изображения нужно изменить с сохранением пропорции, то надо закодировать только один размер, ширину или высоту. Браузер определяет соответствующий размер для другого направления, чтобы сохранить пропорцию. Однако можно намеренно исказить изображение, задавая непропорциональные значения для ширины и высоты.
Следующее изображение выводится в двух размерах - в исходном и в два раза меньше исходного размера. Изменяется только ширина, чтобы браузер задал высоту с сохранением пропорциональности.
 


Рис. 5.10.  Изображение в полный размер и в 1/2 размера
При изменении размера изображения лучше не пытаться делать изображение больше исходного размера. Его исходный размер имеет наилучшее и самое четкое разрешение. При увеличении изображения может происходить "пикселизация", приводящая к потере четкости. Большинство компьютеров выводят изображения с разрешением 72 dpi (dots per inch - точек на дюйм). Обычно бывает достаточно сохранять и выводить изображения с этим разрешением. Сохранение изображений с более высоким разрешением не создает заметного улучшения качества выводимого изображения и приводит к большим размерам файлов, которые увеличивают время загрузки.


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


Таблица 5.3. Свойства стиля фонаСвойствоЗначение
background-attachment
Задает соединение фонового изображения с документом, будет ли изображение прокручиваться вместе с текстом или нет. fixed scroll
background-image
Задает фоновое изображение элемента страницы, определяемое как url(url) none
background-position
Задает положение верхнего левого угла фонового изображения относительно верхнего левого угла контейнерного элемента, используя физический размер, процент, ключевое слово или пару ключевых слов. left top left% top% top|right|bottom|left|center top left|top center|top right center left|center center|center right bottom left|bottom center|bottom right
background-repeat
Задает повторение фонового изображения по горизонтали, по вертикали, в обоих направлениях или вывод без повторения. repeat-x repeat-y repeat no-repeat


Фоновое изображение определяется с помощью свойства background-image:url(url), где расположение файла изображения задается его адресом url. Если файл изображения хранится в том же месте, что и страница, то необходимо ввести только имя файла. Если никакие другие настройки стиля в отношении фонового изображения не задаются, то оно повторяется горизонтально и вертикально, вдоль и поперек контейнера, чтобы заполнить фон изображением.
Страница, показанная на рисунке 5.18, использует свойство background-image для заполнения страницы горизонтально и вертикально с помощью текстуры. Никакие другие свойства стиля не требуются.



Рис. 5.18.  Страница с изображением текстуры, используемым в качестве фона
Изображение Background.jpg имеет реальный размер 144 х 144 пикселя. Если дополнительных свойств стиля не задано, изображение автоматически повторяется поперек и вниз по странице, чтобы заполнить все доступное пространство.
Конечно, в качестве фоновых изображений не обязательно применять повторяющиеся текстуры. Можно воспользоваться любым изображением GIF или JPEG. Однако надо быть осторожным при использовании обычных изображений в качестве фона, так как они могут иметь слишком яркие цвета и затруднять чтение расположенного поверх текста. Если имеется программа редактирования изображений, то можно уменьшить плотность или прозрачность изображения, смягчить его интенсивность для применения в качестве изображения водяного знака. Это было сделано для изображения, показанного на рисунке 5.19.



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


Свойство clear
Хотя любой вводимый после плавающего изображения текст обтекает изображение, иногда такое поведение может оказаться ненужным. Например, следующий вывод содержит изображение книги и заголовок, который обтекает изображение справа; однако следующий параграф, вместо обтекания изображения, появляется ниже изображения.
Это изображение с заголовком, где изображение смещается влево, а заголовок обтекает его справа.

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


  Figure 1.
 The Passion of the Western Mindv/i>. 


Этот параграф выводится ниже изображения, а не обтекает его ниже заголовка.


Листинг 5.6. Код вывода параграфа текста, использующего свойство clear для левого поля (html, txt)

Можно убедиться, что элемент страницы всегда появляется у левого или правого поля страницы, если ему присваивается свойство стиля clear. Значением этого свойства может быть left, right, both или none (по умолчанию).


Таблица 5.2. Свойство стиля clearСвойство:Значение
clear
left right both none (по умолчанию)


В предыдущем примере следующему после изображения параграфу задается линейный стиль clear:left. Это означает, что параграф выводится на следующей доступной строке, у которой "очищено" ("clear") левое поле. Поэтому параграф начинается на строке, расположенной сразу под изображением, на первой строке, левое поле которой не занято другим элементом.
Всякий раз, когда элемент страницы смещается влево или вправо, может потребоваться вывод последующего текстового или графического элемента ниже плавающего элемента, а не как часть обтекающего содержимого. Значение свойства clear, присваиваемое этому необтекающему элементу, зависит от положения поля (left или right) плавающего элемента. Настройка clear:both обеспечивает, что ни одно поле не занято элементом страницы перед выводом оформленного так элемента.


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


Листинг 5.1. Общая форма тега  (html, txt)

Тег  появляется на странице Web в том месте, где должно выводиться изображение. Атрибут src (источник) задает положение файла изображения. Это может быть локальный или удаленный адрес URL. Атрибут alt (дополнительный текст) требуется согласно стандартам XHTML 1.1. Он содержит текстовое описание изображения, которое выводится внутри небольшого всплывающего окна, когда курсор мыши перемещается над изображением.
Рекомендуется включать атрибут alt, в частности для того, чтобы снабдить этой информацией пользователей с недостаточным зрением. Специальное программное обеспечение браузера может озвучить текстовую строку, когда само изображение невозможно рассмотреть в деталях. Поэтому необходимо использовать текст alt, который дает точное и полезное описание изображения. Браузеры могут также выводить текст во время ожидания загрузки изображения, давая тем самым посетителю предварительное текстовое описание визуального содержимого страницы. Наконец, некоторые люди предпочитают отключать вывод графических изображений, как для ускорения загрузки страниц, так и во время печати страницы; эти всплывающие окна помогают идентифицировать изображения, которые иначе не выводятся.
Отметим, что тег  является линейным тегом и не может появиться в строке сам по себе согласно стандартам XHTML. Этот тег должен записываться внутри тегов , 
 или другого блочного тега.


Вывод изображений
Графическое изображение размещается на странице Web с помощью ссылки на местоположение файла GIF, PNG или JPEG. Файл изображения затем загружается с сервера Web вместе со страницей. Когда браузер выводит страницу, эта ссылка используется для извлечения изображения и размещения его на странице.


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



Листинг 5.2. Вывод изображение, находящегося в том же каталоге, что и страница Web (html, txt)

Рисунок 5.8 показывает вывод этого файла изображения. Если провести курсором мыши над изображением, то в браузере появится всплывающее окно, содержащее текстовое описание (alt) этого изображения.

Рис. 5.8.  Вывод файла изображения
Если файл изображения находится в другом каталоге, отличном от каталога страницы Web, которая его выводит, то необходимо указывать как часть значения src (URL) путь доступа к этой папке. В следующем примере файл изображения расположен в папке Media, подкаталоге каталога, содержащего страницу Web, которая выводит изображение.



Листинг 5.3. Вывод изображения из подкаталога Media, расположенного в каталоге текущей страницы (html, txt)


Вывод удаленных изображений
Можно соединиться и вывести изображение, расположенное в любом месте Всемирной паутины (Web), не загружая изображение для вывода из локального каталога. В этом случае в атрибуте src должен присутствовать полный адрес URL изображения, начиная с "http://". Рисунок 5.9 показывает страницу Web со ссылкой на удаленный файл изображения. Отметим, что код тега  включает ссылку на сайт и путь доступа к каталогу изображения.



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


Оформление списков
Абсолютное позиционирование
В то время как position:relative размещает элемент относительно окружающих элементов, position:absolute помещает элемент относительно его контейнерного элемента. По умолчанию контейнерным элементом является сама страница Web, тег . Поэтому элементы позиционируются абсолютно относительно верхнего левого угла страницы Web и, что важно, исключаются из обычного потока элементов страницы.
Абсолютное позиционирование показано в примере на рисунке 6.20, где слово "DRAFT" помещено в тег 
, положение которого задается абсолютно. При таком позиционировании тег располагается относительно верхнего левого угла страницы. Он смещается на 50px от верхнего края и на 280px от левого края страницы, что помещает его ниже сопровождающего параграфа.




 
   

DRAFT


Размещенное под этим параграфом слово "DRAFT" определено показанным выше тегом 
. Этот тег появляется в коде XHTML сразу перед этим параграфом. Он позиционирован абсолютно; поэтому он исключен из нормального потока элементов страницы. В связи с этим исключением тега из потока элементов страницы параграф смещается вверх, чтобы занять освободившееся пространство страницы, поэтому накладывается на слово. Таким образом, слово "DRAFT" занимает на странице абсолютное положение, независимо от того, что еще его окружает. Для него задано также значение z-index, равное -1, помещающее его на странице под слоем текста, чтобы слово не перекрывало текст. 


 



Листинг 6.34.  Код абсолютного позиционирования содержимого на странице под слоем текста (html, txt)



Рис. 6.20.  Абсолютное позиционирование содержимого под слоем текста страницы

Слой текста страницы всегда имеет значение z-index, равное 0 (нулю). Поэтому тегу 
 задано значение z-index, равное -1, для размещения слова под слоем текста, чтобы оно не мешало восприятию.

Когда элемент страницы позиционируется абсолютно и для него заданы значения свойств left и top, то он исключается из нормального потока элементов страницы. В приведенном выше примере тег 
 удаляется из его нормального физического положения перед параграфом. Параграф затем перемещается вверх, чтобы занять освободившуюся позицию тега 
. Это означает, что в действительности не имеет значения, где на странице кодируется элемент с абсолютным позиционированием. Независимо от его физического кодирования он все равно позиционируется относительно верхнего левого угла страницы. Единственный случай, где позиция кодирования имеет значение, - это когда элемент позиционируется только своим свойством left (но не top). Если он не перемещается по вертикали, то он остается в своей закодированной позиции.


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


Границы изображений
Можно создавать границы вокруг изображений, задавая стиль границы. Следующий код создает границу ridge, толщиной 7 пикселей, как показано слева на рисунке 6.9.



Рис. 6.9.  Изображения с границами
Невозможно разделить границу и изображение, вводя отступ вокруг самого изображения. Однако, можно поместить изображение внутрь другого контейнера, например, тега , и добавить отступы в этот контейнер. Этот прием закодирован ниже и показан справа на рисунке 6.9.


Листинг 6.24. Код для окружающих изображение отступов (html, txt)


Использование графических изображений для неупорядоченных списков
Вместо использования текстовых символов для маркировки элементов списка можно применять графические изображения, задавая свойство list-style-image:url(url). Если изображение находится в том же каталоге, что и страница со списком, то url является просто именем графического файла. В следующем примере изображение с именем Bullet.gif используется для маркировки элементов списка. Вывод в браузере показан на рисунке 6.3.


  
Элемент списка 1
 
Элемент списка 2
 
Элемент списка 3
 

Листинг 6.8. Код неупорядоченного списка с графическими изображениями маркерами (html, txt)


Рис. 6.3.  Неупорядоченный список с графическими изображениями маркерами
В зависимости от размера изображения может потребоваться настроить вертикальное выравнивание элементов списка, чтобы выровнять их требуемым образом с изображением. Обычно текст выравнивается по нижней части изображения в строке. В этом примере для изображения применяется свойство vertical-align:middle, чтобы выровнять сопровождающий текст со серединой изображения. Можно также использовать значения text-top и text-bottom для вертикального выравнивания текста с верхним или нижним краем изображения.


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


 Перемещенный параграф. 


Следующий параграф ....


Листинг 6.33. Код изменения положения параграфа (html, txt)


Рис. 6.19.  Перемещенный параграф, оставляющий избыточное свободное пространство в исходной позиции
Из своего обычного положения тег  перемещен на странице на 25 пикселей вниз. Однако исходный размер и положение этого тега сохраняется в потоке элементов страницы, занимаемое теперь свободным пространством, где тег должен был бы нормально появиться. Но не только этот, любой следующий далее текст сохраняет свое положение относительно исходного положения перемещенного тега  и в связи с этим почти перезаписывается перемещенным текстом.
Пока элементы страницы перемещаются вертикально из своего исходного положения в пределах разумного количества пикселей, такие вопросы со свободным пространством не должны вызывать проблем. Однако с увеличением вертикального расстояния свободное пространство появляется в потоке элементов страницы, представляя оставленное пространство, занимаемое ранее перемещенным элементом. Вероятно, необходимо будет проверить различные варианты позиционирования, чтобы элементы страницы были представлены в удовлетворительных соотношениях друг с другом.


Контекстные селекторы
Списочные структуры предоставляют хорошую возможность обсудить дополнительный метод - дополнение к селекторам ID - для применения выборочного оформления к элементам XHTML.
Рассмотрим следующий сценарий для двух списков, требующих различного оформления: элементы неупорядоченного списка выводятся цветом, отличным от цвета вывода упорядоченного списка.
Два списка могут применять различные настройки цвета с помощью селекторов своих тегов. То есть селектор ul может иметь цвет, отличающийся от цвета селектора ol, с помощью следующего кода.


  
Красный 1
 
Красный 2
 
Красный 3
 

 
Синий 1
 
Синий 2
 
Синий 3
 

Листинг 6.19. Код для вывода неупорядоченного и упорядоченного списков различным цветом (html, txt)


Рис. 6.4.  Неупорядоченный и упорядоченный списки, выводимые различным цветом
Список   выводится красным цветом, а список  - синим. Однако альтернативный способ состоит в использовании различных тегов 
 в двух списках. Тегу 
, который выводится внутри тега  , должен быть задан цвет, отличный от цвета тега 
, который выводится в списке . Необходимо уметь различать теги 
, появляющиеся в двух разных списках. Это различие реализуется с помощью таблицы стилей следующего вида.


Листинг 6.20. Использование контекстных селекторов (html, txt)

Пары селекторов ul li и ol li описывают комбинацию тегов, которая должна возникнуть, чтобы был применен ассоциированный стиль. Эти контекстные селекторы - два или больше простых селекторов, разделенных пробелами - создают отношения тегов, которое должно возникнуть, прежде чем применяется стиль. Предыдущий код задает цвет как красный, когда тег 
 следует за тегом  ; и он же задает синий цвет, когда тег 
 следует за тегом . То есть, тег 
 получает некоторый стиль в зависимости от своего контекста - от того, будет ли он ассоциироваться с тегом   или с тегом .
Контекстные селекторы могут включать также селекторы ID для дополнительной дифференциации стилей. Следующий код использует значения id для различения двух неупорядоченных списков с целью применения различных стилей маркировки. В то же самое время двум множествам элементов списков присваиваются различные цвета, в зависимости от неупорядоченного списка, в котором они появляются.




 
Позиция 1
 
Позиция 2
 
Позиция 3
 


 
Позиция 1
 
Позиция 2
 
Позиция 3
 


Листинг 6.21.  Использование контекстных селекторов для различения неупорядоченных списков (html, txt)


Два списка различаются в таблице стилей значениями id, присвоенными их тегам  . Первые две настройки стиля применяют различные стили маркеров для указанных селекторов ul. Две последние настройки стиля задают различный цвет для селектора li, в зависимости от того, в каком списке ul он содержится. Стиль цвета li зависит от контекста ul ID. Вывод в браузере этого кода показан на рисунке 6.5.


Рис. 6.5.  Неупорядоченные списки с различными маркерами и цветом

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


Оформление неупорядоченных списков
Одним из типов списков является неупорядоченный список, т.е. последовательность позиций, помеченных специальным символом - маркером, и отделенных от окружающего текста одиночными пустыми строками. Список выводится через один интервал и с отступом от левого поля. Пример кодирования и вывод в браузере неупорядоченного списка показан ниже.
  
Элемент списка 1
 
Элемент списка 2
 
Элемент списка 3
 

· Элемент списка 1 · Элемент списка 2 · Элемент списка 3

Листинг 6.1. Неупорядоченный список (html, txt)

Тип маркера можно определять с помощью исключенного атрибута type="disc|circle|square" тега  .
Однако предпочтительнее применять вместо этого атрибута свойства таблиц стилей. Для неупорядоченных списков существует два свойства стиля, которые можно использовать для задания типа символа маркера, который предшествует элементам списка. Эти свойства и их соответствующие значения показаны в таблице 6.1.


Таблица 6.1. Типы маркеров оформления списковСвойствоЗначение
list-style-type
disc circle square none
list-style-image
url(url)



Оформление списков определений
Список определений является рядом терминов и определений, отделенных от окружающего текста одиночной пустой строкой. Термины в списке выравниваются по левому полю; определения смещаются вправо и переносятся по словам на следующих строках.
Вспомните,что список определений заключается внутрь тегов 
 и содержит один или несколько тегов 
 , перечисляющих определяемые термины. Каждый термин имеет связанный с ним тег 
 , окружающий его определение. Пример списка определений закодирован ниже и показан в листинге 6.16.
 
Term 1
 
Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. 
 
Term 2
 
Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. 
 


Листинг 6.15. Код списка определений (html, txt) Term 1 Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. Term 2 Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.

Листинг 6.16. Список определений (html, txt)

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


 
Term 1
 
Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.
 
Term 2
 
Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.
 


Листинг 6.17. Код списка определений с настройками margin (html, txt) Term 1

Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.

Term 2

Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.

Листинг 6.18. Список определений с верхним и нижним полями, окружающими элементы списка (html, txt)


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


Оформление упорядоченных списков
Упорядоченный список является рядом элементов, перед которыми стоят последовательные числа; он отделен от окружающего текста одиночными пустыми строками. Список выводится через один интервал и отступает от левого поля таким же образом, как и неупорядоченный список. Используемый по умолчанию упорядоченный список кодируется и выводится, как показано ниже.
 
Элемент списка 1
 
Элемент списка 2
 
Элемент списка 3
 

Листинг 6.9. Код упорядоченного списка (html, txt) 1. Элемент списка 1 2. Элемент списка 2 3. Элемент списка 3

Листинг 6.10. Упорядоченный список (html, txt)

В таблице стилей можно задавать тип символов нумерации, которые будут стоять перед элементами списка. Для этого применяется свойство list-style-type со значениями, показанными в таблице 6.2. По умолчанию используется значение decimal.


Таблица 6.2. Типы символов нумерации упорядоченных списковСвойствоЗначение
list-style-type
decimal upper-alpha lower-alpha upper-roman lower-roman none



Определение позиционного расположения элементов страницы
Так как бывает трудно определить левую и верхнюю позицию страницы относительно длинной, прокручивающейся страницы Web, то элементы, которые позиционируются относительно друг друга, часто размещаются внутри другого контейнерного элемента. Этот контейнерный элемент позиционируется в соответствии с принципом сохранения его позиции в потоке элементов страницы; содержащиеся в нем элементы позиционируются абсолютно внутри контейнера. В этом случае значения абсолютной позиции задаются относительно контейнера, а не страницы. Контейнер становится легкоуправляемой координатной системой, в которой точно позиционируются вложенные элементы.
Хорошим общим решением для размещения элементов страницы относительно друг друга является следующее:
1. определите и задайте размер тега 
, который будет охватывать размещенные элементы. Используйте для раздела 
 относительное позиционирование, размещая его тем самым в потоке контента страницы. Когда содержимое на странице добавляется или удаляется, то этот раздел по-прежнему сохраняет свое относительное расположение среди других элементов страницы. Он перемещается по странице вверх или вниз, когда изменяется содержимое страницы;
2. поместите элементы, которые будут находиться внутри раздела, используя абсолютное позиционирование. В этом случае значения left и top для размещаемых элементов всегда измеряются от верхнего левого угла раздела. Эта "локальная" система координат остается неизменной, даже если раздел изменяет положение в потоке элементов страницы.
Раздел, показанный на рисунке 6.21, использует относительное позиционирование, чтобы сохранять свое положение среди других элементов XHTML на странице. Он выводится с точечной границей (dotted), чтобы сделать его видимым. Вложенные квадраты позиционируются абсолютно, со значениями top и left, измеряемыми от верхнего левого угла этого раздела.







Red  Green  Blue 





Листинг 6.35.  Код абсолютного позиционирования элементов внутри относительно позиционированного контейнера (html, txt)



Рис. 6.21.  Абсолютное позиционирование внутри контейнера с относительным позиционированием

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

Следующий код применяет такую же стратегию для создания эффект падающей тени. Вывод браузер показан на рисунке 6.22.




 
Drop Shadow
 
Drop Shadow
 



Листинг 6.36. Код для создания эффекта падающей тени (html, txt)



Рис. 6.22.  Абсолютное позиционирование элементов внутри относительно позиционированного контейнера

Охватывающий раздел (позиционированный относительно в потоке содержимого страницы) содержит два слоя элементов для размещения. Контейнерный раздел задан строчной границей (dashed), чтобы показать его размер и положение. Позиции слов и тени можно легко определить по их расстоянию от верхнего левого угла этого раздела (left:0px; top:0px); тень смещается от слов на 5 пикселей (left:+5px; top:+5px). Для слов значение z-index задается большим, чем для тени, чтобы вывести их сверху.

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

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


Рис. 6.23.  Компоновка информационного бюллетеня с помощью позиционирования элементов

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

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

Листинг 6.37. Код компоновки информационного бюллетеня, использующий позиционированные элементы (html, txt)


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







 
 





 





 Newsletter Layout 



 First Column 



 Second Column 



 Footer 






 


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


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






© 2003-2007 INTUIT.ru. Все права защищены.


Определение символов маркеров
Показанный в листинге 6.3 неупорядоченный список использует свойство list-style-type для вывода в качестве типа маркера окружности. Оформление задается во встроенной таблице стилей для селектора ul.



  
Элемент списка 1
 
Элемент списка 2
 
Элемент списка 3
 

Листинг 6.2. Код для задания типа маркера (html, txt) ° Элемент списка 1 ° Элемент списка 2 ° Элемент списка 3

Листинг 6.3. Неупорядоченный список с маркером-окружностью (html, txt)

Конечно, при использовании в таблице стилей простого селектора ul все неупорядоченные списки на странице будут иметь маркеры-окружности. Можно при желании применять селекторы ID, чтобы различным спискам можно было задать различные символы-маркеры. Следующая таблица стилей определяет три таких списка, каждый со своим собственным символом-префиксом.


Листинг 6.4. Встроенная таблица стилей для типов маркеров list-style (html, txt)

Определенная структура списка получает тип маркера, задавая соответствующий ID для своего тега  . То есть список, определяемый с помощью тега 
, будет иметь в качестве маркера символ в виде квадрата.




Листинг 6.30.  Код для изменения положения слов относительно своего исходного положения (html, txt)



Рис. 6.16.  Слова смещаются относительно своего нормального вертикального положения

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

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


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


Заголовок 


Следующий параграф ...


Листинг 6.28. Код размещения заголовка относительно окружающего содержимого (html, txt)


Рис. 6.14.  Заголовок, размещаемый относительно окружающего контента
Обычно текст в строке не может перемещаться из своей используемой по умолчанию позиции на странице. Форматирование в строке, задаваемое тегом и его окружающими тегами, определяет, где будет расположено содержимое. Тег 
 всегда выводит два интервала после предыдущего параграфа и два интервала над следующим параграфом. Однако, задавая для тега свойство position, можно изменить его положение на странице с точностью до пикселя.
Чтобы изменить позицию тега 
 в приведенном выше примере, можно присвоить ему стиль position:relative. Затем, применяя свойство left и/или top, его можно переместить на определенное число пикселей из его исходной позиции. Следующий код изменяет позицию этого заголовка, определяя для тега свойство позиционирования.


Предыдущий параграф ...


Заголовок 


Следующий параграф ...


Листинг 6.29. Код для изменения положения заголовка относительно окружающего контента (html, txt)


Рис. 6.15.  Изменение позиции заголовка относительно исходного положения
С помощью position:relative позицию тега можно изменить относительно его исходного положения. Свойство left задает расстояние в пикселях, на которое смещается элемент из своего обычного горизонтального положения; свойство top задает расстояние в пикселях, на которое смещается элемент из своего обычного вертикального положения. В приведенном выше примере заголовок смещается на 50 пикселей вправо из своего исходного положения и на 10 пикселей вверх.
Отметим, что задаваемое значение в пикселях может быть положительным или отрицательным. Положительное значение для свойства left перемещает элемент вправо, а негативное значение перемещает его влево. Положительное значение для свойства top перемещает элемент на странице вниз, а отрицательное значение перемещает его вверх.
В следующем примере каждое слово предложения заключено в отдельный контейнер , чтобы оформить их по отдельности. Каждое слово затем с помощью свойства top получает смещение по вертикали относительно своей нормальной позиции в строке. Все слова содержатся в теге 
, чтобы применить задание размера шрифта к группе слов.
 Words in a sentence. 



Переполнение контейнера
По умолчанию высота контейнера всегда увеличивается, чтобы показать содержащийся в нем текст, независимо от заданной величины height. Чтобы задать точную высоту контейнера, необходимо также указать, как обрабатывать "переполнение" текста, когда контейнер имеет недостаточный размер для вывода всего своего содержимого. То есть, требуется задать свойство overflow, чтобы контролировать потенциально "скрытый" текст, находящийся за границами контейнера.
Существует четыре возможных значения для свойства overflow, результат действия которых показан в следующих примерах оформления параграфа, с одним и тем же контентом (Перевод: "Контент страницы может появляться внутри контейнеров, а также перекрывать основной документ. Чтобы контент оставался внутри таких тегов, как 
, , и , для этих элементов можно в случае необходимости задать различные значения высоты и ширины.")

увеличить изображение
Рис. 6.12.  Задание параметра overflow текстового контейнера
Задание overflow:visible выводит весь контент, независимо от указанной высоты контейнера (значение по умолчанию); overflow:hidden использует указанную высоту, даже если часть текста остается скрытой; overflow:scroll выводит горизонтальную и вертикальную полосы прокрутки для просмотра скрытого текста; overflow:auto выводит вертикальную полосу прокрутки, если требуется для просмотра скрытого текста.
Стиль overflow:auto является обычно наиболее полезным и визуально привлекательным для вывода текста, потенциально переполняющего контейнер с указанными шириной и высотой. Код приведенного выше тега  с overflow:auto показан ниже.


Page content can appear within elements as well as flow throughout the main document. With tags such as 
, , and  to contain content, these elements can, if so chosen, be sized to various heights and widths.


Листинг 6.26. Код для управления переполнением текста в параграфе (html, txt)

Этот конкретный параграф имеет id="OFLOW", чтобы отличить его от трех других параграфов, которые имеют свои собственные значения id. Параграф имеет заданную ширину и высоту, что не позволяет вывести параграф полностью. Поэтому также задается стиль overflow:auto, чтобы для доступа к скрытому тексту появилась вертикальная полоса прокрутки.


Плавающие контейнеры
На рисунке 6.13 показан раздел врезки с шириной, равной 250 пикселей, и высотой 200 пикселей. Он имеет границу ridge толщиной 5 пикселей, отступ в 10 пикселей и цвет фона gray (серый). Раздел смещается на странице вправо. Его левое поле задано равным 20 пикселям, чтобы отделить его от текста на странице.
Так как весь текст невозможно вывести при заданной высоте и ширине, то разделу задается стиль overflow:auto для создания вертикальной полосы прокрутки.

Рис. 6.13.  Раздел врезки на странице
Во многих случаях размер текстового контейнера задают меньшим, чем используемая по умолчанию ширина и высота для создания "врезанных" комментариев, то есть для вывода помещенного в поле текста, который появляется сбоку от основного текстового содержимого страницы. Раздел врезки показан на рисунке 6.13. Он смещается вправо, а основной текст обтекает его с переносом строк по словам.
Текстовые контейнеры, подобно графическим изображениям, можно размещать слева или справа на странице, применяя стиль float. При кодировании плавающего контейнера не забывайте о том, что код контейнера должен появиться первым, а за ним следует любой текст, который обтекает контейнер.




Плавающие контейнеры


Это раздел с шириной, заданной равной 250 пикселей, и высотой, равной 200 пикселей. Он имеет границу ridge толщиной 5 пикселей, отступ в 10 пикселей и фоновый цвет gray. Раздел смещается на странице вправо. Его левое поле задано равным 20 пикселей для отделения от текста страницы.


Так как весь текст не помещается в контейнере указанной ширины и высоты, то разделу задается стиль overflow:auto для создания вертикальной полосы прокрутки.




... обтекающий текст...

Листинг 6.27. Код плавающего раздела (html, txt)

Отметим, что только около половины контента видно в разделе с заданной шириной и высотой. Поэтому свойство overflow:auto добавляется в таблицу стилей раздела, чтобы вывести вертикальную полосу прокрутки для доступа ко всему тексту. Граница добавляется для визуального выделения.
Приведенный выше код является хорошей иллюстрацией использования блочного тега 
 для охвата и оформления другие текстовых блоков как единого элемента контента страницы. В данном случае тег 
 охватывает заголовок и два параграфа. Его назначение состоит в определении этого контента для оформления в форме плавающего, ограниченного контейнера, внутри которого может прокручиваться содержимое.


Подавление вывода символов маркеров
Может понадобиться использование других, отличных от стандартных, символов маркеров перед элементами списка. В следующем примере свойство list-style-type задается как none, чтобы подавить вывод маркеров. Затем каждый элемент списка помечается символом правой стрелки () из шрифта Webdings (числовой символ "4" выводит символ правой стрелки в этом семействе шрифтов).


  
4 Элемент списка 1
 
4 Элемент списка 2
 
4 Элемент списка 3
 

Листинг 6.7. Код неупорядоченного списка без подавления символов маркеров (html, txt)


Рис. 6.2.  Неупорядоченный список с видимыми маркерами и символами стрелки
Когда в таблицу стилей добавляется list-style-type:none, то используемые по умолчанию символы в форме диска не выводятся; однако занимаемое этими символами пространство остается.
Чтобы переместить список, включая стрелки, влево, так чтобы он занял это пространство и сохранил нормальный отступ элементов списка, в таблицу стилей добавляют свойство margin-left. Левое поле шириной примерно 20 пикселей выравнивает символы правой стрелки в позиции, которую ранее занимали маркеры.


Поля, границы и отступы
Иллюстрация на рисунке 6.10 дает визуальное представление о таких компонентах элементов страницы, как поля (margin), границы (border) и отступы (padding). Для каждой из частей этих компонентов можно задавать одинаковый размер для всех четырех сторон контейнера, или отдельные стороны могут иметь различные значения. Вместе с размером контейнера и стилями размещения, рассматриваемыми далее, можно организовать и оформить контейнер с целью добиться более точного размещения и улучшения удобочитаемости содержимого страницы.

Рис. 6.10.  Поля (margin), отступы (padding), и границы (border), окружающие элементы страницы


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


Таблица 6.6. Свойства стиля позиционированияСвойствоЗначение
position
relative absolute
left
npx n%
top
npx n%
z-index
n


Для точного позиционирования на странице элементу необходимо присвоить свойство position. После этого элемент можно разместить в любом месте с точностью до пикселя с помощью соответствующих свойств left, top, и z-index.


Разбиение элементов по слоям
Элементы страницы при добавлении на страницу Web накладываются друг на друга слоями, то есть, каждый следующий кодируемый элемент содержится в слое, который располагается поверх предыдущих элементов. Как правило, это разделение на слои не очевидно и его не требуется знать, так как элементы страницы обычно не перекрываются. Однако когда элементы явно позиционируются на странице, они могут перекрываться, делая разбиение на слои очевидным. Также может понадобиться изменить используемое по умолчанию разбиение на слои, чтобы элементы были представлены в требуемом порядке наложения.
Можно явно изменить используемое по умолчанию разбиение элементов страницы на слои, кодируя их свойство стиля z-index. Значение z-index является относительной величиной. Элементы с большими числовыми значениями появятся поверх элементов с меньшими значениями. Так, элемент с z-index:2 появится поверх элемента с z-index:1, элемент с z-index:20 появится поверх элемента с z-index:10. Абсолютное значение z-index не имеет значения. Важны только относительные величины z-index, присвоенные множеству разбитых по слоям элементов.
Цветные квадраты, показанные на рисунке 6.17, демонстрируют различные позиции и слои. В этом случае распределение по слоям задается исключительно порядком по умолчанию, в котором квадраты были закодированы: закодированные последними появляются поверх кодированных ранее.


 Red Green Blue 




Листинг 6.31.  Код для перекрытия элементов страницы (html, txt)



Рис. 6.17.  Нормальное разбиение по слоям элементов страницы

Красный квадрат был закодирован первым, поэтому он появляется под зеленым, который закодирован вторым, - зеленый появляется под синим квадратом, который закодирован последним. Отметим, что эти квадраты создаются с помощью тегов , для которых заданы ширина, высота, цвет, цвет фона, и границы. Для создания этих слоев не требуется задание значения z-index. Однако, квадратам задаются параметры стиля left и top для смещения их по горизонтали и вертикали от их естественного положения бок-о-бок, чтобы они стали перекрывающимися и их распределение по слоям стало визуально очевидно.

Для приведенных выше квадратов можно изменить порядок слоев, просто присваивая им значения z-index. В следующем коде красному квадрату присвоено наибольшее значение (что делает его верхним), а синему квадрату - наименьшее (что делает его нижним). Порядок кодирования тегов  остается без изменения. Вывод этих квадратов показан на рисунке 6.18.




Листинг 6.32. Код для изменения последовательности слоев элементов страницы (html, txt)



Рис. 6.18.  Изменение порядка слоев элементов страницы

Вспомните, что абсолютные значения z-index не имеют значения, пока различия по величине находятся в правильном соотношении. Значения 3, 2 и 1, использованные выше, можно было бы закодировать как 30, 20 и 10; или 300, 200 и 100; или 300, 200 и 1. Наибольшее значение будет наверху, а наименьшее значение - внизу, независимо от их абсолютной величины.


Ширина и высота контейнера
В предыдущих параграфах настройки ширины и высоты применялись для изображений и горизонтальных линеек для задания определенного размера. То же самое можно делать практически с любым тегом XHTML, включая текстовые контейнеры. Следующий параграф, например, имеет размер в 50% от ширины окна браузера, а не занимает, как по умолчанию, всю ширину страницы. Граница добавлена для того, чтобы визуально подчеркнуть результат, а отступы используются для размещения границы на удалении от текста. Вывод параграфа в браузере показан на рисунке 6.11.


Это параграф с шириной, равной 50% ширины окна браузера. Кроме того, текст переносится по словам в этих границах. Так как ширина задана в процентах, то параграф изменяет размер, чтобы оставаться в пределах 50% ширины страницы при изменении размера окна браузера.


Листинг 6.25. Код для задания размеров и отступов параграфа (html, txt)


Рис. 6.11.  Параграф с шириной 50% ширины страницы
Ширина параграфа всегда остается равной 50%. Так как стиль height не задан, то высота параграфа увеличивается, чтобы охватить весь содержащийся в нем текст.


Стили границ
Стили границ включают свойства, назначенные типу границы, ее толщине и ее цвету. Эти свойства перечислены в следующей таблице.


Таблица 6.3. Стили и свойства границ СвойствоЗначение
border-style border-top-style border-right-style border-bottom-style border-left-style
Dashed dotted double groove inset none outset ridge solid
border-width border-top-width border-right-width border-bottom-width border-left-width
thin medium thick npx
border-color border-top-color border-right-color border-bottom-color border-left-color
#000000 - #FFFFFF color name rgb(r,g,b)
Border
border:style size color


Свойства стиля, толщины, и цвета границы могут применяться ко всем четырем сторонам элемента XHTML или выборочно применяться к отдельным сторонам. Например, пятью типами свойств стиля границы являются:
border-style - применяется ко всем четырем сторонам; border-top-style - применяется только к верхнему краю; border-right-style - применяется только к правому краю; border-bottom-style - применяется только к нижнему краю; border-left-style - применяется только к левому краю.

Когда спецификация границы применяется ко всем четырем сторонам элемента, то сокращенное свойство border объединяет значения стиля (style), толщины (width) и цвета (color), заданные в этом порядке и разделенные пробелами, в одном объявлении свойства. То есть вместо кодирования трех отдельных спецификаций
border-style:solid border-width:1px border-color:black

можно объединить эти настройки в одном свойстве границы:
border:solid 1 black

Не обязательно задавать все три эти значения, но присутствующие должны быть записаны в правильном порядке: border:solid 1px (неопределенный цвет).
На выбор существует восемь стилей границы (solid dashed dotted double groove inset outset ridge). Эти стили показаны на рисунке 6.6, с толщиной, равной 3 пикселям. Более тонкая граница не выводит некоторые из этих стилей.

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



 
This is a text string with borders inside  a paragraph with borders inside a division with four different borders.
 



Листинг 6.22. Код для различных стилей границы (html, txt)



Рис. 6.7.  Границы, окружающие элементы страницы

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


Стили отступов
В приведенном выше примере оформления границы сжимаются вокруг текста, который они охватывают. В большинстве случаев для визуальной привлекательности и удобочитаемости желательно оставлять свободное пространство между текстом и его границей. Это реализуется введением внутри текстового контейнера отступов (padding). Отступ является величиной свободного пространства между границами контейнера и вложенным в него контентом.
Отступы добавляются в контейнеры с помощью свойств стиля оформления, показанных в таблице 6.4. Свойство padding задает свободное пространство вдоль всех четырех сторон контейнера; свойства padding-top, padding-right, padding-bottom и padding-left выборочно добавляют отступы к каждой из четырех сторон.


Таблица 6.4. Свойства оформления отступов СвойствоЗначения
padding padding-top padding-right padding-bottom padding-left
npx


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


 
This is a text string with borders inside a paragraph with borders inside a division with four different borders.
 


Листинг 6.23. Код для отступов и различных стилей границы (html, txt)


Рис. 6.8.  Отступы, окружающие текстовые элементы


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


 
Элемент списка 1
 
Элемент списка 2 
 
Элемент списка 2a
 
Элемент списка 2b
   
Элемент списка 3
 

Листинг 6.13. Код вложенных упорядоченных списков (html, txt) I. Элемент списка 1 II. Элемент списка 2 i. Элемент списка 2a ii. Элемент списка 2b III. Элемент списка 3

Листинг 6.14. Вложенные упорядоченные списки с нумерацией римскими цифрами (html, txt)


Задание числовых символов
Следующий упорядоченный список нумеруется большими римскими цифрами (upper-roman). Вывод браузер показан в листинге 6.12.


 
Элемент списка 1
 
Элемент списка 2
 
Элемент списка 3
 

Листинг 6.11. Код упорядоченного списка с большими римскими цифрами (html, txt) I. Элемент списка 1 II. Элемент списка 2 III. Элемент списка 3

Листинг 6.12. Упорядоченный список с римскими цифрами (html, txt)


Задание полей для неупорядоченного списка
Обычно неупорядоченные списки имеют отступ от левого поля на фиксированное число пикселей. В некоторых случаях может понадобиться изменить это поведение. Можно включить задание стиля margin-left, чтобы переместить элементы к левому полю (задание поля для списка соответствует заданию поля для его контейнера). В следующем коде эта настройка поля добавляется в селектор ul, чтобы выровнять маркеры по полю страницы в 20 пикселей.


Листинг 6.5. Выравнивание неупорядоченного списка по полю страницы (html, txt)


Задание размеров элементов
Если не задано другое оформление, то текстовые контейнеры, такие, как теги 
,  и , имеют размер в соответствии со своим содержимым. Часто необходимо иметь дополнительный контроль над размерами контейнерных тегов, что можно получить с помощью настроек стиля, показанных в таблице 6.5. Свойства height и width были рассмотрены ранее. Здесь они объединяются со свойством overflow для управления размером и визуальным представлением текстовых контейнеров.


Таблица 6.5. Свойства стиля размера элементаСвойствоЗначение
Height
npx n% auto
Width
npx n% auto
Overflow
visible hidden scroll auto



Текстовые ссылки
Документы электронной таблицы
Как и для документов текстовых процессоров, электронные таблицы выводятся в браузере, если на компьютере пользователя имеется совместимое программное обеспечение. При соединении с документом Microsoft Excel - и если программа Microsoft Excel (или специальная программа чтения файлов Excel) установлена в системе пользователя - электронная таблица открывается в окне браузера. Следующая ссылка открывает электронную таблицу Excel в том же окне браузера, что и вызывающая страница, как показано на рисунке 7.5.
Вывод документа Excel



Рис. 7.5.  Документ Excel, открытый в окне браузера
Подмножество меню Excel добавляется в панель меню браузера, позволяя выполнять небольшое редактирование и сохранение документа на локальном компьютере. Кнопка Back используется для возврата на вызывающую страницу. Аналогичный вывод создается, когда ссылка выводится в отдельном окне браузера.


Документы презентации
Слайдовая презентация выводится в браузере, если на компьютере пользователя имеется соответствующее программное обеспечение. При соединении с документом Microsoft PowerPoint - если программа PowerPoint (или специальная программа чтения документов PowerPoint) установлена в системе пользователя - презентация открывается в окне браузера. Кнопка браузера Back предназначена для возврата на вызывающую страницу. Следующая ссылка открывает документ PowerPoint для вывода в окне браузера, как показано на рисунке 7.6.
Вывод презентации PowerPoint



Рис. 7.6.  Документ PowerPoint, открытый в окне браузера


Документы, созданные текстовым процессором
Документы, созданные текстовым процессором, могут выводиться в браузере, если на компьютере пользователя имеется совместимое программное обеспечение. При соединении с документом Microsoft Word - если программа Microsoft Word (или специальная программа для чтения документов Word) установлена в компьютерной системе пользователя - документ Word открывается в окне браузера. Следующая ссылка открывает документ Word, заменяющий вызывающую страницу, как показано на рисунке 7.4.
Вывод документа Word



Рис. 7.4.  Документ Word, открытый в окне браузера
Отметим, что программа Microsoft Word открывается внутри окна браузера и что в панель меню браузера добавляется подмножество меню Word. Пользователи могут выполнять основные операции редактирования документа Word и сохранять его на своем локальном компьютере. Они не могут, конечно, редактировать и сохранить исходный документ, только копию, выводимую в окне браузера. Кнопка браузера Back используется для возврата на вызывающую страницу. Если вызываемый документ открывается в отдельном окне браузера, то это окно тоже содержит подмножество меню редактирования Word.


Графические файлы
Изображения GIF, PNG, и JPEG можно выводить в браузере, используя прямые ссылки на эти графические файлы. Другими словами, чтобы вывести графическое изображение, не требуется встраивать его в страницу Web. При простом соединении с файлом с расширением .gif, .png и .jpg изображения открываются прямо в окне браузера.
Так как изображения не форматируются на странице Web, они выводятся в верхнем левом углу окна браузера со своим исходным размером. Следующая ссылка открывает файл изображения .gif, как показано на рисунке 7.7. Когда изображение открывается в том же окне браузера, кнопка Back используется для возврата на вызывающую страницу.
Вывод изображения GIF



Рис. 7.7.  Изображение GIF, открытое в окне браузера


Графические ссылки
Ссылки можно инициировать графическими изображениями, помещая тег  внутрь тега . Общий формат присваивания ссылок графическим изображениям показан ниже.


Листинг 7.11. Общий формат графической ссылки (html, txt)

Изображения особенно эффективны для ссылок, так как с помощью информативной графики можно сразу сказать о назначении сайта. Ссылки, закодированные на листинге 7.12 и показанные на рисунке 7.9, созданы из изображений, полученных с соответствующих сайтов.


  Ebay 


  NASCAR 


  The Weather Channel 


  Microsoft 


Листинг 7.12. Код для создания графических и текстовых ссылок (html, txt)


Рис. 7.9.  Графические и текстовые ссылки
По умолчанию графические ссылки окружены границей, чтобы указать, что это ссылка, - цель та же, что и у подчеркивания текстовых ссылок. В данном примере вывод границы подавляется в таблице стилей, задавая границу изображений толщиной 0px.
При использовании графических изображений в качестве ссылок желательно создавать также текстовые ссылки. В данном примере это сделано включением отдельных текстовых ссылок, которые выровнены по центру их соответствующих изображений с помощью свойства таблицы стилей vertical-align.
Вспомните, что удаленный сайт Web должен открываться в отдельном окне браузера, чтобы пользователь оставался в контакте с исходным сайтом. Приведенные выше ссылки модифицированы в следующем коде так, чтобы они открывались в новом окне браузера с помощью описанной ранее техники использования JavaScript.
  Ebay 




p#B {border:dashed 3px blue}


span#C {border:solid 4px green} 


 
This is a text string with borders inside  a paragraph with borders inside a division with four different borders.
 



Листинг 6.22. Код для различных стилей границы (html, txt)



Рис. 6.7.  Границы, окружающие элементы страницы

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


Исключенные атрибуты 
Цвета ссылок страницы можно изменять, кодируя атрибуты в теге . Существует три атрибута:
link="color" vlink="color" alink="color"

использующие имена цветов или шестнадцатеричные значения для задания цвета непосещенной ссылки, посещенной ссылки и активной ссылки, соответственно.


Эти атрибуты исключены в XHTML, поэтому следует отдать предпочтение применению подобных селекторов ссылок и свойствам таблиц стилей.


Исключенный атрибут name
Место назначения ссылки внутри страницы можно кодировать в формате , а не , используя атрибут name вместо атрибута id. Хотя атрибут name еще работает в современных браузерах, он не распознается стандартами XHTML 1.1. Атрибут name можно использовать, если документ не будет проверяться службами валидации W3C.


Исключенный атрибут target
Если не задано иначе, то вызываемая страница открывается в том же окне браузера, которое выводит вызывающую страницу. Исходная страница заменяется вызываемой страницей. Часто удобно, особенно при соединении с удаленными сайтами Web, открывать эту страницу в другом окне браузера. Когда посетители покидают сайт, чтобы просмотреть удаленные сайты, они могут оказаться не в состоянии вернуться назад к исходной странице, используя кнопку возврата в браузере. Открывая удаленные сайты в новом окне, посетители не теряют контакт со страницей. Исходный сайт будет всегда доступен в исходном окне.
Можно определить, как должна открываться вызываемая страница, кодируя в теге  атрибут target="_window". Чтобы указать окно для открытия страницы, в коде используются специальные значения, каждое из которых имеет в качестве префикса символ подчеркивания (_). Эти окна кодируются следующим образом:
_blank - новое окно _self - текущее окно (по умолчанию) _top - все окно браузера (применяется при использовании фреймов) _parent - родительский фрейм (применяется при использовании фреймов)

В следующем примере удаленный сайт открывается в новом окне браузера, содержащая ссылку страница остается видимой в исходном окне браузера.
The Weather Channel

Атрибут target не действителен по стандартам XHTML 1.1. Тем не менее, открытие удаленных сайтов Web в отдельном окне браузера остается хорошей идеей. Можно разрешить эту ситуацию, не нарушая стандартов XHTML, с помощью описанной ниже техники.


Исключенный код usemap
Показанный выше общий формат атрибута usemap для тега 
usemap="#mapname"

использует символ "#" в качестве префикса для mapname. Однако в стандартах XHTML 1.1 этот символ считается незаконным. Текущие стандарты требуют, чтобы атрибут записывался в упрощенном формате: usemap="mapname", без символа префикса. Проблема в том, что некоторые браузеры не соответствуют стандартам и не распознают рекомендованный формат. Поэтому может понадобиться использовать старый формат атрибута usemap, чтобы карты ссылок работали правильно. Единственный недостаток в том, что в этом случае страница не будет считаться корректной при проверке службой валидации W3C.


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

Рис. 7.10.  Карта ссылок и сопровождающие текстовые ссылки


Код страницы с картой ссылок
Следующий листинг показывает код карты ссылок, описанной в текущем примере страницы. Текстовые параграфы присутствуют не полностью, только ссылки внутри страницы на эти разделы страницы.

Листинг 7.16. Код страницы с картой ссылок (html, txt)

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


Кодирование карты ссылок
Изображение, которое станет картой ссылок, помещается на страницу с помощью тега . Кроме своих стандартных атрибутов этот тег содержит атрибут usemap="mapname", который указывает на названный этим именем тег 

Листинг 7.19. Частичный код страниц слайд-шоу

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



Листинг 7.20. Вывод слайд-шоу в отдельном окне браузера

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

Соединение с документами других типов

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

Ссылки е-mail

Существует вариант атрибута href, который позволяет задать ссылку e-mail. Щелчок на этой ссылке открывает используемую по умолчанию почтовую программу посетителя для создания переписки с адресом, указанным в ссылке. Общий формат этой ссылки показан на листинге 7-10.
текст ссылки
Листинг 7.10. Общий формат ссылки mailto: (html, txt)
За атрибутом href="mailto:" следует адрес e-mail, обычно адрес, по которому ведут переписку с посетителями. Следующая ссылка, например, открывает программу e-mail посетителя (которая задана как используемая браузером по умолчанию) и вводит указанный адрес e-mail в строку адреса.
Пишите мне


Рис. 7.8.  Открытая по ссылке href="mailto:" программа e-mail

Ссылки внутри страницы

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

Рис. 7.2.  Ссылки на странице
Чтобы создать ссылки внутри страницы, необходимо закодировать пару анкерных тегов, показанных на листинге 7.5.
текст ссылки ... текст объекта ссылки
Листинг 7.5. Общий формат тегов для создания ссылок внутри страницы (html, txt)
Место, в которое делается ссылка (обычно боковой заголовок на странице, но можно использовать любой другой текст), помещается внутрь тега , содержащего текстовое значение для идентификации этого места назначения ссылки на странице. Текст, откуда делается ссылка, помещается внутрь тега , в котором это имя места назначения кодируется с предшествующим символом "#".
Следующий код показывает три ссылки в три различные места на странице. Позиции мест назначения имеют идентификаторы ITEM1, ITEM2, и ITEM3. Когда происходит щелчок на ссылке вверху страницы, браузер переходит к одной из этих указанных позиций назначения.

Go to Item 1

Go to Item 2

Go to Item 3

Here is Item 1

...

Here is Item 2/

...

Here is Item 3

...

Листинг 7.6. Код создания ссылок на странице (html, txt)

Даже хотя текстовые строки места назначения помещены внутри тегов , они не окрашены и не подчеркнуты, как обычные ссылки. Они являются "невидимыми" целями ссылок (использующими атрибут id), а не самими ссылками (использующими атрибут href).

При создании ссылки из верхней части страницы Wеb в место, расположенное ниже на той же странице, желательно создавать ссылки для возврата к началу страницы. В данном примере каждый раздел ссылки (ITEM1, ITEM2, и ITEM3) сопровождается ссылкой возврата к началу (Top) страницы. Каждая из этих ссылок на странице кодируется следующим образом.

Top

Листинг 7.7. Код ссылки для перехода к началу страницы (html, txt)

Отметим, что в URL ссылки (href="#") не задано имя места назначения на странице. Когда для ссылки на странице задается место назначения без имени, то браузер по умолчанию возвращается к вершине страницы.

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

Top of Page

. . .

Top

Листинг 7.8. Код, определяющий место назначения с именем вверху страницы (html, txt)

Теперь, когда происходит щелчок на ссылке Top, страница перемещается к помеченному месту назначения заголовка "Top of Page.".

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

Go to Section 3 on Next Page

Листинг 7.9. Код ссылки на помеченное место назначения на другой странице (html, txt)

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

Стили ссылок

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

Таблица 7.1. Селекторы ссылок и оформление СвойствоЗначение

a:link a:hover a:active a:visited	Любое свойство текста

Селектор a:link определяет непосещенную ссылку, селектор a:hover - ссылку с расположенным над ней указателем мыши, селектор a:active - ссылку, на которой был сделан щелчок, а селектор a:visited - ссылку, которая была посещена. Это оформление состояния ссылок можно изменить с помощью любой комбинации свойств значений текстовых стилей. Следующая таблица стилей иллюстрирует возможные настройки для четырех состояний ссылок.

Text Link

Листинг 7.4. Задание стилей для текстовых ссылок (html, txt)

Рис. 7.1.  Оформление текстовых ссылок в соответствии с действиями пользователя
Обычная непосещенная ссылка выводится синим цветом, но без подчеркивания. Когда курсор мыши перемещается поверх ссылки, она изменяет свой цвет на зеленый, подчеркивается и выводится размером 14pt. Когда делают щелчок на ссылке, ее цвет изменяется на красный. Посещенная ссылка выводится серым цветом без подчеркивания и размером 12pt.

Тег

Наиболее распространенным типом ссылки является реагирующее на щелчок мыши слово или фраза, которая соединяется непосредственно с вызываемой страницей. Текстовая ссылка создается с помощью тега анкера , он охватывает строку текста и определяет расположение страницы, с которой создается соединение. Базовый формат тега показан на листинге 7.1.
текст ссылки
Листинг 7.1. Общий формат тега (html, txt)
Текст ссылки, по умолчанию, подчеркивается и выводится в браузере синим цветом, как визуальный указатель, что строка текста является ссылкой, реагирующей на щелчок мыши. Расположение страницы соединения задается атрибутом href (hyperlink reference - гипертекстовая ссылка).
Можно создать ссылку на собственную страницу или на страницу на удаленном сайте Web. Если локальная связанная страница находится в том же каталоге, что и вызывающая страница, то в качестве URL требуется только имя страницы. Если связанная страница находится на том же сервере Web, что и вызывающая страница, но в другом каталоге, то в качестве URL используется путь доступа к каталогу этой вызываемой страницы (относительная ссылка). Если вызываемая страница находится на другом сайте Web, то ссылка должна включать протокол и ссылку на домен "http://имя домена" (абсолютная ссылка). Можно соединиться с именем сайта, чтобы извлечь используемую по умолчанию домашнюю страницу, или, если известен адрес, с определенной страницей на этом сайте.
Перезагрузить эту страницу Погода
Листинг 7.2. Соединение с локальной и удаленной страницами Web (html, txt)
Вспомните, что тег является линейным тегом и, чтобы соответствовать стандартам XHTML 1.1, должен быть заключен внутри блочного тега, такого, как тег или

.

Тег

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

Листинг 7.17. Общая форма тега (html, txt)
Атрибут http-equiv определяет такое использование тега , как обновление или перезагрузку текущей страницы. Атрибут content определяет количество секунд ожидания, прежде чем произойдет перезагрузка вместе с адресом URL страницы, на которую произойдет переадресация, когда текущая страница перезагрузится.
Например, страница с именем Redirect.htm расположена в каталоге, где находится страница xhtml07-04.htm. На странице Redirect.htm кодируется тег meta, который через пять секунд ожидания перенаправляет вызов на страницу xhtml07-04.htm.
В разделе страницы Redirect.htm имеется следующий тег для перехода на страницу xhtml07-04.htm.

Листинг 7.18. Код автоматической переадресации на другую страницу (html, txt)

Текстовые файлы

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


Рис. 7.3.  Текстовый документ, открытый в окне браузера
В этом примере текстовый документ открывается в окне браузера, заменяя вызывающую страницу. Однако, когда документ с расширением файла .txt открывается в отдельном окне, он открывается программой, ассоциированной с этим типом файла. В случае файла .txt для открытия документа используется программа текстового редактора, обычно Notepad. Документ появится во внешнем окне Notepad. Если пользователь выбрал другую программу редактора в качестве используемой по умолчанию в системе, то документ откроется в окне этой программы.

Текстовые ссылки

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

Вывод в новом окне браузера

Страницу Web можно открыть в новом окне браузера не нарушая стандартов XHTML, если поместить в тег анкера операторы JavaScript. JavaScript является используемым по умолчанию языком программирования для браузеров. Чтобы применять эту технику для открытия страницы в новом окне браузера, знать этот язык не требуется.
The Weather
Листинг 7.3. Открытие страницы в новом окне браузера (html, txt)
Приведенный выше код содержит "обработчик событий" JavaScript onclick, который перехватывает щелчок пользователя на тексте ссылки. Щелчок на ссылке приводит к выполнению оператора open() для открытия заданного URL в новом окне браузера. Атрибут href="javascript:" заменяет URL обычной ссылки на указание, что вместо соединения со страницей выполняется процедура JavaScript.
Этот код можно использовать для локальных или удаленных ссылок, изменяя просто значения URL и выводимый текст. Проверьте, что код заключается в кавычки, точно таким же образом, как показано выше.



---

---