Логические стили

Разделение текста на абзацы

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

При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. В HTML-документах символы перевода строки не приводят к образованию нового абзаца.

Тэги вида <hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня ‑ самый мелкий. Тэги заголовка являются элементами уровня блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения их размера.

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

Тэги <hi> и <p> могут содержать дополнительный атрибут align (Таблица 2), например:

<h1 align="center">Выравнивание заголовка по центру</h1>

<p align="right">Абзац с выравниванием по правому краю</p>

Таблица 2. Значения параметра align

Значение параметра align	Действие
left	Выравнивание текста по левой границе
center	Выравнивание по центру
right	Выравнивание по правой границе
justify	Выравнивание по ширине

Использование атрибута align в XHTML также не рекомендуется.

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

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тэг <hr/> описывает горизонтальную линию между параграфами. Тэг может дополнительно включать ряд атрибутов (Таблица 3).

Таблица 3. Атрибуты тэга <hr>

Параметр тэга <hr/>	Назначение
align	Выравнивает по краю или центру; имеет значения left, center, right
width	Устанавливает длину линии в пикселах или процентах от ширины страницы
size	Устанавливает толщину линии в пикселах
noshade	Отменяет рельефность линии
color	Указывает цвет линии. Используется формат RGB или стандартное имя

Все перечисленные атрибуты тэга <hr/> в XHTML являются устаревшими. Пример:

<hr align="center" width="50%" noshade />

Бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тэг-контейнер <pre>, определяющий предварительно форматированный (преформатированный) текст. Текст, размеченный тэгом <pre>, будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения будет использоваться моноширинный шрифт. Пример:

<pre>один

два

три</pre>

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

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

Тэги логического форматирования обозначают структурные типы текстовых фрагментов, такие, например, как программный код (тэг <code>), цитата (тэг <cite>), аббревиатура (тэг <abbr>) и т. д.

Самые распространенные логические стили:

<em>... </em> - от английского emphasis — акцент. Используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом.

Пример выделения <em>отдельных слов</em> текста

<strong>... </strong> - от английского strong emphasis — сильный акцент. Используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст полужирным шрифтом.

Этот фрагмент <strong>очень важен</strong>

<code>... </code> - рекомендуется использовать для фрагментов исходных текстов. Отмечает текст как небольшой фрагмент программного кода. Как правило, отображается моноширинным шрифтом. Пример:

<code>Response.Write("Hello, World!")</code>

<samp>... </samp> - от английского sample — образец. Отмечает текст как образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. Для выделения используется моноширинный шрифт.

Результат работы программы: <samp>Hello, World!</samp>

<kbd>... </kbd> От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры. Обычно отображается моноширинным шрифтом.

Введите с клавиатуры: <kbd>Hello, World!</kbd>

<var>... </var> От английского variable — переменная. Рекомендуется использовать для написания имен переменных. Обычно такой текст отображается курсивом.

Объявите переменную <var>a</var>

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

2.4.6. Тэг <div>

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

<div style="color: green">

(Фрагмент документа)

</div>

В этом примере фрагмент HTML-документа обрамляется тэгами <div> и </div> для задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться зеленым (green) цветом. Аналогом тэга <div> уровня текста является элемент <span>.

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

Дата добавления: 2014-01-20