15 Выравнивание, стили шрифтов и горизонтальные разделители

Содержание

Форматирование
Шрифты
1. Элементы, определяющие стиль шрифта: элементы TT, I, B, BIG, SMALL, STRIKE, S и U
2. Элементы управления шрифтами: FONT и BASEFONT
Разделители: элемент HR

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

15.1 Форматирование

15.1.1 Цвет фона

Определение атрибутов

bgcolor = цвет [CI]: Нежелателен. Этот атрибут устанавливает цвет фона тела документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона тела документа (элемент BODY) или таблицы (элементы TABLE, TR, TH, and TD). В элементе BODY могут использоваться дополнительные атрибуты для указания цвета текста.

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

15.1.2 Выравнивание

Выравнивать блочные элементы (таблицы, изображения, объекты, абзацы и т.д.) можно с помощью атрибута 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 нежелательно.

15.1.3 Прикрепляемые объекты

Изображения и объекты могут быть "встроенными" или прикрепляться к краю страницы, временно изменяя поля текста с учетом объекта.

Прикрепление объекта

Атрибут 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>

15.2 Шрифты

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

15.2.1 Элементы, определяющие стиль шрифта: элементы `TT`, `I`, `B`, `BIG`, `SMALL`, `STRIKE`, `S` и `U`

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: обязателен, Конечный тег: обязателен

Атрибуты, определяемые в другом месте

Представления элементов, определяющих стиль шрифта, зависит от агента пользователя. Далее приведено только информативное описание.

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">...Текст синим курсивом...

Элементы стиля шрифта должны корректно вкладываться. Представление вложенных элементов стиля зависит от агента пользователя.

15.2.2 Элементы управления шрифтами: `FONT` и `BASEFONT`

Использование элементов 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:

Пример представления различных размером шрифтов с использованием basefont

Базовый размер шрифта не применяется к заголовкам, если они не изменены с помощью элемента FONT с указанием относительного размера шрифта.

15.3 Разделители: элемент `HR`

<!ELEMENT HR - O EMPTY - горизонтальный разделитель -->
<!ATTLIST HR
  %coreattrs;                          -- id, class, style, title --
  %events;
  >

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутов

align = left|center|right [CI]

Нежелателен. Этот атрибут определяет горизонтальное выравнивание разделителя относительно окружающего контекста. Возможные значения:

left: разделитель выровнен по левому краю.
center: разделитель выровнен по центру.
right: разделитель выровнен по правому краю.

По умолчанию используется align=center.

noshade [CI]

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

size = пикселы [CI]

Нежелателен. Этот атрибут задает высоту разделителя. Значение по умолчанию зависит от агента пользователя.

width = length [CI]

Нежелателен. Этот атрибут задает ширину разделителя. По умолчанию используется 100%, т.е. вся ширина страницы.

Атрибуты, определяемые в другом месте

Элемент HR приводит к генерации горизонтального разделителя визуальными агентами пользователей.

Высота пустого пространства между разделителем и текстом зависит от агента пользователя.

ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
В этом примере разделители центрируются, а их размер устанавливается в половину ширины между полями. Верхний разделитель имеет толщину по умолчанию, а для нижнего установлена толщина 5 пикселов. Нижний разделитель должен представляться сплошным цветом без тени:

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

Эти разделители могут представляться следующим образом:

Пример представления различных горизонтальных разделителей

15 Выравнивание, стили шрифтов и горизонтальные разделители

15.1 Форматирование

15.1.1 Цвет фона

15.1.2 Выравнивание

15.1.3 Прикрепляемые объекты

Прикрепление объекта

Обтекание объекта текстом

15.2 Шрифты

15.2.1 Элементы, определяющие стиль шрифта: элементы TT, I, B, BIG, SMALL, STRIKE, S и U

15.2.2 Элементы управления шрифтами: FONT и BASEFONT

15.3 Разделители: элемент HR

15.2.1 Элементы, определяющие стиль шрифта: элементы `TT`, `I`, `B`, `BIG`, `SMALL`, `STRIKE`, `S` и `U`

15.2.2 Элементы управления шрифтами: `FONT` и `BASEFONT`

15.3 Разделители: элемент `HR`