|
||
|
aranea.ru || Спецификация HTML 4.01 | 15. Выравнивание, стили шрифтов и горизонтальные линии
15. Выравнивание, стили шрифтов и горизонтальные линии15.1. ФорматированиеЭтот раздел спецификации обсуждает элементы и атрибуты HTML, которые могут использоваться для визуального форматирования элементов. Многие из них являются устаревающими (deprecated). 15.1.1. Цвет фона15.1.2. Выравнивание 15.1.3. Обтекание объектов Свободное перемещение объекта Обтекание текста вокруг объекта 15.1.1 Цвет фонаОпределение атрибутов
Этот атрибут устанавливает цвет фона канвы тела документа (элемент BODY) или таблиц (элементы TABLE, TR, TH и TD). Для элемента BODY можно использовать дополнительные атрибуты, чтобы определить цвет текста. Этот атрибут стал устаревающим (deprecated) в пользу стилевых таблиц, определяющих информацию о цвете фона. 15.1.2 ВыравниваниеМожно выравнивать блочные элементы (таблицы, изображения, объекты, параграфы и т.д.) в канве атрибутом align. Хотя этот атрибут может определяться для многих элементов HTML, его диапазон возможных значений иногда отличается от элемента к элементу. Здесь мы обсуждаем только значение атрибута align для текста. Определение атрибутов
Значение по умолчанию зависит от базового направления текста. Для текста слева направо, значение по умолчанию является 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">...Lots of paragraph text... с помощью CSS, можно было бы написать:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
P.mypar {text-align: right}
</STYLE>
<BODY>
<P class="mypar">...Lots of paragraph text...
УСТАРЕВАЮЩИЙ ПРИМЕР:Для выравнивания по правому краю серии параграфов, сгруппируйте их в элементе DIV: <DIV align="right"> <P>...text in first paragraph... <P>...text in second paragraph... <P>...text in third paragraph... </DIV> С помощью CSS, свойство text-align наследуется от родительского элемента, и вы можете, поэтому, использовать:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
DIV.mypars {text-align: right}
</STYLE>
<BODY>
<DIV class="mypars">
<P>...text in first paragraph...
<P>...text in second paragraph...
<P>...text in third paragraph...
</DIV>
Для центрирования всего документа с помощью CSS:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...the body is centered...
</BODY>
Элемент CENTER является точным эквивалентом для элемента DIV с атрибутом align, имеющим значение "center". Элемент CENTER является устаревающим (deprecated). 15.1.3 Обтекание объектовИзображения и объекты могут появляться непосредственно внутри строки ("in-line") или обтекаться с одной стороны, временно меняя поля текста, который может обходить любую сторону объекта. Свободное перемещение объектаАтрибут align для объектов, изображений, таблиц, фреймов и т.д. приводит к тому, что объект смещается к левому или правому полю. Смещение объектов обычно начинает новую строку. Этот атрибут принимает следующие значения:
УСТАРЕВАЮЩИЙ ПРИМЕР:Следующий пример показывает, как сместить элемент IMG к текущему левому полю канвы. <IMG align="left" src="http://foo.com/animage.gif" alt="my boat"> Некоторые атрибут выравнивания также позволяют устанавливать значение "center", которое не приводит к смещению, но центрируют объект внутри текущих полей. Но, для P и DIV, значение "center" приводит к тому, что содержание элемента центрируется. Обтекание текста вокруг объектаДругой атрибут, определяемый для элемента BR, управляет обтеканием текста вокруг смещаемых объектов. Определение атрибутов
Рассмотрим следующий визуальный сценарий, где текст обтекает правый край изображения до того, как строка оборвется элементом BR: ********* ------- | | ------- | image | --<BR> | | ********* Если атрибут clear установлен как none, то строка, следующая после BR, будет начинаться сразу ниже него с правого поля изображения: ********* ------- | | ------- | image | --<BR> | | ------ ********* УСТАРЕВАЮЩИЙ ПРИМЕР:Если атрибут clear установлен как left или all, то следующая строка будет появляться следующим образом: ********* ------- | | ------- | image | --<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>...
********* -------
| | -------
| table | --<BR id="mybr">
| |
*********
-----------------
...
</BODY>
|
