15 Выравнивание, стили шрифтов и горизонтальные разделители
В этом разделе спецификации обсуждаются некоторые элементы и атрибуты языка HTML, которые могут использоваться для визуального форматирования элементов. Многие из них являются нежелательными .
15.1 Форматирование
Определение атрибутов
- bgcolor = цвет [CI]
- Нежелателен. Этот атрибут устанавливает цвет фона тела документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона тела документа (элемент BODY ) или таблицы (элементы TABLE , TR , TH , and TD ). В элементе BODY могут использоваться дополнительные атрибуты для указания цвета текста.
Использование этого атрибута не рекомендуется , вместо этого следует использовать таблицы стилей.
Выравнивать блочные элементы (таблицы, изображения, объекты, абзацы и т.д.) можно с помощью атрибута align . Хотя этот атрибут может устанавливаться для многих элементов HTML, диапазон его возможных значений в разных элементах может быть различным. Здесь обсуждается только значение атрибута align для текста.
Определения атрибутов
- align = left|center|right|justify [CI]
- Нежелателен. Этот атрибут задает горизонтальное выравнивание своего элемента относительно окружающего контекста. Возможные значения:
- left : строки текста выравниваются по левому краю.
- center : строки текста выравниваются по центру.
- right : строки текста выравниваются по правому краю.
- justify : строки текста выравниваются по обоим краям.
Значение по умолчанию зависит от общего направления текста. Для текста, направленного слева направо, по умолчанию используется значение align=left , я для текста, направленного справа налево - align=right .
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В данном примере заголовок центрируется.
<H1 align="center"> How to Carve Wood </H1>
С использованием CSS, например, Вы можете достичь того же эффекта следующим образом:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1 { text-align: center}
</STYLE>
<BODY>
<H1> How to Carve Wood </H1>
Обратите внимание, что будут выровнены все объявления H1 . Вы можете ограничить область действия стиля, установив атрибут class :
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
<BODY>
<H1 class="wood"> How to Carve Wood </H1>
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Аналогично, чтобы выровнять абзац по правому краю с помощью атрибута HTML align Вы можете записать:
<P align="right">...Текст абзаца...
а с использованием CSS:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
P.mypar {text-align: right}
</STYLE>
<BODY>
<P class="mypar">...Текст абзаца...
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Чтобы выровнять по правому краю ряд абзацев, сгруппируйте их с помощью элемента DIV :
<DIV align="right">
<P>...текст первого абзаца...
<P>...текст второго абзаца...
<P>...текст третьего абзаца...
</DIV>
С использованием CSS свойство выравнивания текста наследуется от родительского элемента, поэтому Вы можете использовать:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
DIV.mypars {text-align: right}
</STYLE>
<BODY>
<DIV class="mypars">
<P>...текст первого абзаца...
<P>...текст второго абзаца...
<P>...текст третьего абзаца...
</DIV>
Чтобы отцентрировать с использованием CSS весь документ:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...тело документа отцентрировано...
</BODY>
Использование элемента CENTER абсолютно эквивалентно использованию элемента DIV с атрибутом align , для которого установлено значение "center". Использование элемента CENTER нежелательно .
Изображения и объекты могут быть "встроенными" или прикрепляться к краю страницы, временно изменяя поля текста с учетом объекта.
Атрибут align для объектов, изображений, таблиц, фреймов и т.д. приводит к тому, что объект прикрепляется к левому или правому краю. Обычно прикрепляемые объекты располагаются с новой строки. Для этого атрибута могут устанавливаться следующие значения:
- left: Объект прикрепляется к текущему левому полю. Последующий текст обтекает изображение справа.
- right: Объект прикрепляется к текущему правому полю. Последующий текст обтекает изображение слева.
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере показано, как прикрепить элемент IMG к левому полю.
<IMG align="left" src="http://foo.com/animage.gif" alt="моя лодка">
Некоторые атрибуты выравнивания допускают значение "center", который не прикрепляет объект, но центрирует его относительно текущих полей. Однако для элементов P и DIV значение "center" приводит к центрированию содержимого элемента.
Другой атрибут, определенный для элемента BR , управляет обтеканием текста вокруг прикрепленных объектов.
Определения атрибутов
- clear = none|left|right|all [CI]
- Нежелателен. Определяет, где в визуальном браузере должна появиться следующая за переводом строки, вызванном этим элементом, строка. Этот атрибут учитывает прикрепляемые объекты (изображения, таблицы и т.д.). Возможные значения:
- none: Следующая строка начинается обычным образом. Это значение используется по умолчанию.
- left: Следующая строка начнется на ближайшей строке под прикрепленным объектом у левого поля.
- right: Следующая строка начнется на ближайшей строке под прикрепленным объектом у правого поля.
- all: Следующая строка начнется на ближайшей строке под прикрепленным объектом у любого поля.
Рассмотрим следующий визуальный сценарий, в котором обтекание текстом производится справа от изображения до разрыва строки с помощью BR :
**************** -------
| | -------
| изображение | --<BR>
| |
****************
Если для атрибута clear установлено значение none , строка, следующая за BR , начнется сразу же за ним справа от изображения:
*************** -------
| | -------
| изображение | --<BR>
| | ------
***************
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Если для атрибута clear установлено значение left или all , следующая строка будет отображаться так:
*************** -------
| | -------
| изображение | --<BR clear="left">
| |
***************
-----------------
С помощью таблиц стилей Вы можете задать подобное поведение для всех концов строк для всех объектов (изображений, таблиц и т.д.), прикрепленных к левому полю. С использованием CSS Вы можете достичь этого эффекта следующим образом:
<STYLE type="text/css">
BR { clear: left }
</STYLE>
Чтобы определить такое поведение только для определенных экземпляров элемента BR , следует использовать атрибут id :
<HEAD>
...
<STYLE type="text/css">
BR.mybr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
*********** -------
| | -------
| таблица | --<BR id="mybr">
| |
***********
-----------------
...
</BODY>
Следующие элементы HTML определяют информацию о шрифтах. Хотя не все они нежелательны , рекомендуется использовать вместо них таблицы стилей.
Начальный тег: обязателен, Конечный тег: обязателен
Атрибуты, определяемые в другом месте
- id , class ( идентификаторы в пределах документа )
- lang ( информация о языке ), dir ( направление текста )
- title ( заголовок элемента )
- style ( встроенная информация о стиле )
- onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown onkeyup ( внутренние события )
Представления элементов, определяющих стиль шрифта, зависит от агента пользователя. Далее приведено только информативное описание.
- TT: Представляется как моноширинный шрифт (шрифт пишущей машинки).
- I: Представляет курсивом.
- B: Представляется полужирным шрифтом.
- BIG: Представляется "крупным" шрифтом.
- SMALL: Представляется "малым" шрифтом.
- STRIKE и S: Нежелательны. Представляет перечеркнутым шрифтом.
- U: Нежелателен. Представляется подчеркнутым шрифтом.
В следующем предложении показаны несколько типов текста:
<P><b>полужирный</b>,
<i>курсив</i>, <b><i>полужирный курсив</i></b>, <tt>моноширинный</tt> и
<big>большой</big> и <small>малый</small> текст.
Слова будут представлены следующим образом:
С использованием таблиц стилей можно достичь большего разнообразия эффектов. Чтобы задать для абзаца синий курсив с помощью CSS, запишите:
<HEAD>
<STYLE type="text/css">
P.mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...Текст синим курсивом...
Элементы стиля шрифта должны корректно вкладываться. Представление вложенных элементов стиля зависит от агента пользователя.
Использование элементов FONT и BASEFONT нежелательно .
Формальное определение см. в Transitional DTD .
Определения атрибутов
- size = cdata [CN]
- Нежелателен. Устанавливает размер шрифта. Возможные значения:
- Целое число от 1 до 7. Устанавливает фиксированный размер шрифта, представление которого зависит от агента пользователя. Не все агенты пользователей могут представлять все семь размеров.
- Относительное изменение размера шрифта. Значение "+1" означает на один размер больше. Значение "-3" означает шрифт на три размера меньше. Все размеры относятся к шкале от 1 до 7.
- color = цвет [CI]
- Нежелателен. Этот атрибут устанавливает цвет текста.
- face = cdata [CI]
- Нежелателен. Этот атрибут определяет список разделенных запятыми названий шрифтов, поиск которых агент пользователя должен выполнить в порядке приоритета.
Атрибуты, определяемые в другом месте
Элемент FONT изменяет размер и цвет шрифта для текста его содержимого.
Элемент BASEFONT устанавливает базовый размер шрифта (с помощью атрибута size ). Изменения размера шрифта с помощью элемента FONT производятся относительно базового размера, установленного элементом BASEFONT . Если элемент BASEFONT не используется, по умолчанию используется размер 3.
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере показана разница между семью размерами шрифтов, устанавливаемых с помощью элемента FONT :
<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>
Это может представляться следующим образом:
Далее показан пример установки относительного размера шрифта с использованием базового размера 3:
Базовый размер шрифта не применяется к заголовкам, если они не изменены с помощью элемента FONT с указанием относительного размера шрифта.
15.3 Разделители: элемент HR
Начальный тег: обязателен, Конечный тег: запрещен
Определения атрибутов
- align = left|center|right [CI]
- Нежелателен. Этот атрибут определяет горизонтальное выравнивание разделителя относительно окружающего контекста. Возможные значения:
- left : разделитель выровнен по левому краю.
- center : разделитель выровнен по центру.
- right : разделитель выровнен по правому краю.
По умолчанию используется align=center .
- noshade [CI]
- Нежелателен. Если этот атрибут установлен, он предлагает агенту пользователю представлять разделитель сплошным цветом, а не обычным двухцветным стилем.
- size = пикселы [CI]
- Нежелателен. Этот атрибут задает высоту разделителя. Значение по умолчанию зависит от агента пользователя.
- width = length [CI]
- Нежелателен. Этот атрибут задает ширину разделителя. По умолчанию используется 100%, т.е. вся ширина страницы.
Атрибуты, определяемые в другом месте
- id , class ( идентификаторы в пределах документа )
- lang ( информация о языке ), dir ( направление текста )
- title ( заголовок элемента )
- style ( встроенная информация о стиле )
- onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup ( внутренние события )
- align ( выравнивание )
Элемент HR приводит к генерации горизонтального разделителя визуальными агентами пользователей.
Высота пустого пространства между разделителем и текстом зависит от агента пользователя.
ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
В этом примере разделители центрируются, а их размер устанавливается в половину ширины между полями. Верхний разделитель имеет толщину по умолчанию, а для нижнего установлена толщина 5 пикселов. Нижний разделитель должен представляться сплошным цветом без тени:
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">
Эти разделители могут представляться следующим образом:
