Атрибуты

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

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

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

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

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

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

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

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

Цвет линейки

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

<p>Синяя горизонтальная линейка высотой 10 пикселей, шириной 300 и смещенная к правому полю:</p>

<p>Красная горизонтальная линейка высотой 2 пикселя, 75% от ширины страницы и расположенная по центру:</p>

<p>Зеленая горизонтальная линейка высотой 10 пикселей; 25% от ширины страницы и смещенная к левому полю:</p>

</body>

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

Рис. 3.15. Горизонтальные линейки различных стилей

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

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

Цвет текста и фона

Цвет текста задается присваиванием значения цвета в таблице стилей, которая связана с контейнерным тегом, содержащим текст. Например, заголовок можно вывести синим цветом, присваивая имя этого цвета в линейной таблице стилей тега <hn>.

<h1 style="color:blue">Синий заголовок</h1>

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

Если весь параграф должен иметь определенный цвет, то имя этого цвета можно задать в таблице стилей, связанной с тегом <p>.

<p style="color:red">...красный текст параграфа ...</p>

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

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

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

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

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

Исключенные атрибуты тега <body>

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

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

marginwidth="n" marginheight="n"

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

или

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

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

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

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

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

Классы стилей оформления

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

.class {property:value [ ;property:value] ...}

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

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

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

<p class="Offset">Этот параграф требует специального оформления, отличающегося от обычных параграфов на странице. Он имеет левое и правое поле шириной по 30 пикселей.</p>

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

(Отметим, что присвоенный тегу класс не включает точку, которая требуется при объявлении селектора .class в таблице стилей.)

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

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

<head> <title>Стили классов</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оформление тегов <span> и <div>

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

Листинг 3.38. Избегайте использования простых селекторов для тегов <div> и <span> (html, txt)

Однако, используя селекторы ID с этими тегами, можно применять различное оформление для различных тегов <span> и <div>, не связывая их с одним определенным стилем.

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

<div id="Justify"> <p>Этот параграф оформляется наследованием оформления своего контейнерного раздела, который форматируется с помощью <span id="Red">"Justify"</span> style.</p>

<p>Это параграф также оформляется наследованием оформления своего контейнерного раздела. Кроме того, к одному из его слов применяется оформление <span id="Blue">"Blue"</span></p> </div>

