Web - кодинг: HTML:


Консорциум W3C Спецификация HTML 4.0 - Выравнивание, стили шрифтов и горизонтальные разделители в документах HTML



  Оригинал:
    Русская версия:
    Английская версия:
  Автор перевода: Юлия Поданева
  Источник:

В этом разделе спецификации обсуждаются некоторые элементы и атрибуты языка 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.

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В данном примере заголовок центрируется.

С использованием CSS, например, Вы можете достичь того же эффекта следующим образом:

Обратите внимание, что будут выровнены все объявления H1. Вы можете ограничить область действия стиля, установив атрибут class:

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Аналогично, чтобы выровнять абзац по правому краю с помощью атрибута HTML align Вы можете записать:

...Текст абзаца...

а с использованием CSS:

...Текст абзаца...

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

...текст первого абзаца...
<P>...текст второго абзаца...
<P>...текст третьего абзаца...
</DIV>

С использованием CSS свойство выравнивания текста наследуется от родительского элемента, поэтому Вы можете использовать:

...текст первого абзаца...
<P>...текст второго абзаца...
<P>...текст третьего абзаца...
</DIV>

Чтобы отцентрировать с использованием CSS весь документ:

...тело документа отцентрировано...
</BODY>

Использование элемента CENTER абсолютно эквивалентно использованию элемента DIV с атрибутом align, для которого установлено значение "center". Использование элемента CENTER нежелательно.

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

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

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

Атрибут align для объектов, изображений, таблиц, фреймов и т.д. приводит к тому, что объект прикрепляется к левому или правому краю. Обычно прикрепляемые объекты располагаются с новой строки. Для этого атрибута могут устанавливаться следующие значения:

  • left: Объект прикрепляется к текущему левому полю. Последующий текст обтекает изображение справа.
  • right: Объект прикрепляется к текущему правому полю. Последующий текст обтекает изображение слева.

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере показано, как прикрепить элемент IMG к левому полю.

Некоторые атрибуты выравнивания допускают значение "center", который не прикрепляет объект, но центрирует его относительно текущих полей. Однако для элементов P и DIV значение "center" приводит к центрированию содержимого элемента.

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

Другой атрибут, определенный для элемента BR, управляет обтеканием текста вокруг прикрепленных объектов.

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

clear = none|left|right|all [CI]
Нежелателен. Определяет, где в визуальном браузере должна появиться следующая за переводом строки, вызванном этим элементом, строка. Этот атрибут учитывает прикрепляемые объекты (изображения, таблицы и т.д.). Возможные значения:
  • none: Следующая строка начинается обычным образом. Это значение используется по умолчанию.
  • left: Следующая строка начнется на ближайшей строке под прикрепленным объектом у левого поля.
  • right: Следующая строка начнется на ближайшей строке под прикрепленным объектом у правого поля.
  • all: Следующая строка начнется на ближайшей строке под прикрепленным объектом у любого поля.

Рассмотрим следующий визуальный сценарий, в котором обтекание текстом производится справа от изображения до разрыва строки с помощью BR:

Если для атрибута clear установлено значение none, строка, следующая за BR, начнется сразу же за ним справа от изображения:

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Если для атрибута clear установлено значение left или all, следующая строка будет отображаться так:

С помощью таблиц стилей Вы можете задать подобное поведение для всех концов строк для всех объектов (изображений, таблиц и т.д.), прикрепленных к левому полю. С использованием CSS Вы можете достичь этого эффекта следующим образом:

Чтобы определить такое поведение только для определенных экземпляров элемента BR, следует использовать атрибут id:

...
<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

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

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

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

TT: Представляется как моноширинный шрифт (шрифт пишущей машинки).
I: Представляет курсивом.
B: Представляется полужирным шрифтом.
BIG: Представляется "крупным" шрифтом.
SMALL: Представляется "малым" шрифтом.
STRIKE и S: Нежелательны. Представляет перечеркнутым шрифтом.
U: Нежелателен. Представляется подчеркнутым шрифтом.

В следующем предложении показаны несколько типов текста:

Слова будут представлены следующим образом:

полужирный, курсив, полужирный курсив, большой и маленький текст

С использованием таблиц стилей можно достичь большего разнообразия эффектов. Чтобы задать для абзаца синий курсив с помощью CSS, запишите:

...Текст синим курсивом...

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

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:

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

размер=1 размер=2 размер=3 размер=4 размер=5размер=6 размер=7

Далее показан пример установки относительного размера шрифта с использованием базового размера 3:

размер=-3 размер=-2 размер=-1 размер=+1 размер=+2 размер=+3

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

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

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 пикселов. Нижний разделитель должен представляться сплошным цветом без тени:

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

HR1

HR2

HR3

HR5



[Назад] [Содержание] [Вперед]





При перепечатке любого материала с сайта, видимая ссылка на источник www.warayg.narod.ru и все имена, ссылки авторов обязательны.

© 2005