Когда текст изображается в браузере, он выводится используемым по умолчанию типом, размером, стилем и цветом шрифта. Большинство браузеров используют тип шрифта 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.
| Свойство | Значение |
|---|---|
font-family |
Может быть именем любого serif, sans-serif, font-family:arial,verdana,sans-serif. |
font-size |
Размер шрифта, определяемый обычно в пунктах ( pt ). Если единицы измерения не заданы, используются пиксели ( px ) |
font-style |
Стиль шрифта определяется как normal, italic, |
font-weight |
Насыщенность шрифта определяется как lighter, normal, bold, bolder
или значением от 100 (самый светлый) до 900 (самый насыщенный). Не все числовые значения в диапазоне распознаются браузерами. |
|
Вариант шрифта определяется как normal small-caps |
font |
Сокращенный способ определения множества стилей шрифта с помощью задания в font-style, .
Если значения не задаются, они могут отсутствовать в списке: style="font:italic bold 10pt times new roman" |
Любые комбинации этих стилей можно применять для любого текста на странице. Они могут быть связаны с тегом <body> для использования в документе в целом. Их можно кодировать для селектора p для применения ко всем параграфам. Они могут кодироваться как классы и работать с помощью тегов <span>, окружающих буквы, слова, фразы, предложения или другие выбранные строки текста в параграфе. Их можно применять как классы с помощью тегов <div> для блоков текста.
Свойство font-family задействуют для изменения настройки браузера по умолчанию, т.е. изменения шрифта Times New Roman. При использовании для вывода специальных стилей шрифта необычного font-family задает эти варианты в разделенном запятыми списке. Браузер ищет в компьютере первый подходящий вид шрифта и применяет его для вывода текста. Например, следующая таблица стилей задает стандартный стиль шрифта для страницы.
<style type="text/css">
body {font-family:helvetica, verdana, sans-serif}
</style>
Сначала браузер пытается использовать шрифт Verdana. Если он также отсутствует, то браузер применяет любой доступный встроенный тип шрифта sans-serif. Обобщенные имена шрифтов serif, sans-serif, и Times New Roman, Arial, и Courier, соответственно.
Необходимо также задать свойство font-size, чтобы изменить применяемый браузером по умолчанию размер в 12 пунктов. Обычно размер шрифта задается в пунктах; однако можно использовать пиксели для задания высоты букв для специального оформления.
Свойство font-style обычно определяет выбор между стилем normal и italic ; italic. По умолчанию браузер использует стиль normal.
Свойство font-weight обычно применяется для выбора между нормальным ( normal ) и полужирным ( bold ) шрифтом. Значения для более светлого и более насыщенного шрифтов, как правило, в браузере не различаются, как не различаются и все числовые значения. Значения между 100 и 500 задают обычную (normal) насыщенность, а значения между 600 и 900 определяют полужирные символы ( bold ).
Стиль small-caps переводит все буквы в верхний регистр со слегка меньшим размером шрифта. Определение normal возвращает вывод текста к стандартному виду.
Объявления стиля шрифта могут использовать настройки отдельных свойств, или значения могут объединяться в одном свойстве font как сокращенном способе представления объявлений. То есть, набор объявлений таблицы стилей можно задать, как показано на листинге 4.2.
{font-family:arial;
font-variant:small-caps;
font-size:10pt;
font-weight:bold;
font-style:italic}
или как показано на листинге 4.3,
{font:italic small-caps bold 10pt arial}
со значениями, разделенными пробелами. При использовании свойства font не требуется определять все значения, но они должны быть представлены в font-style . Типичное объявление может включать, например, только значения 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.2) Приложение стилей шрифтаОформление тега <body> задает формат по умолчанию для всей страницы. После этого применяются различные классы стилей для отдельных частей текста.
Приведенная выше страница включает <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.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>
В противоположность этому, тег <div> решает такие же задачи оформления, но, кроме того, создает перенос строки. Следующий код оформляет предыдущую строку текста с помощью тегов <div> и создает вывод, показанный на рисунке 4.4.
<div style="font-size:12pt">
Здесь
<div style="font-size:16pt">
показано
<div style="font-size:20pt">
вложение
<div style="font-size:24pt">
стиля
</div>
друг
</div>
в друга
</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. Значение цвета задается именем цвета или шестнадцатеричным значением. Эти способы будут рассмотрены в дальнейшем.
Предыдущие настройки шрифта могут объединяться с другими свойствами таблицы стилей, чтобы создать дополнительное форматирование строк текста. Следующая таблица перечисляет свойства, которые могут разнообразить вывод текста. Некоторые из этих свойств относятся к оформлению самого шрифта; другие относятся к структурной организации текста внутри контейнера.
| Свойство | Значение |
|---|---|
|
Задает горизонтальный интервал между буквами текста элемента. Значениями являются normal, npx, auto. |
line-height |
Задает высоту строки текста элемента. Значение в пикселях или пунктах является реальной высотой; число или процент является коэффициентом для текущего размера шрифта. normal, npx, npt, n, n%. |
text-align |
Задает горизонтальное выравнивание текста в элементе. Значениями являются left, center, right, justify. |
|
Задает дополнительное оформление текста внутри элемента. Значениями являются none, line-through, overline, underline. |
|
Задает отступ текста внутри элемента. Значениями являются npx n% |
|
Задает использование прописных и строчных букв в элементе. Значениями являются none, capitalize, lowercase, |
|
Задает вертикальное выравнивание содержимого элемента. Значениями являются bottom, top, baseline, middle, sub, super, text-bottom, text-top. |
word-spacing |
Задает величину интервала между словами в элементе. Значениями являются npx, normal. |
Мы уже знакомы со свойствами text-align и
Существует два свойства, которые управляют величиной горизонтального интервала в строке. Свойство word-spacing задает число пикселей между словами; свойство
Величина вертикального интервала в текстовом блоке задается свойством line-height. Хотя для измерения можно использовать пиксели или пункты, числовое значение лучше соответствует знакомым настройкам. Оно является коэффициентом текущего размера шрифта; поэтому объявление line-height:1.5 соответствует интервалу в полторы строки, а line-height:2 соответствует двойному интервалу. Отметим, что дробные значения являются допустимыми. Поэтому задание line-height:.8 сужает интервал между строками до 80% обычного межстрочного интервала.
Существует два свойства текста, которые лучше считать свойствами шрифта, так как они влияют на внешний вид символов. Свойство overline ), под символами ( underline ) или через символы ( line-through ). Свойство lowercase ) или делает первые буквы слов заглавными ( capitalize ).
Свойство super ) или нижние индексы ( sub ). Как свойство выравнивания текста оно позиционирует текст относительно его контейнера или относительно окружающего содержимого. Примеры этого свойства даются при обсуждении отдельных тегов или задач оформления.
Результаты действия некоторых свойств текста можно видеть ниже, как показано на рисунке 4.5. Вывод организован так, чтобы напоминать печатный отчет.
(рис 4.5) Использование оформления для создания отчетаБольшая часть оформления находится во встроенной таблице стилей, определяющей классы стиля, которые применяются тегами <span> и <div>. Линейные таблицы стилей используются в одном определенном разделе страницы для одноразовых стилей, которые не применяются в других разделах документа. Используемый по умолчанию формат страницы задается селектором тега <body>: полуторный ( 1 1/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 {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 (Сенсорный Чувственно воспринимающий), NT
(Интуитивный Мыслитель) и 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>.
Практический 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> создает также перенос строки, чтобы отделить свое содержимое от окружающего текста.
<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>. Обратите внимание на код, создающий разделительную линию для сноски внизу предыдущего отчета.
<div><span class="line">_________________</span></div>
Если этот тег <span> будет закодирован не внутри своего контейнерного тега <div>, то он не пройдет проверку (валидацию) XHTML 1.1, хотя и может выводиться браузером правильно.
При использовании размеров в пикселях часто необходимо использовать отрицательные значения, чтобы добиться желательного результата. Параграф, показанный на рисунке 4.6, применяет отступ первой строки текста в -20px, чтобы создать "выступающий" формат параграфа, часто используемый в отчетах для библиографических записей.
(рис 4.6) Использование оформления текста для создания библиографических записейКак показано на листинге 4.11, оформление задается окружающим тегом <div>, который использует класс стиля .biblio для своих параграфов. Левое поле для всех параграфов задается равным 20px. Такая настройка смещает весь параграф, так что задание смещения в -20px смещает первую строку влево до
<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>
Вспомните, что свойства word-spacing могут принимать как положительные, так и отрицательные значения. Строки на рисунке 4.10 заданы с различными значениями промежутков между буквами и словами для демонстрации результатов.
(рис 4.7) Положительные и отрицательные интервалы между буквами и словами
Символы текста могут использовать такие стили, как bold (полужирный), italic (курсив),
Теги физических стилей являются линейными контейнерными тегами, обрамляющими строки символов, которые будут выводиться указанным стилем. Эти теги -общие для всех браузеров и выводятся одинаково во всех браузерах. Теги физических стилей показаны в таблице 4.3.
| Тег физического стиля | Эквивалент в таблице стилей |
|---|---|
<big>big</big> |
font-size:18px |
<b>bold</b> |
font-weight:bold |
<i>italic</i> |
font-style:italic |
<small>small</small> |
font-size:12px |
<tt> |
font-family:courier new |
<sub> |
|
<sup> |
|
<s> (исключен) |
|
<u> (исключен) |
|
Как показано в приведенной выше таблице, обрамление текстовой строки тегами <b>...</b>, например, преобразует текст в полужирные символы точно того же стиля, что и задание свойства font-weight:bold. Будут ли использоваться эти теги физических стилей или свойства стилей CSS, является вопросом личного предпочтения. Отметим, что теги
Эти теги могут иметь также связанные с ними свойства стиля. Например, объявление в таблице стилей b {color:red} связывает color с селектором b. Поэтому любой текст, задаваемый полужирным с помощью тега <b>, будет также выводиться красным цветом.
Теги логических стилей не имеют стандартных значений во всех браузерах, и XHTML точно не определяет, как они должны выводиться. Однако они применяются более широко, чем теги физических стилей, делая возможным как визуальное, так и невизуальное представление стилей.
Для людей с ослабленным зрением, например, тег физического стиля <b> может быть бессмысленным, так как он выводит текст визуально полужирными символами. Однако при использовании визуально сопоставимого тега логического стиля <strong> человек с помощью специальной программы воспроизведения слышит текст с выделением громкостью звука.
Следующая таблица содержит теги логических стилей. Их вывод может несущественно отличаться от применяемого по умолчанию стиля в браузере. Некоторые браузеры могут поддерживать не все стили.
| Тег логического стиля | Назначение |
|---|---|
< |
Указывает сокращение |
< |
Указывает |
<cite>citation</cite> |
Содержит цитату или ссылку на другие источники |
<code>code</code> |
Указывает фрагмент кода программы |
<dfn>definition</dfn> |
Указывает, что это пример определения термина |
<em> |
Указывает на выделение |
<strong>strong</strong> |
Указывает на более сильное выделение |
<kbd>keyboard</kbd> |
Указывает текст, вводимый пользователем |
< |
Определяет пример вывода программы, сценария и т.д. |
<var>variable</var> |
Указывает экземпляр переменной или аргумента программы |
Теги логических стилей созданы для ситуаций, в которых визуальное представление текста в браузере необходимо расширить другим специальным представлением или информационным контентом. Для вывода в стандартном браузере, однако, можно ограничиться тегами физических стилей или их эквивалентами CSS.
Вспомните, что теги заголовков < окаймляют строки текста для вывода одним из шести стилей заголовков. Число n в теге изменяется от 1 (самый крупный) до 6 (наименьший). Заголовки выводятся полужирными символами используемого по умолчанию типа шрифта. Конечно, для изменения настроек тега заголовка можно применить таблицу стилей. Например, объявление стиля
<style type="text/css">
h2 {font-family:arial; font-style:italic}
</style>
выводит заголовок размером 2, наклонным типом шрифта Arial, переопределяя обычный вывод заголовка шрифтом Times New Roman. Другие стили могут использоваться в теге для вывода заголовка с дополнительными характеристиками оформления.
Таким же образом, как физические и логические теги шрифтов можно реализовать с помощью таблиц стилей, можно создавать заголовки с помощью таблиц стилей вместо использования специальных тегов <. Следующая таблица стилей объявляет классы стилей, идентичные шести типам заголовков. Это кодирование выводится в браузере, как показано на рисунке 4.8.
<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) Вывод в браузере заголовков, созданных с помощью объявлений стилейТаким образом, существует несколько возможных вариантов оформления заголовков. Можно использовать теги < с настройками по умолчанию, использовать эти теги с измененным оформлением или вообще отказаться от тегов и создать свои собственные классы заголовков. Ни один из вариантов не является лучшим решением во всех случаях.
Заголовки различного уровня на странице Web должны обладать общим оформлением, так как являются визуальными ключами своей общей функции разделителей разделов содержимого страницы. Часто заголовки используют один тип шрифта и цвет, различаясь размером и выравниванием. Использование тегов < облегчает управление стилями заголовков во встроенных таблицах стилей с помощью групповых селекторов.
Групповой селектор - это два или несколько селекторов тегов, разделенных запятыми, которые обладают одинаковым стилем оформления. Например, следующая таблица стилей объявляет общий тип шрифта и цвет для набора тегов <, создавая общий визуальный стиль для всех используемых на странице заголовков.
<style type="text/css">
h1, h2, h3 {font-family:verdana; color:goldenrod}
</style>
Селектор h1, h2, h3 является групповым селектором, поэтому связанные с ним объявления стилей применяются ко всем тегам в этом списке. Предположим далее, что заголовки <h1> располагаются по центру, заголовки <h2> и <h3> выровнены по левому полю и заголовки <h3> выводятся курсивом. Эти дополнительные групповые и индивидуальные оформления можно добавить в приведенную выше таблицу стилей, чтобы создать результат, показанный на рисунке 4.9.
<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> на странице применяют один и тот же тип шрифта и размер.
<style type="text/css">
p, span, div {font-family:verdana; font-size:10pt}
</style>
Обычно браузер никак не форматирует текст, если текст не окружен тегами XHTML. Хотя в текстовом редакторе код мог быть как-то организован с помощью средств редактора, в браузере все смежные пробелы и пустые строки объединяются в одиночные пробелы и строки. Однако существует один случай, когда сформатированный в редакторе текст может выводиться таким же образом в браузере.
Блок текста, окруженный блочным тегом <pre> ("preformatted" или "<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> не добавляют в таблицу пробелы при просмотре в браузере.
<pre style="color:blue">
<b>Таблица 1</b>
<b>Продажи по регионам</b>
----------------------------------------------
<b>Регион/Год 2000 2001 2002 2003</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
Можно задавать цвет текста на странице или цвет фона контейнера, содержащего текст. Два эти свойства стиля показаны в следующей таблице.
| Свойство | Значение |
|---|---|
color |
#rrggbb rgb(r,g,b) название цвета |
background-color |
#rrggbb rgb(r,g,b) название цвета |
Цвета могут задаваться в диапазоне от всей страницы, связывая стиль цвета с тегом <body>, и до одного текстового символа, связывая стиль цвета с тегом <span>, окружающим символ. Для определения свойств цветов можно использовать шестнадцатеричные значения, RGB и названия цветов в любой комбинации.
Различные комбинации цветов фона и текста показаны в следующем коде. Вывод браузером этой страницы показан на рисунке 4.12.
<?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$$ (copyright) и $$\text{\texttrademark}$$ (trademark), не имеют эквивалента на клавиатуре. Тем не менее, требуется способ представления их на странице Web. Далее, браузеры всегда объединяют последовательности символов пробелов в один пробел, независимо от количества введенных в текстовом редакторе пробелов. Однако, иногда может понадобиться оставить более одного пробела между буквами и словами.
XHTML содержит набор имен специальных символов и кодов, которые выводят соответствующие символы в браузере. Эти символы записываются с префиксом в виде амперсанда ( ) и заканчиваются точкой с запятой ( ; ) , чтобы идентифицировать их как специальные символы. Для представления этих символов в документе XHTML можно использовать числовой код или название символа (если такое имеется).
| Выводимый символ | Название | Код | Описание |
|---|---|---|---|
" |
quot; |
#34; |
двойная кавычка |
|
amp; |
#38; |
амперсанд |
| $$\textquotesingle$$ | #39; |
апостроф | |
< |
lt; |
#60; |
меньше |
> |
gt; |
#62; |
больше |
| $$\text{\texttrademark}$$ | |
#153; |
торговая марка |
nbsp; |
#160; |
неразрывный пробел | |
| $$\text{\textcent}$$ | cent; |
#162; |
|
| $$\text{\textbrokenbar}$$ | brvbar; |
#166; |
разорванная вертикальная черта |
| $$\S$$ | sect; |
#167; |
параграф, раздел |
| $$\copyright$$ | copy; |
#169; |
авторское право |
" |
laquo; |
#171; |
левая угловая кавычка |
" |
raquo; |
#187; |
правая угловая кавычка |
| $$\neg$$ | not; |
#172; |
знак отрицания |
| $$\text{\textregistered}$$ | reg; |
#174; |
зарегистрированная торговая марка |
| $$\deg$$ | deg; |
#176; |
градус |
| $$\pm$$ | plusmn; |
#177; |
плюс/минус |
| $$\P$$ | |
#182; |
параграф, абзац |
x |
middot; |
#183; |
точка посредине |
| $$ullet$$ | bull; |
#149; |
маркер, буллит |
| $$\frac14$$ | frac14; |
#188; |
дробь одна четвертая |
| $$\frac12$$ | frac12; |
#189; |
дробь одна вторая |
| $$\frac{3}{4}$$ | frac34; |
#190; |
дробь три четвертых |
| $$\div$$ | |
#247; |
деление |
x |
times; |
#215; |
умножение |
' |
oslash; |
#248; |
маленькое перечеркнутое о |
| $$\varnothing$$ | Oslash; |
#216; |
большое перечеркнутое О |
- |
ndash; |
#150; |
короткое тире |
- |
mdash; |
#151; |
длинное тире |
В качестве примера применения этих специальных символов следующий код оставляет по пять пробелов между словами, используя между ними символы неразрывного пробела ( nbsp; ) и маркера ( bull; ).
МЕЖДУnbsp;nbsp;bull;nbsp;nbsp;ЭТИМИnbsp;nbsp;bull;nbsp;nbsp; СЛОВАМИ • ЗАДАНО • ПОnbsp;nbsp;bull;nbsp;nbsp;ПЯТЬnbsp;nbsp;bull;nbsp;nbsp; ПРОБЕЛОВ.
МЕЖДУ x ЭТИМИ x СЛОВАМИ x ЗАДАНО x ПО x ПЯТЬ x ПРОБЕЛОВ.
Если необходимо выводить теги XHTML как часть текста на странице Web, то нельзя просто ввести символы "<" и ">". Эти символы воспринимаются браузером как вложенные теги XHTML и будут соответственно интерпретироваться. Вместо этого необходимо использовать для вывода этих символов специальные символы XHTML "lt;" и "gt;".
Предположим, что на странице Web нужно вывести следующий код XHTML.
<p>Это параграф, в котором слово <span class="red">RED</span>
выводится красным цветом, помещенное внутри тега <span>, к которому
применяется класс стиля.</p>
Этот код необходимо ввести в текстовом редакторе, используя специальные символы вместо символов < и >.
<pre style="font-size:9pt"> lt;pgt;Это параграф, в котором слово lt;span class="red"gt; REDlt;/spangt; выводится красным цветом, помещенное внутри тега lt;spangt; , который использует класс стиля.lt;/pgt; </pre>
Необходимо отметить, что для кодов специальных символов могут применяться стили, так же, как и для других алфавитно-цифровых символов. Например, следующее уравнение выводится полужирным шрифтом Courier New размером 24 пункта.
<style type="text/css">
.equation {font-family:courier new; font-size:24pt; font-weight:bold}
</style>
<p class="equation">frac14; + frac12; = frac34;</p>
(рис 4.13) Коды символов с заданным стилем
Когда текст изображается в браузере, он выводится используемым по умолчанию типом, размером, стилем и цветом шрифта. Большинство браузеров используют тип шрифта 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.
| Свойство | Значение |
|---|---|
font-family |
Может быть именем любого serif, sans-serif, font-family:arial,verdana,sans-serif. |
font-size |
Размер шрифта, определяемый обычно в пунктах ( pt ). Если единицы измерения не заданы, используются пиксели ( px ) |
font-style |
Стиль шрифта определяется как normal, italic, |
font-weight |
Насыщенность шрифта определяется как lighter, normal, bold, bolder
или значением от 100 (самый светлый) до 900 (самый насыщенный). Не все числовые значения в диапазоне распознаются браузерами. |
|
Вариант шрифта определяется как normal small-caps |
font |
Сокращенный способ определения множества стилей шрифта с помощью задания в font-style, .
Если значения не задаются, они могут отсутствовать в списке: style="font:italic bold 10pt times new roman" |
Любые комбинации этих стилей можно применять для любого текста на странице. Они могут быть связаны с тегом <body> для использования в документе в целом. Их можно кодировать для селектора p для применения ко всем параграфам. Они могут кодироваться как классы и работать с помощью тегов <span>, окружающих буквы, слова, фразы, предложения или другие выбранные строки текста в параграфе. Их можно применять как классы с помощью тегов <div> для блоков текста.
Свойство font-family задействуют для изменения настройки браузера по умолчанию, т.е. изменения шрифта Times New Roman. При использовании для вывода специальных стилей шрифта необычного font-family задает эти варианты в разделенном запятыми списке. Браузер ищет в компьютере первый подходящий вид шрифта и применяет его для вывода текста. Например, следующая таблица стилей задает стандартный стиль шрифта для страницы.
<style type="text/css">
body {font-family:helvetica, verdana, sans-serif}
</style>
Сначала браузер пытается использовать шрифт Verdana. Если он также отсутствует, то браузер применяет любой доступный встроенный тип шрифта sans-serif. Обобщенные имена шрифтов serif, sans-serif, и Times New Roman, Arial, и Courier, соответственно.
Необходимо также задать свойство font-size, чтобы изменить применяемый браузером по умолчанию размер в 12 пунктов. Обычно размер шрифта задается в пунктах; однако можно использовать пиксели для задания высоты букв для специального оформления.
Свойство font-style обычно определяет выбор между стилем normal и italic ; italic. По умолчанию браузер использует стиль normal.
Свойство font-weight обычно применяется для выбора между нормальным ( normal ) и полужирным ( bold ) шрифтом. Значения для более светлого и более насыщенного шрифтов, как правило, в браузере не различаются, как не различаются и все числовые значения. Значения между 100 и 500 задают обычную (normal) насыщенность, а значения между 600 и 900 определяют полужирные символы ( bold ).
Стиль small-caps переводит все буквы в верхний регистр со слегка меньшим размером шрифта. Определение normal возвращает вывод текста к стандартному виду.
Объявления стиля шрифта могут использовать настройки отдельных свойств, или значения могут объединяться в одном свойстве font как сокращенном способе представления объявлений. То есть, набор объявлений таблицы стилей можно задать, как показано на листинге 4.2.
{font-family:arial;
font-variant:small-caps;
font-size:10pt;
font-weight:bold;
font-style:italic}
или как показано на листинге 4.3,
{font:italic small-caps bold 10pt arial}
со значениями, разделенными пробелами. При использовании свойства font не требуется определять все значения, но они должны быть представлены в font-style . Типичное объявление может включать, например, только значения 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.2) Приложение стилей шрифтаОформление тега <body> задает формат по умолчанию для всей страницы. После этого применяются различные классы стилей для отдельных частей текста.
Приведенная выше страница включает <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.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>
В противоположность этому, тег <div> решает такие же задачи оформления, но, кроме того, создает перенос строки. Следующий код оформляет предыдущую строку текста с помощью тегов <div> и создает вывод, показанный на рисунке 4.4.
<div style="font-size:12pt">
Здесь
<div style="font-size:16pt">
показано
<div style="font-size:20pt">
вложение
<div style="font-size:24pt">
стиля
</div>
друг
</div>
в друга
</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. Значение цвета задается именем цвета или шестнадцатеричным значением. Эти способы будут рассмотрены в дальнейшем.
Предыдущие настройки шрифта могут объединяться с другими свойствами таблицы стилей, чтобы создать дополнительное форматирование строк текста. Следующая таблица перечисляет свойства, которые могут разнообразить вывод текста. Некоторые из этих свойств относятся к оформлению самого шрифта; другие относятся к структурной организации текста внутри контейнера.
| Свойство | Значение |
|---|---|
|
Задает горизонтальный интервал между буквами текста элемента. Значениями являются normal, npx, auto. |
line-height |
Задает высоту строки текста элемента. Значение в пикселях или пунктах является реальной высотой; число или процент является коэффициентом для текущего размера шрифта. normal, npx, npt, n, n%. |
text-align |
Задает горизонтальное выравнивание текста в элементе. Значениями являются left, center, right, justify. |
|
Задает дополнительное оформление текста внутри элемента. Значениями являются none, line-through, overline, underline. |
|
Задает отступ текста внутри элемента. Значениями являются npx n% |
|
Задает использование прописных и строчных букв в элементе. Значениями являются none, capitalize, lowercase, |
|
Задает вертикальное выравнивание содержимого элемента. Значениями являются bottom, top, baseline, middle, sub, super, text-bottom, text-top. |
word-spacing |
Задает величину интервала между словами в элементе. Значениями являются npx, normal. |
Мы уже знакомы со свойствами text-align и
Существует два свойства, которые управляют величиной горизонтального интервала в строке. Свойство word-spacing задает число пикселей между словами; свойство
Величина вертикального интервала в текстовом блоке задается свойством line-height. Хотя для измерения можно использовать пиксели или пункты, числовое значение лучше соответствует знакомым настройкам. Оно является коэффициентом текущего размера шрифта; поэтому объявление line-height:1.5 соответствует интервалу в полторы строки, а line-height:2 соответствует двойному интервалу. Отметим, что дробные значения являются допустимыми. Поэтому задание line-height:.8 сужает интервал между строками до 80% обычного межстрочного интервала.
Существует два свойства текста, которые лучше считать свойствами шрифта, так как они влияют на внешний вид символов. Свойство overline ), под символами ( underline ) или через символы ( line-through ). Свойство lowercase ) или делает первые буквы слов заглавными ( capitalize ).
Свойство super ) или нижние индексы ( sub ). Как свойство выравнивания текста оно позиционирует текст относительно его контейнера или относительно окружающего содержимого. Примеры этого свойства даются при обсуждении отдельных тегов или задач оформления.
Результаты действия некоторых свойств текста можно видеть ниже, как показано на рисунке 4.5. Вывод организован так, чтобы напоминать печатный отчет.
(рис 4.5) Использование оформления для создания отчетаБольшая часть оформления находится во встроенной таблице стилей, определяющей классы стиля, которые применяются тегами <span> и <div>. Линейные таблицы стилей используются в одном определенном разделе страницы для одноразовых стилей, которые не применяются в других разделах документа. Используемый по умолчанию формат страницы задается селектором тега <body>: полуторный ( 1 1/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 {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 (Сенсорный Чувственно воспринимающий), NT
(Интуитивный Мыслитель) и 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>.
Практический 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> создает также перенос строки, чтобы отделить свое содержимое от окружающего текста.
<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>. Обратите внимание на код, создающий разделительную линию для сноски внизу предыдущего отчета.
<div><span class="line">_________________</span></div>
Если этот тег <span> будет закодирован не внутри своего контейнерного тега <div>, то он не пройдет проверку (валидацию) XHTML 1.1, хотя и может выводиться браузером правильно.
При использовании размеров в пикселях часто необходимо использовать отрицательные значения, чтобы добиться желательного результата. Параграф, показанный на рисунке 4.6, применяет отступ первой строки текста в -20px, чтобы создать "выступающий" формат параграфа, часто используемый в отчетах для библиографических записей.
(рис 4.6) Использование оформления текста для создания библиографических записейКак показано на листинге 4.11, оформление задается окружающим тегом <div>, который использует класс стиля .biblio для своих параграфов. Левое поле для всех параграфов задается равным 20px. Такая настройка смещает весь параграф, так что задание смещения в -20px смещает первую строку влево до
<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>
Вспомните, что свойства word-spacing могут принимать как положительные, так и отрицательные значения. Строки на рисунке 4.10 заданы с различными значениями промежутков между буквами и словами для демонстрации результатов.
(рис 4.7) Положительные и отрицательные интервалы между буквами и словами
Символы текста могут использовать такие стили, как bold (полужирный), italic (курсив),
Теги физических стилей являются линейными контейнерными тегами, обрамляющими строки символов, которые будут выводиться указанным стилем. Эти теги -общие для всех браузеров и выводятся одинаково во всех браузерах. Теги физических стилей показаны в таблице 4.3.
| Тег физического стиля | Эквивалент в таблице стилей |
|---|---|
<big>big</big> |
font-size:18px |
<b>bold</b> |
font-weight:bold |
<i>italic</i> |
font-style:italic |
<small>small</small> |
font-size:12px |
<tt> |
font-family:courier new |
<sub> |
|
<sup> |
|
<s> (исключен) |
|
<u> (исключен) |
|
Как показано в приведенной выше таблице, обрамление текстовой строки тегами <b>...</b>, например, преобразует текст в полужирные символы точно того же стиля, что и задание свойства font-weight:bold. Будут ли использоваться эти теги физических стилей или свойства стилей CSS, является вопросом личного предпочтения. Отметим, что теги
Эти теги могут иметь также связанные с ними свойства стиля. Например, объявление в таблице стилей b {color:red} связывает color с селектором b. Поэтому любой текст, задаваемый полужирным с помощью тега <b>, будет также выводиться красным цветом.
Теги логических стилей не имеют стандартных значений во всех браузерах, и XHTML точно не определяет, как они должны выводиться. Однако они применяются более широко, чем теги физических стилей, делая возможным как визуальное, так и невизуальное представление стилей.
Для людей с ослабленным зрением, например, тег физического стиля <b> может быть бессмысленным, так как он выводит текст визуально полужирными символами. Однако при использовании визуально сопоставимого тега логического стиля <strong> человек с помощью специальной программы воспроизведения слышит текст с выделением громкостью звука.
Следующая таблица содержит теги логических стилей. Их вывод может несущественно отличаться от применяемого по умолчанию стиля в браузере. Некоторые браузеры могут поддерживать не все стили.
| Тег логического стиля | Назначение |
|---|---|
< |
Указывает сокращение |
< |
Указывает |
<cite>citation</cite> |
Содержит цитату или ссылку на другие источники |
<code>code</code> |
Указывает фрагмент кода программы |
<dfn>definition</dfn> |
Указывает, что это пример определения термина |
<em> |
Указывает на выделение |
<strong>strong</strong> |
Указывает на более сильное выделение |
<kbd>keyboard</kbd> |
Указывает текст, вводимый пользователем |
< |
Определяет пример вывода программы, сценария и т.д. |
<var>variable</var> |
Указывает экземпляр переменной или аргумента программы |
Теги логических стилей созданы для ситуаций, в которых визуальное представление текста в браузере необходимо расширить другим специальным представлением или информационным контентом. Для вывода в стандартном браузере, однако, можно ограничиться тегами физических стилей или их эквивалентами CSS.
Вспомните, что теги заголовков < окаймляют строки текста для вывода одним из шести стилей заголовков. Число n в теге изменяется от 1 (самый крупный) до 6 (наименьший). Заголовки выводятся полужирными символами используемого по умолчанию типа шрифта. Конечно, для изменения настроек тега заголовка можно применить таблицу стилей. Например, объявление стиля
<style type="text/css">
h2 {font-family:arial; font-style:italic}
</style>
выводит заголовок размером 2, наклонным типом шрифта Arial, переопределяя обычный вывод заголовка шрифтом Times New Roman. Другие стили могут использоваться в теге для вывода заголовка с дополнительными характеристиками оформления.
Таким же образом, как физические и логические теги шрифтов можно реализовать с помощью таблиц стилей, можно создавать заголовки с помощью таблиц стилей вместо использования специальных тегов <. Следующая таблица стилей объявляет классы стилей, идентичные шести типам заголовков. Это кодирование выводится в браузере, как показано на рисунке 4.8.
<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) Вывод в браузере заголовков, созданных с помощью объявлений стилейТаким образом, существует несколько возможных вариантов оформления заголовков. Можно использовать теги < с настройками по умолчанию, использовать эти теги с измененным оформлением или вообще отказаться от тегов и создать свои собственные классы заголовков. Ни один из вариантов не является лучшим решением во всех случаях.
Заголовки различного уровня на странице Web должны обладать общим оформлением, так как являются визуальными ключами своей общей функции разделителей разделов содержимого страницы. Часто заголовки используют один тип шрифта и цвет, различаясь размером и выравниванием. Использование тегов < облегчает управление стилями заголовков во встроенных таблицах стилей с помощью групповых селекторов.
Групповой селектор - это два или несколько селекторов тегов, разделенных запятыми, которые обладают одинаковым стилем оформления. Например, следующая таблица стилей объявляет общий тип шрифта и цвет для набора тегов <, создавая общий визуальный стиль для всех используемых на странице заголовков.
<style type="text/css">
h1, h2, h3 {font-family:verdana; color:goldenrod}
</style>
Селектор h1, h2, h3 является групповым селектором, поэтому связанные с ним объявления стилей применяются ко всем тегам в этом списке. Предположим далее, что заголовки <h1> располагаются по центру, заголовки <h2> и <h3> выровнены по левому полю и заголовки <h3> выводятся курсивом. Эти дополнительные групповые и индивидуальные оформления можно добавить в приведенную выше таблицу стилей, чтобы создать результат, показанный на рисунке 4.9.
<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> на странице применяют один и тот же тип шрифта и размер.
<style type="text/css">
p, span, div {font-family:verdana; font-size:10pt}
</style>
Обычно браузер никак не форматирует текст, если текст не окружен тегами XHTML. Хотя в текстовом редакторе код мог быть как-то организован с помощью средств редактора, в браузере все смежные пробелы и пустые строки объединяются в одиночные пробелы и строки. Однако существует один случай, когда сформатированный в редакторе текст может выводиться таким же образом в браузере.
Блок текста, окруженный блочным тегом <pre> ("preformatted" или "<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> не добавляют в таблицу пробелы при просмотре в браузере.
<pre style="color:blue">
<b>Таблица 1</b>
<b>Продажи по регионам</b>
----------------------------------------------
<b>Регион/Год 2000 2001 2002 2003</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
Можно задавать цвет текста на странице или цвет фона контейнера, содержащего текст. Два эти свойства стиля показаны в следующей таблице.
| Свойство | Значение |
|---|---|
color |
#rrggbb rgb(r,g,b) название цвета |
background-color |
#rrggbb rgb(r,g,b) название цвета |
Цвета могут задаваться в диапазоне от всей страницы, связывая стиль цвета с тегом <body>, и до одного текстового символа, связывая стиль цвета с тегом <span>, окружающим символ. Для определения свойств цветов можно использовать шестнадцатеричные значения, RGB и названия цветов в любой комбинации.
Различные комбинации цветов фона и текста показаны в следующем коде. Вывод браузером этой страницы показан на рисунке 4.12.
<?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$$ (copyright) и $$\text{\texttrademark}$$ (trademark), не имеют эквивалента на клавиатуре. Тем не менее, требуется способ представления их на странице Web. Далее, браузеры всегда объединяют последовательности символов пробелов в один пробел, независимо от количества введенных в текстовом редакторе пробелов. Однако, иногда может понадобиться оставить более одного пробела между буквами и словами.
XHTML содержит набор имен специальных символов и кодов, которые выводят соответствующие символы в браузере. Эти символы записываются с префиксом в виде амперсанда ( ) и заканчиваются точкой с запятой ( ; ) , чтобы идентифицировать их как специальные символы. Для представления этих символов в документе XHTML можно использовать числовой код или название символа (если такое имеется).
| Выводимый символ | Название | Код | Описание |
|---|---|---|---|
" |
quot; |
#34; |
двойная кавычка |
|
amp; |
#38; |
амперсанд |
| $$\textquotesingle$$ | #39; |
апостроф | |
< |
lt; |
#60; |
меньше |
> |
gt; |
#62; |
больше |
| $$\text{\texttrademark}$$ | |
#153; |
торговая марка |
nbsp; |
#160; |
неразрывный пробел | |
| $$\text{\textcent}$$ | cent; |
#162; |
|
| $$\text{\textbrokenbar}$$ | brvbar; |
#166; |
разорванная вертикальная черта |
| $$\S$$ | sect; |
#167; |
параграф, раздел |
| $$\copyright$$ | copy; |
#169; |
авторское право |
" |
laquo; |
#171; |
левая угловая кавычка |
" |
raquo; |
#187; |
правая угловая кавычка |
| $$\neg$$ | not; |
#172; |
знак отрицания |
| $$\text{\textregistered}$$ | reg; |
#174; |
зарегистрированная торговая марка |
| $$\deg$$ | deg; |
#176; |
градус |
| $$\pm$$ | plusmn; |
#177; |
плюс/минус |
| $$\P$$ | |
#182; |
параграф, абзац |
x |
middot; |
#183; |
точка посредине |
| $$ullet$$ | bull; |
#149; |
маркер, буллит |
| $$\frac14$$ | frac14; |
#188; |
дробь одна четвертая |
| $$\frac12$$ | frac12; |
#189; |
дробь одна вторая |
| $$\frac{3}{4}$$ | frac34; |
#190; |
дробь три четвертых |
| $$\div$$ | |
#247; |
деление |
x |
times; |
#215; |
умножение |
' |
oslash; |
#248; |
маленькое перечеркнутое о |
| $$\varnothing$$ | Oslash; |
#216; |
большое перечеркнутое О |
- |
ndash; |
#150; |
короткое тире |
- |
mdash; |
#151; |
длинное тире |
В качестве примера применения этих специальных символов следующий код оставляет по пять пробелов между словами, используя между ними символы неразрывного пробела ( nbsp; ) и маркера ( bull; ).
МЕЖДУnbsp;nbsp;bull;nbsp;nbsp;ЭТИМИnbsp;nbsp;bull;nbsp;nbsp; СЛОВАМИ • ЗАДАНО • ПОnbsp;nbsp;bull;nbsp;nbsp;ПЯТЬnbsp;nbsp;bull;nbsp;nbsp; ПРОБЕЛОВ.
МЕЖДУ x ЭТИМИ x СЛОВАМИ x ЗАДАНО x ПО x ПЯТЬ x ПРОБЕЛОВ.
Если необходимо выводить теги XHTML как часть текста на странице Web, то нельзя просто ввести символы "<" и ">". Эти символы воспринимаются браузером как вложенные теги XHTML и будут соответственно интерпретироваться. Вместо этого необходимо использовать для вывода этих символов специальные символы XHTML "lt;" и "gt;".
Предположим, что на странице Web нужно вывести следующий код XHTML.
<p>Это параграф, в котором слово <span class="red">RED</span>
выводится красным цветом, помещенное внутри тега <span>, к которому
применяется класс стиля.</p>
Этот код необходимо ввести в текстовом редакторе, используя специальные символы вместо символов < и >.
<pre style="font-size:9pt"> lt;pgt;Это параграф, в котором слово lt;span class="red"gt; REDlt;/spangt; выводится красным цветом, помещенное внутри тега lt;spangt; , который использует класс стиля.lt;/pgt; </pre>
Необходимо отметить, что для кодов специальных символов могут применяться стили, так же, как и для других алфавитно-цифровых символов. Например, следующее уравнение выводится полужирным шрифтом Courier New размером 24 пункта.
<style type="text/css">
.equation {font-family:courier new; font-size:24pt; font-weight:bold}
</style>
<p class="equation">frac14; + frac12; = frac34;</p>
(рис 4.13) Коды символов с заданным стилем
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.