Листинг 3.39. Использование селекторов ID для оформления отдельных тегов <div> и <span> (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. Плавающее изображение

<head> <title>Плавающее изображение</title> <style type="text/css"> body {margin:20px} p {text-align:justify} h2 {text-align:center} img {float:right; margin-left:25px} </style> </head>

<body>

<h2>Плавающие изображения</h2>

<p> <img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/> Альтернативой размещению изображения в отдельной строке является размещение изображения у левого или правого поля, позволяя тексту заполнять оставшееся свободное пространство. Сопровождающее изображение смещается вправо от текста на странице. </p>

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

</body>

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

Отметим, что свойство float ассоциировано с селектором img в предыдущей таблице стилей. Это свойство тега <img/> - тег будет плавающим, в отличие от случая, когда на строке размещается только изображение, которое выравнивается свойством text-align охватывающего тега <p>.

Изображения, которые смещаются на странице влево или вправо, должны кодироваться сразу перед текстом, который окружает изображение. В приведенном выше примере тег <img/> находится в начале параграфа, который окружает изображение. Между изображением и окружающим контентом нет никаких символов переноса строк. Тегу <img/> присвоено свойство стиля float:right, чтобы поместить у правого поля охватывающего параграфа. Он имеет также параметр стиля margin-left:25px, чтобы оставить пустое пространство между изображением и окружающим текстом слева.

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

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

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

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

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

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

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

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

Листинг 3.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 внешней таблицы стилей. Теги на этой странице наследуют свойства внешней таблицы стилей, если не модифицируются встроенной таблицей стилей.

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

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

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

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

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

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

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

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

selector {property:value [; property:value] ... }

Листинг 3.33. Общий формат встроенной таблицы стилей для простого селектора (html, txt)

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

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

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

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

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

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

Селекторы ID

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

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

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

<p id="Special">Этот параграф требует специального оформления, отличающегося от обычных параграфов на странице. Он должен быть смещен на 25 пикселей от обоих полей и не должен иметь отступа в первой строке.</p>

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

С помощью id, присвоенного этому тегу <p>, можно определить специальное оформление, используя селектор ID во встроенной таблице стилей. Общий формат селектора ID показан в листинге 3.36.

selector#id {property:value [; property:value] ...}

Листинг 3.36. Общий формат таблицы стилей для селектора ID (html, txt)

Стили определяют для селектора, но только для селектора с заданным (#) значением id. Таким образом, селектор ID можно добавить к приведенной выше таблице стилей, чтобы отформатировать специальный параграф иначе, чем обычный параграф:

Листинг 3.37. Задание стилей для селектора ID (html, txt)

Синтаксис p#Special относится к тегу <p> со значением id (#), заданным как "Special". Стандартный отступ первой строки в 25 пикселей, заданный простым селектором p, изменен на 0 пикселей для этого конкретного параграфа. Для этого параграфа также заданы значения левого и правого полей, отличающиеся от обычных параграфов. Однако его текст остается выровненным по ширине, как унаследовано из оформления стандартного параграфа, заданного селектором p. Другими словами, все параграфы наследуют оформление, заданное простым селектором p, если только стили не модифицируются или не дополняются селекторами p#id.

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

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

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

Реальный размер изображения, показанного на рисунке 3.12, равен 162 x 108 пикселей. При выводе на странице его ширина задается равной 100 пикселям с помощью линейной таблицы стилей.

Рис. 3.13. Динамическое изменение размера изображения

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

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

Вспомните из предыдущего материала, что тег <img/> имеет исключенные атрибуты width и height для изменения размеров изображений. Эти атрибуты должны заменяться соответствующими свойствами стиля width и height для удовлетворения стандартам XHTML. Хотя их имена совпадают, способы их применения различаются.

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

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

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

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

Рис. 3.12. Задание стиля горизонтальной линейки

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

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

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

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

Стиль text-align

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

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

СвойствоЗначения

text-align

left center right justify

Свойство стиля text-align является заменой исключенного атрибута align, использовавшегося ранее для тегов <p>, <hn>, и <hr/>. С данного момента все горизонтальное выравнивание должно делаться с помощью свойства text-align.

Стиль text-indent

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

Для создания отступа первой строки параграфа используется свойство стиля text-indent. Величина отступа задается числом пикселей или как процент от ширины страницы.

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

Свойство:Значение

text-indent

npx n%

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

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

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

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

Рис. 3.10. Отступ первой строки текста в параграфах

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

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

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

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

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

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

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

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

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

СвойствоЗначения

width	npx n%
height

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

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

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

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

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

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

Используйте встроенную таблицу стилей как основной метод оформления. Это позволит объединить стили в одном разделе страницы, облегчая поиск и изменение стилей, а также преобразование встроенных стилей во внешние таблицы стилей для приложений уровня сайта.Во встроенной таблице стилей используйте простые селекторные теги для применения общего оформления уровня страницы ко всем тегам одного типа.Определите классы стилей, чтобы выполнять оформление через теги общего назначения, - например, теги <span> и <div>. Используйте также классы стилей, когда два или несколько тегов требуют форматирования, отличающегося или дополняющего то, что задано их простыми селекторами тегов.Для единичных тегов, требующих уникального оформления, присвойте тегу значение id и задавайте его оформление с помощью селектора ID во встроенной таблице стилей.Используйте линейные таблицы стилей там, где требуется одноразовое оформление и удобно переопределить оформление с помощью таблицы стилей, закодированной внутри тега. Слишком большое количество линейных таблиц стилей трудно отслеживать в случае изменений; к тому же, одинаковые линейные стили необходимо изменять в нескольких местах, что ведет к возможным пропускам и ошибкам.

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

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

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

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

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

СвойствоЗначения

margin margin-top margin-right margin-bottom margin-left

npx n% auto

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

Тег <div>

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

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

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

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

</div>

Листинг 3.32. Код оформления двух параграфов с помощью охватывающего тега <div> (html, txt)

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

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

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

Тег <span>

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

В следующем параграфе слова "КРАСНЫЙ" и "СИНИЙ" выделяются тегами <span> как слова, для которых эти теги определяют цвет. Когда этот параграф выводится в браузере, эти два слова выводятся соответствующими цветами.

<p>Этот параграф содержит слово <span style="color:red">RED</span>, которое находится внутри тега <span>, чтобы определить цвет этого слова. В этом предложение для слова <span style="color:blue">BLUE</span> задан этот цвет.</p>

Листинг 3.31. Код оформления отдельных слов в параграфе (html, txt)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Листинг 3.6. Документ внешней таблицы стилей (html, txt)

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

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

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

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

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

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

Листинг 3.8. Соединение страницы Web с внешней таблицей стилей (html, txt)

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

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

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

Листинг 3.3. Общая форма встроенной таблицы стилей (html, txt)

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

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

</head>

Листинг 3.4. Применение встроенной таблицы стилей (html, txt)

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

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

</style>

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

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

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

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

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

Рис. 3.8. Выравнивание изображения по центру

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

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

Тег <p> окружает блок текста, который также располагает свои строки у левого края страницы или у левой границы, созданной заданием стиля оформления параграфа margin или margin-left. Для параграфа можно задать стиль text-align, чтобы изменить это используемое по умолчанию выравнивание слева.

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

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

Рис. 3.7. Вывод параграфов с разным выравниванием в окне браузера

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

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

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

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

Стили выравнивания текста можно применять к тегам <hn> для размещения заголовков на странице слева, в центре или справа. В следующем примере свойство text-align задается для заголовка <h2> в линейной таблице стилей для выравнивания его на странице горизонтально по центру. Это свойство стиля оформления заменяет старый атрибут align="center", использовавшийся ранее для выравнивания заголовков.

<h2 style="text-align:center">Центрированный заголовок</h2>

Листинг 3.21. Задание выравнивания заголовка (html, txt)

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

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

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

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

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

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

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

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

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

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

</body>

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

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

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

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

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

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

<body>

</body>

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

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

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

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

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

Stylesheet.css

body {margin:25px}

Листинг 3.14. Внешняя таблица стилей (файл Stylesheet.css) (html, txt)

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

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

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

Значение размера

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

Цвета RGB

Спецификация цвета RGB использует десятичные значения для указания объединенной интенсивности красного, зеленого и синего оттенков. Значения могут изменяться от 0 (наименьшего) до 255 (наибольшего). Эти значения RGB задаются в таблицах стилей в следующем формате:

rgb(r,g,b)

с помощью десятичных значений для указания интенсивностей трех цветов. Таким образом, кодирование значения RGB как rgb(255,0,0) указывает красный цвет, rgb(0,255,0) указывает зеленый цвет, а rgb(0,0,255) указывает синий цвет. Как и в случае шестнадцатеричных значений, весь спектр более чем 16 миллионов цветов можно представить комбинацией интенсивностей красного, зеленого и синего цветов.

Цвета текста и фона

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

Форматирование кодов символов

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

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

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

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

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

Групповой селектор - это два или несколько селекторов тегов, разделенных запятыми, которые обладают одинаковым стилем оформления. Например, следующая таблица стилей объявляет общий тип шрифта и цвет для набора тегов <hn>, создавая общий визуальный стиль для всех используемых на странице заголовков.

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

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

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

Рис. 4.9. Вывод в браузере заголовков, оформленных групповыми селекторами

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

Кстати, не требуется, чтобы групповые селекторы состояли из тегов одного типа. Все теги, которые используют один стиль, могут быть частью группового селектора. Например, групповой селектор, показанный на листинге 4.16, указывает, что все теги параграфов <p>, теги <span> и <div> на странице применяют один и тот же тип шрифта и размер.

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

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

Хотя и не используемый в XHTML, но распространенный способ задания оформления шрифта состоит в применении тега <font>. Этот тег, подобно тегу <span>, задает для ограничиваемого текста тип шрифта, размер, и цвет. Общая форма тега <font> и его атрибуты показаны ниже.

<font face="face1 [,face2] [,face3]" size="n|+n|-n" color="color" > ... форматируемый текст ... </font>

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

Цвет шрифта можно задавать с помощью атрибута color. Значение цвета задается именем цвета или шестнадцатеричным значением. Эти способы будут рассмотрены в дальнейшем.

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

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

Рис. 4.6. Использование оформления текста для создания библиографических записей

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

<div class="head">Библиография</div>

<p>Duthie, P. A. & MacDonald, M. (2002). <span class="book">ASP.NET in a Nutshell: A Desktop Quick Reference</span>. Sebastopol, CA: O`Reilly & Associates, Inc.</p>

<p>Goodman, Danny (2002). <span class="book">Dynamic HTML: The Definitive Reference.</span>. Sebastopos, CA: O`Reilly & Associates, Inc.</p>

<p>Griffin, J., Morales, C., & Finnegan, J. (2003). <span class=<book<>Web Design & Development Using XHTML</span>. Wilsonville, Oregon: Franklin, Beedle & Associates.</p>

</div>

Листинг 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)

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

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

Листинг 4.12. Оформление тега заголовка в таблице стилей (html, txt)

выводит заголовок размером 2, наклонным типом шрифта Arial, переопределяя обычный вывод заголовка шрифтом Times New Roman. Другие стили могут использоваться в теге для вывода заголовка с дополнительными характеристиками оформления.

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

<p class="head1">Заголовок уровня 1</p> <p class="head2">Заголовок уровня 2</p> <p class="head3">Заголовок уровня 3</p> <p class="head4">Заголовок уровня 4</p> <p class="head5">Заголовок уровня 5</p> <p class="head6">Заголовок уровня 6</p>

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

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

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

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

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

Рис. 4.5. Использование оформления для создания отчета

Большая часть оформления находится во встроенной таблице стилей, определяющей классы стиля, которые применяются тегами <span> и <div>. Линейные таблицы стилей используются в одном определенном разделе страницы для одноразовых стилей, которые не применяются в других разделах документа. Используемый по умолчанию формат страницы задается селектором тега <body>: полуторный (1 1/2) межстрочный интервал, отступ первой строки параграфа и выравнивание текста по ширине.

Листинг 4.7. Код создания отчета (html, txt)

Уместен, вероятно, комментарий относительно воспроизведенного здесь следующего раздела вывода областей <div> и <span>.

Практический 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)

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

