Содержание
В главе использованы материалы [XHTML].
Когда текст изображается в браузере, он выводится используемым по умолчанию типом, размером, стилем и цветом шрифта. Большинство браузеров используют тип шрифта Times New Roman, размером около 12 пунктов, и черный цвет. Однако некоторые параметры таблицы стилей позволяют изменять эти настройки, чтобы придать страницам другой вид. Подробнее об этом рассказано в данной лекции
Когда текст изображается в браузере, он выводится используемым по умолчанию типом, размером, стилем и цветом шрифта. Большинство браузеров используют тип шрифта Times New Roman, размером около 12 пунктов, и черный цвет. Однако некоторые параметры таблицы стилей позволяют изменять эти настройки, чтобы придать страницам другой вид.
При работе с текстовыми шрифтами необходимо учитывать, что тип шрифта, который выводится в браузере, ограничен набором шрифтов, установленных в компьютере. Поэтому необходимо помнить о том, какие типы компьютеров используют посетители страницы и какие типы шрифтов могут быть у них установлены. Лучше придерживаться распространенных типов, если только предполагаемая аудитория Web не известна заранее. Следующие виды шрифтов, типичные на ПК на основе Windows, представлены здесь размером 12 пунктов.
Рис. 4.1. ТипичныевидышрифтовПК (arial, arial narrow, comic sans ms, courier new, georgia, impact, tahoma, times new roman, verdana)
Существует шесть параметров стиля шрифта, которые можно использовать для создания разнообразия, привлекательности или выделения в тексте на странице 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 задает эти варианты в разделенном запятыми списке. Браузер ищет в компьютере первый подходящий вид шрифта и применяет его для вывода текста. Например, следующая таблица стилей задает стандартный стиль шрифта для страницы.
Пример 26.1. Выбор значений для семейства шрифтов
<style type="text/css">
body {font-family:helvetica, verdana, sans-serif}
</style>
Сначала браузер пытается использовать шрифт 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 .
Пример 26.2. Настройка шрифта с использованием отдельных свойств оформления
{font-family:arial;
font-variant:small-caps;
font-size:10pt;
font-weight:bold;
font-style:italic}
или как показано на листинге 4.3 ,
Пример 26.3. Настройка шрифта с использованием одного свойства font
{font:italic small-caps bold 10pt arial}
со значениями, разделенными пробелами. При использовании свойства font не требуется определять все значения, но они должны быть представлены в строгом порядке: font-style font-variant font-weight font-size font-family. Типичное объявление может включать, например, только значения font-size и font-family: {font:10pt arial}.
Следующий код применяет встроенную таблицу стилей с различными комбинациями настройки шрифта текста. В этом примере все значения оформления стиля используют сокращенное свойство font. Вывод в браузере этой страницы показан на рисунке 4.2 .
Пример 26.4. Настройка шрифта с использованием одного свойства font
<?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.2. Приложение стилей шрифта
Оформление тега <body> задает формат по умолчанию для всей страницы. После этого применяются различные классы стилей для отдельных частей текста.
Приведенная выше страница включает вложенные таблицы стилей, где внутренняя настройка стиля наследует и затем временно переопределяет, или изменяет, настройки внешнего стиля. Внешний стиль <body>, например, задает вывод страницы шрифтом типа Arial размером 12 пунктов с полями страницы 20 пикселей и отступом параграфа 25 пикселей. Эти настройки остаются в силе, пока не будут переопределены, например, вложенными стилями <div>, которые изменяют поля для двух вложенных параграфов на 25 пикселей и задают отступ параграфа как 0 пикселей. Эти стили разделов переопределяются далее в одном из вложенных параграфов, в котором стиль шрифта изменяется на Comic Sans MS 13 пунктов, сохраняя поля и отступ из раздела. В этом параграфе теги <span> используются для переопределения стиля параграфа для отдельных строк текста, которые будут иметь отличающийся тип шрифта и раз меры. Таблицы стилей могут вкладываться друг в друга, так что стили каскадно спускаются на любое количество уровней. Окончание действия настроек стиля происходит в обратном порядке. Этот момент иллюстрирует следующий код, показывающий структуру со сдвигами тегов <span>, которые применяют, а затем удаляют увеличивающиеся размеры шрифта с помощью линейных таблиц стилей.
Пример 26.5. Вложенные настройки стиля, использующие теги <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.3. Применение вложенных стилей шрифта с помощью тегов <span>
Хотя такое количество вложенных стилей вряд ли будут часто использоваться, суть вопроса состоит в том, что каждый закрывающий тег </span>, начиная с самого внутреннего, завершает действие связанного с ним стиля, что приводит к возвращению действия следующего внешнего стиля, пока не будет отменено действие всех вложенных стилей. Не забывайте только правильно поддерживать пары открывающих и закрывающих тегов оформления.
Приведенный выше пример еще раз подчеркивает тот факт, что теги <span> не имеют своих собственных характеристик форматирования. Хотя они записаны на отдельных строках, чтобы показать вложенную структуру примера, они не создают переноса строк или пробелов при выводе в браузере. Результат вывода такой же, как если бы код был записан в виде следующей непрерывной строки.
Пример 26.6. Другая запись кода задания вложенных стилей
<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>
В противоположность этому, тег <div> решает такие же задачи оформления, но, кроме того, создает перенос строки. Следующий код оформляет предыдущую строку текста с помощью тегов <div> и создает вывод, показанный на рисунке 4.4 .
Пример 26.7. Вложенные настройки стилей, использующие теги <div>
<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.4. Применение вложенного оформления шрифта с помощью тегов <div>
Необходимо помнить об этих различиях, так как теги <span> и <div> широко используются при оформлении элементов страницы.
Хотя и не используемый в 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.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). Как свойство выравнивания текста оно позиционирует текст относительно его контейнера или относительно окружающего содержимого. Примеры этого свойства даются при обсуждении отдельных тегов или задач оформления.
Результаты действия некоторых свойств текста можно видеть ниже, как показано на рисунке 4.5 . Вывод организован так, чтобы напоминать печатный отчет.
Рис. 4.5. Использование оформления для создания отчета
Большая часть оформления находится во встроенной таблице стилей, определяющей классы стиля, которые применяются тегами <span> и <div>. Линейные таблицы стилей используются в одном определенном разделе страницы для одноразовых стилей, которые не применяются в других разделах документа. Используемый по умолчанию формат страницы задается селектором тега <body>: полуторный (1 1/2) межстрочный интервал, отступ первой строки параграфа и выравнивание текста по ширине.
Пример 26.8. Код создания отчета
<?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 {line-height:1.5; text-indent:20px; text-align:justify}
.head1 {text-align:center; letter-spacing:1.5px; font:bold 16pt}
.head2 {text-indent:0px; font:bold 14pt}
.uline {text-decoration:underline}
.ital {font-style:italic}
.offset {margin-left:20px; text-indent:0px; line-height:normal}
.line {text-indent:0px}
.super {font-size:7pt; vertical-align:text-top}
.footnote {line-height:normal; text-indent:20px}
</style>
</head>
<body>
<div class="head1">Модель познавательного профиля</div>
<p> <span class="uline">Модель познавательного
профиля</span> является
инструментом самооценки, который должен помочь студентам определить свои
познавательные характеристики. Она позволяет оценить, как студент думает,
учится и принимает решения.</p>
<p>Модель классифицирует познавательные стили по двум биполярным осям:
Сенсорный-Интуитивный и Мыслитель-Чувственно воспринимающий.
Квадранты, сформированные двумя этими пересекающимися осями, помечены
ST (Сенсорный Мыслитель), SF (Сенсорный Чувственно воспринимающий), NF
(Интуитивный Мыслитель), и NF (Интуитивный Чувственно воспринимающий).
Самооценки изображаются на этой сетке как точечные значения в каждом из
квадрантов. Соединение точек создает некоторый четырехугольник, который
показывает сочетание предпочтительных стилей изучения.</p>
<div class="offset">
Вполне возможно, что имеется доминирующий квадрант, или один из
квадрантов составляет большую часть четырехугольника. Можно видеть, что
студент имеет некоторую область/предпочтения/способности для каждого вида
мышления и что можно усилить эти способности, изучая необходимые в
каждой из этих областей навыки. <span
class="super">1</span>
</div>
<p><span class="head2"> Оценочный тест
</span></p>
<p>Тест состоит из 60 пар слов, из которых студенты выбирают ту, которая
им
больше нравится или лучше всего их описывает. Примеры пар слов
включают:</p>
<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>
<p>Значение между 1 (слабое предпочтение) и 4 (сильное предпочтение)
присваивается одной из пар слов. Эти значения суммируются по всем
позициям и изображаются в квадранте для создания познавательного
профиля.</p>
<div><span
class="line">_________________</span></div>
<div class="footnote">
<span class="super">1</span> Краус , Луис, <span
class="ital">Как
учиться, и почему мы этого не делаем</span>, Cincinnati: Thomson Learning,
2000 (p. 19).
</div>
</body>
</html>
Уместен, вероятно, комментарий относительно воспроизведенного здесь следующего раздела вывода областей <div> и <span>.
Пример 26.9. Использование span внутри div
Практический 4 3 2 1 1 2 3 4 Эмоциональный
Факты 4 3 2 1 1 2 3 4 Чувства
Действие 4 3 2 1 1 2 3 4 Обсуждение
По умолчанию тег <div> расширяет ширину страницы, охватывая три блока текста. Являясь блочным, тег <div> создает также перенос строки, чтобы отделить свое содержимое от окружающего текста.
Пример 26.10. Код вложения span в 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>
Тег <span> является линейным тегом, не задающим перенос строки или дополнительные пустые строки перед или после тега. Поэтому несколько тегов <span>, закодированные один за другим, выводятся браузером на одной строке. Хотя слова и числа внутри тегов <span> выводятся на разных строках, содержимое самих тегов появляется рядом на одной строке внутри окружающего тега <div>.
В этом примере теги <span> задают также фиксированную ширину и различное выравнивание, чтобы равномерно распределить свое содержимое. Это пример использования свойства width, которое применялось ранее для задания размеров горизонтальных линеек и графических изображений, для определения точных размеров блока текста. Другие примеры определения размеров блоков текста будут представлены далее.
Еще одно замечание относительно тегов <span>: тег не может появиться в строке сам по себе. То есть, тег <span> должен быть ограничен блочным тегом, таким, как тег <p> или <div>. Обратите внимание на код, создающий разделительную линию для сноски внизу предыдущего отчета.
Пример 26.11. Вложение тега <span> в блочный тег
<div><span
class="line">_________________</span></div>
Если этот тег <span> будет закодирован не внутри своего контейнерного тега <div>, то он не пройдет проверку (валидацию) XHTML 1.1, хотя и может выводиться браузером правильно.
При использовании размеров в пикселях часто необходимо использовать отрицательные значения, чтобы добиться желательного результаты. Параграф, показанный на рисунке 4.6 , применяет отступ первой строки текста в -20px, чтобы создать "выступающий" формат параграфа, часто используемый в отчетах для библиографических записей.
Рис. 4.6. Использование оформления текста для создания библиографических записей
Как показано на листинге 4.11 , оформление задается окружающим тегом <div>, который использует класс стиля .biblio для своих параграфов. Левое поле для всех параграфов задается равным 20px. Такая настройка смещает весь параграф, так что задание смещения в -20px смещает первую строку влево до края поля.
Пример 26.12. Код для создания выступающих параграфов
<style type="text/css">
.head {text-align:center; font-weight:bold; font-size:14pt}
.biblio {margin-left:20px; text-indent:-20px}
.book {font-style:italic}
</style>
<div class="head"> Библиография </div>
<div class="biblio">
<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>
Вспомните, что свойства letter-spacing и word-spacing могут принимать как положительные, так и отрицательные значения. Строки на рисунке 4.10 заданы с различными значениями промежутков между буквами и словами для демонстрации результатов.
Рис. 4.7. Положительные и отрицательные интервалы между буквами и словами
Символы текста могут использовать такие стили, как bold (полужирный), italic (курсив), underscore (подчеркнутый) и другие для выделения или акцентирования букв и слов. Хотя эти стили можно задавать с помощью таблицы стилей, существуют также автономные теги, которые можно применять для непосредственного обрамления и форматирования символов текста.
Теги физических стилей являются линейными контейнерными тегами, обрамляющими строки символов, которые будут выводиться указанным стилем. Эти теги -общие для всех браузеров и выводятся одинаково во всех браузерах. Теги физических стилей показаны в таблице 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.
Вспомните, что теги заголовков <hn> окаймляют строки текста для вывода одним из шести стилей заголовков. Число n в теге изменяется от 1 (самый крупный) до 6 (наименьший). Заголовки выводятся полужирными символами используемого по умолчанию типа шрифта. Конечно, для изменения настроек тега заголовка можно применить таблицу стилей. Например, объявление стиля
Пример 26.13. Оформление тега заголовка в таблице стилей
<style type="text/css">
h2 {font-family:arial; font-style:italic}
</style>
выводит заголовок размером 2, наклонным типом шрифта Arial, переопределяя обычный вывод заголовка шрифтом Times New Roman. Другие стили могут использоваться в теге для вывода заголовка с дополнительными характеристиками оформления.
Таким же образом, как физические и логические теги шрифтов можно реализовать с помощью таблиц стилей, можно создавать заголовки с помощью таблиц стилей вместо использования специальных тегов <hn>. Следующая таблица стилей объявляет классы стилей, идентичные шести типам заголовков. Это кодирование выводится в браузере, как показано на рисунке 4.8 .
Пример 26.14. Теги оформления заголовков стилями
<style type="text/css">
.head1 {font:bold 24pt}
.head2 {font:bold 18pt}
.head3 {font:bold 13.5pt}
.head4 {font:bold 11pt}
.head5 {font:bold 10pt}
.head6 {font:bold 7.5pt}
</style>
<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.8. Вывод в браузере заголовков, созданных с помощью объявлений стилей
Таким образом, существует несколько возможных вариантов оформления заголовков. Можно использовать теги <hn> с настройками по умолчанию, использовать эти теги с измененным оформлением или вообще отказаться от тегов и создать свои собственные классы заголовков. Ни один из вариантов не является лучшим решением во всех случаях.
Заголовки различного уровня на странице Web должны обладать общим оформлением, так как являются визуальными ключами своей общей функции разделителей разделов содержимого страницы. Часто заголовки используют один тип шрифта и цвет, различаясь размером и выравниванием. Использование тегов <hn> облегчает управление стилями заголовков во встроенных таблицах стилей с помощью групповых селекторов.
Групповой селектор - это два или несколько селекторов тегов, разделенных запятыми, которые обладают одинаковым стилем оформления. Например, следующая таблица стилей объявляет общий тип шрифта и цвет для набора тегов <hn>, создавая общий визуальный стиль для всех используемых на странице заголовков.
Пример 26.15. Использование групповых селекторов для оформления группы тегов
<style type="text/css">
h1, h2, h3 {font-family:verdana; color:goldenrod}
</style>
Селектор h1, h2, h3 является групповым селектором, поэтому связанные с ним объявления стилей применяются ко всем тегам в этом списке. Предположим далее, что заголовки <h1> располагаются по центру, заголовки <h2> и <h3> выровнены по левому полю и заголовки <h3> выводятся курсивом. Эти дополнительные групповые и индивидуальные оформления можно добавить в приведенную выше таблицу стилей, чтобы создать результат, показанный на рисунке 4.9 .
Пример 26.16. Использование групповых селекторов для дополнительного оформления групп тегов
<style type="text/css">
h1, h2, h3 {font-family:verdana; color:goldenrod}
h1 {text-align:center}
h2, h3 {text-align:left}
h3 {font-style:italic}
</style>
Рис. 4.9. Вывод в браузере заголовков, оформленных групповыми селекторами
Групповые селекторы не отличаются по результату от простых селекторов. Они позволяют просто сократить запись объявления общих стилей. Они также иллюстрируют достаточно четко концепцию наследования стилей. В приведенном выше примере все три заголовка наследуют один тип шрифта и цвет из общего группового селектора h1, h2, h3; заголовки <h2> и <h3> наследуют выравнивание по левому полю из группового селектора h2, h3. Используя преимущества такого наследования, можно избавиться от кодирования отдельных дублирующих стилей для каждого селектора тега.
Кстати, не требуется, чтобы групповые селекторы состояли из тегов одного типа. Все теги, которые используют один стиль, могут быть частью группового селектора. Например, групповой селектор, показанный на листинге 4.16 , указывает, что все теги параграфов <p>, теги <span> и <div> на странице применяют один и тот же тип шрифта и размер.
Пример 26.17. Использование групповых селекторов для оформления различных тегов
<style type="text/css">
p, span, div {font-family:verdana; font-size:10pt}
</style>
Обычно браузер никак не форматирует текст, если текст не окружен тегами XHTML. Хотя в текстовом редакторе код мог быть как-то организован с помощью средств редактора, в браузере все смежные пробелы и пустые строки объединяются в одиночные пробелы и строки. Однако существует один случай, когда сформатированный в редакторе текст может выводиться таким же образом в браузере.
Блок текста, окруженный блочным тегом <pre> ("preformatted" или "preserve"), выводится моноширинным (равномерным) шрифтом (monospace) точно в том же виде, как он был сформирован в редакторе. То есть, пробелы между символами и пустые строки, использованные для форматирования кода XHTML в редакторе, точно воспроизводятся в браузере, пробел за пробелом и строка за строкой. Тег <pre> часто применяется для создания простых таблиц, где выравнивание столбцов создается с помощью пробелов. Следующий код, например, создает таблицу, которая выводится в браузере подобно тому, как она была введена в редакторе.
Пример 26.18. Использование тега <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>
Так как все строки текста помещены внутри тега <pre>, таблицу можно сформировать в редакторе с помощью пробелов и пустых строк. Это выравнивание возможно, потому что редактор и браузер в данном случае выводят символы моноширинным шрифтом (т.е. шрифтом постоянной ширины), создавая равномерно распределенные символы. Необходимо проверить только, что редактор применяет моноширинный шрифт (например, Courier New), чтобы аккуратно распределить текст. Вывод браузера здесь не показан, так как он совпадает с организацией таблицы, создаваемой в редакторе.
К моноширинному тексту можно добавить небольшое форматирование, если оно не изменяет размера символов, меняя тем самым величину интервала между буквами. Следующий код, например, задает для предыдущей таблицы стили шрифта полужирный и курсив, а также цвет текста.
Проверьте только, что таблица выровнена требуемым образом, прежде чем добавлять дополнительные теги оформления, что визуально смещает выравнивание текста при просмотре в редакторе. Однако эти дополнительные теги внутри тега <pre> не добавляют в таблицу пробелы при просмотре в браузере.
Пример 26.19. Добавление оформления к тексту, форматированному тегом <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.10. Вывод в браузере таблицы с помощью тега <pre> с дополнительным оформлением
Хотя приведенные выше примеры показывают, как кодировать таблицы данных, в дальнейшем в учебнике описано использование тегов, созданных специально для формирования таблиц. Эти теги таблиц являются наиболее распространенным способом вывода строк и столбцов табличной информации, но можно использовать тег <pre> в качестве быстрого и простого способа создания аналогичного вывода.
Браузеры выводят черный текст на белом фоне, если не задаются другие настройки стиля цвета. Можно определять также цвет фона для страницы или для любого контейнера текста. Цвета текста и фона можно задавать в таблицах стилей с помощью шестнадцатеричных значений, значений RGB или имен цветов.
Шестнадцатеричные числа имеет в основании число 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 миллионов видов, хотя не все цвета могут правильно отображаться на мониторах всех компьютеров.
Спецификация цвета RGB использует десятичные значения для указания объединенной интенсивности красного, зеленого и синего оттенков. Значения могут изменяться от 0 (наименьшего) до 255 (наибольшего). Эти значения RGB задаются в таблицах стилей в следующем формате:
rgb(r,g,b)
с помощью десятичных значений для указания интенсивностей трех цветов. Таким образом, кодирование значения RGB как rgb(255,0,0) указывает красный цвет, rgb(0,255,0) указывает зеленый цвет, а rgb(0,0,255) указывает синий цвет. Как и в случае шестнадцатеричных значений, весь спектр более чем 16 миллионов цветов можно представить комбинацией интенсивностей красного, зеленого и синего цветов.
Цвета можно также определять с помощью специальных названий цветов. Большинство браузеров распознает более 200 названий цветов. Обычное множество из 16 цветов Windows представлено ниже с названиями цветов и их соответствующими шестнадцатеричными значениями и значениями RGB.
Название HEX Значение цвета значение RGB
Рис. 4.11. Названия цветов Windows и значения Hex и RGB
Можно задавать цвет текста на странице или цвет фона контейнера, содержащего текст. Два эти свойства стиля показаны в следующей таблице.
|
Таблица 4.5. Свойства стиля цвета | |
|
Свойство |
Значение |
|
color |
#rrggbb rgb(r,g,b) названиецвета |
|
background-color |
#rrggbb rgb(r,g,b) название цвета |
Цвета могут задаваться в диапазоне от всей страницы, связывая стиль цвета с тегом <body>, и до одного текстового символа, связывая стиль цвета с тегом <span>, окружающим символ. Для определения свойств цветов можно использовать шестнадцатеричные значения, RGB и названия цветов в любой комбинации.
Различные комбинации цветов фона и текста показаны в следующем коде. Вывод браузером этой страницы показан на рисунке 4.12 .
Пример 26.20. Код задания на странице свойств цвета текста
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdc>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title> Цветная страница </title>
<style type="text/css">
body {color:white; background-color:silver}
.PARAstyle {color:rgb(0,0,0)}
.PHRASEstyle {color:#0000FF}
.TEXTstyle {color:green; background-color:yellow}
</style>
</head>
<body>
<p>Эта страница содержит три параграфа. Вся страница оформляется серым
цветом фона, а цвет текста будет белым. Первый параграф использует эти
значения цветов страницы по умолчанию.</p>
<p> class="PARAstyle">
Второй параграф задает свой собственный цвет текста как черный с помощью
значения RGB. В этом параграфе <span class="PHRASEstyle">данная
строка
текста сделана синей, а фраза <span
class="TEXTstyle"><b>зеленый на
желтом</b></span> имеет свои собственные настройки стиля
цвета.</span></p>
<p>Третий параграф возвращается к используемым по умолчанию настройкам
цвета для страницы.</p>
</body>
</html>
Рис. 4.12. Изменение свойств цвета текста
Вся страница имеет серый фон с белыми буквами, что задается настройкой стиля для селектора body. Определены три класса стиля для приложения ко второму параграфу, чтобы переопределить эти настройки страницы. Класс PARAstyle применяется к параграфу, чтобы сделать его текст черным [rgb(0,0,0)]; класс PHRASEstyle применяется к части параграфа, чтобы изменить цвет текста с черного на синий [#0000FF]; класс TEXTstyle применяется к подстроке текста, чтобы вывести зеленые буквы на желтом фоне.
Конечно, скорее всего, такое количество цветов на одной странице вряд ли будет использоваться, так как чрезмерное использование цветов может отвлекать от информационного содержания страницы; однако этот пример дает общее представление о том, как гибко можно применять цвета фона и текста для элементов страницы.
Существуют определенные символы текста, которые невозможно вывести в браузере, если ввести их непосредственно в текстовом редакторе. Некоторые из этих символов имеют специальное значение в XHTML, и, вместо их вывода, браузер будет интерпретировать эти символы как код XHTML. Например, символы "<" (меньше) и ">" (больше) используются для определения тегов. Поэтому нельзя вводить эти символы непосредственно как часть контента страницы Web, так как они будут интерпретироваться как теги XHTML, а не выводиться как символы "меньше" и "больше"".
Другие символы, такие, как © (copyright) и ™ (trademark), не имеют эквивалента на клавиатуре. Тем не менее, требуется способ представления их на странице Web. Далее, браузеры всегда объединяют последовательности символов пробелов в один пробел, независимо от количества введенных в текстовом редакторе пробелов. Однако, иногда может понадобиться оставить более одного пробела между буквами и словами.
XHTML содержит набор имен специальных символов и кодов, которые выводят соответствующие символы в браузере. Эти символы записываются с префиксом в виде амперсанда (&) и заканчиваются точкой с запятой (;) , чтобы идентифицировать их как специальные символы. Для представления этих символов в документе XHTML можно использовать числовой код или название символа (если такое имеется).
|
Таблица 4.6. Специальные символы - названия и коды | |||
|
Выводимый символ |
Название |
Код |
Описание |
|
" |
" |
" |
двойная кавычка |
|
& |
& |
& |
амперсанд |
|
' |
' |
апостроф | |
|
< |
< |
< |
меньше |
|
> |
> |
> |
больше |
|
™ |
™ |
™ |
торговая марка |
|
|
  |
неразрывный пробел | |
|
_ |
¢ |
¢ |
центы |
|
¦ |
¦ |
¦ |
разорванная вертикальная черта |
|
§ |
§ |
§ |
параграф, раздел |
|
© |
© |
© |
авторское право |
|
« |
« |
« |
левая угловая кавычка |
|
» |
» |
» |
правая угловая кавычка |
|
¬ |
¬ |
¬ |
знак отрицания |
|
® |
® |
® |
зарегистрированная торговая марка |
|
° |
° |
° |
градус |
|
± |
± |
± |
плюс/минус |
|
¶ |
¶ |
¶ |
параграф, абзац |
|
· |
· |
· |
точка посредине |
|
• |
• |
• |
маркер, буллит |
|
_ |
¼ |
¼ |
дробь одна четвертая |
|
_ |
½ |
½ |
дробь одна вторая |
|
_ |
¾ |
¾ |
дробь три четвертых |
|
_ |
÷ |
÷ |
деление |
|
_ |
× |
× |
умножение |
|
_ |
ø |
ø |
маленькое перечеркнутое о |
|
_ |
Ø |
Ø |
большое перечеркнутое О |
|
- |
– |
короткое тире | |
|
- |
— |
длинное тире | |
В качестве примера применения этих специальных символов следующий код оставляет по пять пробелов между словами, используя между ними символы неразрывного пробела ( ) и маркера (•).
Пример 26.21. Использование специальных символов для вывода страницы Web
МЕЖДУ • ЭТИМИ
•
СЛОВАМИ • ЗАДАНО •
ПО • ПЯТЬ •
ПРОБЕЛОВ.
Пример 26.22. Вывод браузером фиксированных пробелов и маркеров
МЕЖДУ · ЭТИМИ · СЛОВАМИ · ЗАДАНО · ПО · ПЯТЬ · ПРОБЕЛОВ.
Если необходимо выводить теги XHTML как часть текста на странице Web, то нельзя просто ввести символы "<" и ">". Эти символы воспринимаются браузером как вложенные теги XHTML и будут соответственно интерпретироваться. Вместо этого необходимо использовать для вывода этих символов специальные символы XHTML "<" и ">".
Предположим, что на странице Web нужно вывести следующий код XHTML.
Пример 26.23. Вывод в браузере кода XHTML
<p>Это параграф, в котором слово <span
class="red">RED</span>
выводится красным цветом, помещенное внутри тега <span>, к которому
применяется класс стиля.</p>
Этот код необходимо ввести в текстовом редакторе, используя специальные символы вместо символов < и >.
Пример 26.24. Код для вывода тегов XHTML в браузере без интерпретации
<pre style="font-size:9pt">
<p>Это параграф, в котором слово <span
class="red">
RED</span> выводится красным цветом, помещенное внутри тега
<span>
, который использует класс стиля.</p>
</pre>
Необходимо отметить, что для кодов специальных символов могут применяться стили, так же, как и для других алфавитно-цифровых символов. Например, следующее уравнение выводится полужирным шрифтом Courier New размером 24 пункта.
Пример 26.25. Применение стилей для кодов символов
<style type="text/css">
.equation {font-family:courier new; font-size:24pt; font-weight:bold}
</style>
<p class="equation">¼ + ½ =
¾</p>
Рис. 4.13. Коды символов с заданным стилем