Электронная библиотека
Программисту веб-дизайнеру
Другие материалы
Спецификация HTML 4.01, рекомендации W3C от 24 декабря 1999 года
предыдущий
следующий содержание
элементы атрибуты индекс
15 Выравнивание,
стили шрифта
и горизонтальные линии
Содержание
В этом разделе спецификации рассматриваются элементы и атрибуты HTML, которые используются для визуального форматирования элементов. Многие из них не рекомендуется применять.
15.1 Форматирование
Определение атрибута
Не рекомендуется. Этот атрибут устанавливает цвет фона документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона "канвы" тела документа (элемент BODY) или таблицы (элементы table, tr, TH и td). Дополнительные атрибуты, устанавливающие цвет текста, могут использоваться с элементом BODY.
Этот атрибут не рекомендуется использовать для определения цвета фона. Лучше использовать таблицы стилей.
Можно выравнивать блок элементов (таблицы, изображения, объекты, параграфы и т.п.) на "канве" с помощью атрибута align. Хотя этот атрибут может быть установлен для многих элементов HTML, диапазон его значений может отличаться, в зависимости от элемента. Здесь мы обсуждаем только значение атрибута "выравнивание" для текста.
Определение атрибута
align = left|center|right|justify [CI]
Не рекомендуется. Этот атрибут определяет горизонтальное выравнивание элемента по отношению к окружающему контексту. Возможные значения:
Значение по умолчанию зависит от базового направления текста. Для направления слева направо - это align=left, для направления справа налево - по умолчанию align=right.
НЕ РЕКОМЕНДУЕТСЯ:
Здесь заголовок центрируется.
<H1 align="center"> Что за прелесть эта мерзость! </H1>
Используя CSS (каскадные таблицы стилей), например, Вы можете достичь того же эффекта следующим образом:
<HEAD> <TITLE>Что за прелесть эта мерзость!</TITLE> <STYLE type="text/css"> H1text-align: center} </STYLE> <BODY> <H1> Что за прелесть эта мерзость! </H1>
Учтите, что это будет действовать на все элементы H1. Вы можете ограничить область видимости стиля, установив атрибут class элемента:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
<BODY>
<H1 class="wood"> Что за прелесть эта мерзость! </H1>
НЕ РЕКОМЕНДУЕТСЯ:
также, для того, чтобы выровнять вправо
параграф на "канве" атрибутом HTML align,
Вы могли бы записать:
<p align="right">...параграф текста...
что в таблице стиля могло бы быть:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
p.mypar {text-align: right}
</STYLE>
<BODY>
<p class="mypar">...параграф текста...
НЕ РЕКОМЕНДУЕТСЯ:
Чтобы выровнять вправо несколько
параграфов, сгруппируйте их элементом div:
<div align="right"> <p>...текст первого параграфа... <p>...текст второго параграфа... <p>...текст третьего параграфа... </div>
В таблице стиля свойство выравнивания текста наследуется от предка, поэтому Вы можете использовать:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
div.mypars {text-align: right}
</STYLE>
<BODY>
<div class="mypars">
<p>...текст первого параграфа...
<p>...текст второго параграфа...
<p>...текст третьего параграфа..
</div>
Чтобы выровнять по центру весь документ:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...тело выровнено по центру...
</BODY>
Элемент CENTER полностью эквивалентен определению элемента div с атрибутом align, установленным в "center". Элемент CENTER не рекомендуется.
Изображения и объекты могут появляться непосредственно "in-line" или "всплывать" к одной из сторон страницы, изменяя временно поля текста, который может обтекать объект по любой его стороне.
Атрибут align объектов, изображений, таблиц, фрэймов и т.п. заставляет объект прижиматься к левому или правому полю страницы. Плавающие объекты обычно начинают новую строку. Этот атрибут принимает следующие значения:
ПРИМЕР НЕ РЕКОМЕНДУЕМОГО
ИСПОЛЬЗОВАНИЯ:
Пример показывает. как элемент
IMG "всплывает" к левому краю "канвы".
<IMG align="left" src="http://foo.com/animage.png" alt="my boat">
Некоторые атрибуты выравнивания также допускают значение "center", которое не вызывает всплывания, а центрирует объект по отношению к краям. В то же время, у элементов p и div, значение "center" вызывает центрирование содержимого элементов.
Обтекание текста вокруг объекта
Еще один атрибут, определенный для элемента BR, управляет обтеканием текста вокруг "всплывающего" объекта.
Определение атрибута
clear = none|left|right|all [CI]
Не рекомендуется. Определяет, где должна появиться следующая строка после обрыва строки, сделанного этим элементом. Этот атрибут учитывает плавающие объекты (изображения, таблицы и т.д.). Возможные значения:
Посмотрите на этот рисунок. Текст обтекает изображение по правому краю до обрыва строки элементом BR:
********* ------- | | ------- | image | --<BR> | | *********
Если атрибут clear установлен в none, линия, следующая после BR, начнется сразу под ним у правого края изображения:
********* ------- | | ------- | image | --<BR> | | ------ *********
НЕ РЕКОМЕНДУЕТСЯ:
Если атрибут clear установлен в left или all,
следующая строка появится так:
********* ------- | | ------- | image | --<BR clear="left"> | | ********* -----------------
Используя таблицы стилей, Вы можете установить, чтобы все обрывы строки вели себя одинаково для объектов (изображений, таблиц и т.д.), "всплывая" у левого края. В таблице стилей Вы можете записать:
<STYLE type="text/css"> BRclear: left } </STYLE>
Чтобы определить такое поведение для конкретного элемента BR, нужно скомбинировать информацию о стиле и атрибут id:
<HEAD> ... <STYLE type="text/css"> BR#mybrclear: left } </STYLE> </HEAD> <BODY> <p>... ********* ------- | | ------- | table | --<BR id="mybr"> | | ********* ----------------- ... </BODY>
Последующие элементы 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>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and <big>big</big> and <small>small</small> text.
Это будет отображено так:
Можно применить более сложные варианты отображения шрифтов, используя таблицы стилей. Чтобы отобразить голубой курсив в параграфе с помощью таблицы стилей (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 не рекомендуется применять.
См. формальное определение в разделе Переходное ОТД.
Определения атрибутов
Не рекомендуется. Устанавливает размер шрифта. Возможные значения:
Не рекомендуется. Устанавливает цвет текста.
Не рекомендуется. Определяет список имен шрифтов, разделенных запятыми, которые ПА должен искать в порядке убывания приоритета.
Атрибуты, определенные в другом месте
Элемент 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:
Базовый размер шрифта не применяется к заголовкам/headings, за исключением тех случаев, когда заголовки изменены с использованием относительного изменения размера в элементе FONT.
15.3 Горизонтальные линии: элемент HR
<!ELEMENT HR - O EMPTY -- горизонтальная линия --> <!ATTliST HR %attrs; -- %coreattrs, %i18n, %events -- >
Начальный тег: необходим, Конечный тег: запрещен
Определение атрибутов
align = left|center|right [CI]
Не рекомендуется. Определяет горизонтальное выравнивание линии по отношению к окружающему контексту. Возможные значения:
По умолчанию align=center.
Не рекомендуется. Если этот булев атрибут установлен, он требует, чтобы ПА отображал горизонтальную линию сплошным цветом, а не традиционно с двухцветной "тенью".
Не рекомендуется. Определяет высоту линии. Значение по умолчанию зависит от ПА.
Не рекомендуется. Определяет ширину линии. Ширина по умолчанию - 100%, т.е. линия растянута по ширине всей "канвы".
Атрибуты, определенные в другом месте
Элемент HR отображает горизонтальную линию в ПА.
Величина свободного пространства под и над горизонтальной линией зависит от ПА.
НЕ РЕКОМЕНДУЕТСЯ:
В этом примере линия центрируется, размер
установлен в половину доступной ширины
между краями страницы. Верхняя линия имеет
толщину по умолчанию, а две нижние - по 5
пикселов. Нижняя линия должна отображаться
сплошным цветом без тени:
<HR width="50%" align="center"> <HR size="5" width="50%" align="center"> <HR noshade size="5" width="50%" align="center">
Эти линии должны выглядеть примерно так:
предыдущий следующий содержание элементы атрибуты индекс