<div class="offset"> <span style="width:80px; text-align:left"> Практический<br/> Факты<br/> Действие<br/> </span> <span style="width:100px; text-align:center; font-weight:bold"> 4 3 2 1 1 2 3 4<br/> 4 3 2 1 1 2 3 4<br/> 4 3 2 1 1 2 3 4<br/> </span> <span style="width:80px; text-align:right"> Эмоциональный<br/> Чувства<br/> Обсуждение<br/>

</span> </div>

Листинг 4.9. Код вложения span в div (html, txt)

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

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

Еще одно замечание относительно тегов <span>: тег не может появиться в строке сам по себе. То есть, тег <span> должен быть ограничен блочным тегом, таким, как тег <p> или <div>. Обратите внимание на код, создающий разделительную линию для сноски внизу предыдущего отчета.

Листинг 4.10. Вложение тега <span> в блочный тег (html, txt)

Если этот тег <span> будет закодирован не внутри своего контейнерного тега <div>, то он не пройдет проверку (валидацию) 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"

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

Свойство 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.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Пример стилей шрифта</title>

<style type="text/css"> body {font:12pt arial; text-indent:25px; margin:20px} .head {font:bold 14pt; text-align:center; text-indent:0px} .offset {margin-left:25px; margin-right:25px; text-indent:0px} .cap {font:bold 24pt} .fancy {font:13pt comic sans ms} .style1 {font:bold 14pt times new roman} .style2 {font:bold 12pt courier new; color:fuchsia} </style>

</head> <body>

<div class="head">Оформление шрифта</div>

<p><span class="cap">Э</span>та страница показывает различное оформление шрифта, задаваемое с помощью встроенной таблицы стилей. Оформление применяется ко всей странице и к отдельным частям текста на странице.</p>

<div class="offset">

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

<p class="fancy">Этот параграф оформлен с помощью класса, который содержит тип шрифта и размер. Внутри этого параграфа имеется тег span, который оформляет <span class="style1">эту строку текста</span> иначе по сравнению с остальной частью параграфа. Кроме того, это <span class="style2">слово</span> использует свой собственный специальный стиль оформления.</p>

</div>

</body> </html>

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

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

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

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

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

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

СвойствоЗначение

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

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

Различные комбинации цветов фона и текста показаны в следующем коде. Вывод браузером этой страницы показан на рисунке 4.12.

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

Рис. 4.12. Изменение свойств цвета текста

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

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

</body> </html>
Листинг 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). Как свойство выравнивания текста оно позиционирует текст относительно его контейнера или относительно окружающего содержимого. Примеры этого свойства даются при обсуждении отдельных тегов или задач оформления.

Тег <pre>

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

Блок текста, окруженный блочным тегом <pre> ("preformatted" или "preserve"), выводится моноширинным (равномерным) шрифтом (monospace) точно в том же виде, как он был сформирован в редакторе. То есть, пробелы между символами и пустые строки, использованные для форматирования кода XHTML в редакторе, точно воспроизводятся в браузере, пробел за пробелом и строка за строкой. Тег <pre> часто применяется для создания простых таблиц, где выравнивание столбцов создается с помощью пробелов. Следующий код, например, создает таблицу, которая выводится в браузере подобно тому, как она была введена в редакторе.

<pre> Таблица 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 ----------------------------------------------- </pre>

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

Так как все строки текста помещены внутри тега <pre>, таблицу можно сформировать в редакторе с помощью пробелов и пустых строк. Это выравнивание возможно, потому что редактор и браузер в данном случае выводят символы моноширинным шрифтом (т.е. шрифтом постоянной ширины), создавая равномерно распределенные символы. Необходимо проверить только, что редактор применяет моноширинный шрифт (например, Courier New), чтобы аккуратно распределить текст. Вывод браузера здесь не показан, так как он совпадает с организацией таблицы, создаваемой в редакторе.

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

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

<pre style="color:blue"> <b>Таблица 1</b> <b>Продажи по регионам</b> ---------------------------------------------- <b><i>Регион/Год 2000 2001 2002 2003</i></b> ---------------------------------------------- <b>Восток</b> 35.2 37.4 39.8 40.0 <b>Запад</b> 28.0 25.6 27.4 29.8 <b>Юг</b> 102.3 86.1 98.6 100.2 <b>Север</b> 10.5 8.6 9.8 10.4 ---------------------------------------------- </pre>

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

Рис. 4.10. Вывод в браузере таблицы с помощью тега <pre> с дополнительным оформлением

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

Теги физических стилей

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

Таблица 4.3. Теги физических стилей

Тег физического стиляВывод в браузереЭквивалент в таблице стилей

<big>big</big>	big	font-size:18px
<b>bold</b>	bold	font-weight:bold
<i>italic</i>	italic	font-style:italic
<small>small</small>	small	font-size:12px
<tt>typewriter</tt>	typewriter	font-family:courier new
<sub>subscript</sub>	subscript	vertical-align:sub
<sup>superscript</sup>	superscript	vertical-align:super
<s>strikeout</s> (исключен)	strikeout	text-decoration:line-through
<u>underscore</u> (исключен)	underscore	text-decoration:underline

Как показано в приведенной выше таблице, обрамление текстовой строки тегами <b>...</b>, например, преобразует текст в полужирные символы точно того же стиля, что и задание свойства font-weight:bold. Будут ли использоваться эти теги физических стилей или свойства стилей CSS, является вопросом личного предпочтения. Отметим, что теги strikeout и underscore исключены и порождают ошибки при проверке на соответствие XHTML Strict.

Эти теги могут иметь также связанные с ними свойства стиля. Например, объявление в таблице стилей b {color:red} связывает color с селектором b. Поэтому любой текст, задаваемый полужирным с помощью тега <b>, будет также выводиться красным цветом.

Теги логических стилей

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

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

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

Таблица 4.4. Теги логических стилей

Тег логического стиляНазначениеВывод в браузере

<abbr>abbreviation</abbr>	Указывает сокращение	abbreviation
<acronym>acronym</acronym>	Указывает акроним	acronym
<cite>citation</cite>	Содержит цитату или ссылку на другие источники	citation
<code>code</code>	Указывает фрагмент кода программы	code
<dfn>definition</dfn>	Указывает, что это пример определения термина	definition
<em>emphasis</em>	Указывает на выделение	emphasis
<strong>strong</strong>	Указывает на более сильное выделение	strong
<kbd>keyboard</kbd>	Указывает текст, вводимый пользователем	keyboard
<samp>sample</samp>	Определяет пример вывода программы, сценария и т.д.	sample
<var>variable</var>	Указывает экземпляр переменной или аргумента программы	variable

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

Теги стиля шрифта

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

Вложенные стили

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

<p> <span style="font-size:12pt"> Здесь <span style="font-size:16pt"> показано <span style="font-size:20pt"> вложение <span style="font-size:24pt"> стилей </span> друг </span> в </span> друга. </span> </p>

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

Рис. 4.3. Применение вложенных стилей шрифта с помощью тегов <span>

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

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

<p><span style="font-size:12pt">Здесь<span style="font-size:16pt">показано<span style="font-size:20pt">вложение<span style="font-size:24pt">стиля </span> друг</span>в </span>друга.</span></p>

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

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

<div style="font-size:12pt"> Here <div style="font-size:16pt"> are <div style="font-size:20pt"> styles <div style="font-size:24pt"> nested </div> inside </div> one </div> another. </div>

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

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

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

Вывод кода XHTML

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

Предположим, что на странице Web нужно вывести следующий код XHTML.

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

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

Этот код необходимо ввести в текстовом редакторе, используя специальные символы вместо символов < и >.

<pre style="font-size:9pt"> <p>Это параграф, в котором слово <span class="red"> RED</span> выводится красным цветом, помещенное внутри тега <span> , который использует класс стиля.</p> </pre>

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