Выравнивание, стили шрифтов и горизонтальные разделители
Выравнивание, стили шрифтов и горизонтальные разделители
Содержание
В этом разделе спецификации обсуждаются некоторые элементы и атрибуты языка HTML, которые могут использоваться для визуального форматирования элементов. Многие из них являются .
Форматирование
Определение атрибутов
- =
- Этот атрибут устанавливает цвет фона тела документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона тела документа (элемент ) или таблицы (элементы , , , and ). В элементе могут использоваться дополнительные атрибуты для указания цвета текста.
Использование этого атрибута , вместо этого следует использовать таблицы стилей.
Выравнивать блочные элементы (таблицы, изображения, объекты, абзацы и т.д.) можно с помощью атрибута . Хотя этот атрибут может устанавливаться для многих элементов HTML, диапазон его возможных значений в разных элементах может быть различным. Здесь обсуждается только значение атрибута align для текста.
Определения атрибутов
- = left|center|right|justify
- Этот атрибут задает горизонтальное выравнивание своего элемента относительно окружающего контекста. Возможные значения:
- 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>
Обратите внимание, что будут выровнены все объявления . Вы можете ограничить область действия стиля, установив атрибут :
<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 Вы можете записать:
<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 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". Использование элемента .
Изображения и объекты могут быть "встроенными" или прикрепляться к краю страницы, временно изменяя поля текста с учетом объекта.
Атрибут для объектов, изображений, таблиц, фреймов и т.д. приводит к тому, что объект прикрепляется к левому или правому краю. Обычно прикрепляемые объекты располагаются с новой строки. Для этого атрибута могут устанавливаться следующие значения:
- left: Объект прикрепляется к текущему левому полю. Последующий текст обтекает изображение справа.
- right: Объект прикрепляется к текущему правому полю. Последующий текст обтекает изображение слева.
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере показано, как прикрепить элемент к левому полю.
<IMG align="left" src="http://foo.com/animage.gif" alt="моя лодка">
Некоторые атрибуты выравнивания допускают значение "center", который не прикрепляет объект, но центрирует его относительно текущих полей. Однако для элементов и значение "center" приводит к центрированию содержимого элемента.
Другой атрибут, определенный для элемента , управляет вокруг прикрепленных объектов.
Определения атрибутов
- = none|left|right|all
-
Определяет, где в визуальном браузере должна появиться следующая за переводом строки, вызванном этим элементом, строка. Этот атрибут учитывает прикрепляемые объекты (изображения, таблицы и т.д.). Возможные значения:
- none: Следующая строка начинается обычным образом. Это значение используется по умолчанию.
- left: Следующая строка начнется на ближайшей строке под прикрепленным объектом у левого поля.
- right: Следующая строка начнется на ближайшей строке под прикрепленным объектом у правого поля.
- all: Следующая строка начнется на ближайшей строке под прикрепленным объектом у любого поля.
Рассмотрим следующий визуальный сценарий, в котором обтекание текстом производится справа от изображения до разрыва строки с помощью :
**************** ------- | | ------- | изображение | --<BR> | | ****************
Если для атрибута установлено значение none, строка, следующая за , начнется сразу же за ним справа от изображения:
*************** ------- | | ------- | изображение | --<BR> | | ------ ***************
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Если для атрибута установлено значение left или all, следующая строка будет отображаться так:
*************** ------- | | ------- | изображение | --<BR clear="left"> | | *************** -----------------
С помощью таблиц стилей Вы можете задать подобное поведение для всех концов строк для всех объектов (изображений, таблиц и т.д.), прикрепленных к левому полю. С использованием CSS Вы можете достичь этого эффекта следующим образом:
<STYLE type="text/css">
BR { clear: left }
</STYLE>
Чтобы определить такое поведение только для определенных экземпляров элемента , следует использовать атрибут :
<HEAD>
...
<STYLE type="text/css">
BR.mybr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
*********** -------
| | -------
| таблица | --<BR id="mybr">
| |
***********
-----------------
...
</BODY>
Следующие элементы HTML определяют информацию о шрифтах. Хотя не все они , рекомендуется использовать вместо них таблицы стилей.
: элементы , , , , , , и
<!ENTITY % fontstyle
" | | | | ">
<!ELEMENT (|) - - ()*>
<!ATTLIST (|)
-- , , --
>
Начальный тег: обязателен, Конечный тег: обязателен
Атрибуты, определяемые в другом месте
- , ()
- (), ()
- ()
- ()
- , , , , , , , , ()
Представления элементов, определяющих стиль шрифта, зависит от агента пользователя. Далее приведено только информативное описание.
- TT: Представляется как моноширинный шрифт (шрифт пишущей машинки).
- I: Представляет курсивом.
- B: Представляется полужирным шрифтом.
- BIG: Представляется "крупным" шрифтом.
- SMALL: Представляется "малым" шрифтом.
- STRIKE и S: Представляет перечеркнутым шрифтом.
- U: Представляется подчеркнутым шрифтом.
- I: Представляет курсивом.
В следующем предложении показаны несколько типов текста:
<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">...Текст синим курсивом...
Элементы стиля шрифта должны корректно вкладываться. Представление вложенных элементов стиля зависит от агента пользователя.
и
Использование элементов и .
Формальное определение см. в .
Определения атрибутов
- =
-
Устанавливает размер шрифта. Возможные значения:
- Целое число от 1 до 7. Устанавливает фиксированный размер шрифта, представление которого зависит от агента пользователя. Не все агенты пользователей могут представлять все семь размеров.
- Относительное изменение размера шрифта. Значение "+1" означает на один размер больше. Значение "-3" означает шрифт на три размера меньше. Все размеры относятся к шкале от 1 до 7.
- =
- Этот атрибут устанавливает цвет текста.
- =
- Этот атрибут определяет список разделенных запятыми названий шрифтов, поиск которых агент пользователя должен выполнить в порядке приоритета.
Атрибуты, определяемые в другом месте
- , ()
- (), ()
- ()
- ()
Элемент изменяет размер и цвет шрифта для текста его содержимого.
Элемент устанавливает базовый размер шрифта (с помощью атрибута size). Изменения размера шрифта с помощью элемента производятся относительно базового размера, установленного элементом . Если элемент не используется, по умолчанию используется размер 3.
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере показана разница между семью размерами шрифтов, устанавливаемых с помощью элемента :
<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:
Базовый размер шрифта не применяется к заголовкам, если они не изменены с помощью элемента с указанием относительного размера шрифта.
Разделители: элемент
<!ELEMENT - O EMPTY - горизонтальный разделитель -->
<!ATTLIST HR
-- , , , --
>
Начальный тег: обязателен, Конечный тег: запрещен
Определения атрибутов
- = left|center|right
- Этот атрибут определяет горизонтальное выравнивание разделителя относительно окружающего контекста. Возможные значения:
- left: разделитель выровнен по левому краю.
- center: разделитель выровнен по центру.
- right: разделитель выровнен по правому краю.
По умолчанию используется align=center.
- Если этот атрибут установлен, он предлагает агенту пользователю представлять разделитель сплошным цветом, а не обычным двухцветным стилем.
- =
- Этот атрибут задает высоту разделителя. Значение по умолчанию зависит от агента пользователя.
- =
- Этот атрибут задает ширину разделителя. По умолчанию используется 100%, т.е. вся ширина страницы.
Атрибуты, определяемые в другом месте
- , ()
- (), ()
- ()
- ()
- , , , , , , , , , ()
- ()
Элемент приводит к генерации горизонтального разделителя визуальными агентами пользователей.
Высота пустого пространства между разделителем и текстом зависит от агента пользователя.
ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
В этом примере разделители центрируются, а их размер устанавливается в половину ширины между полями. Верхний разделитель имеет толщину по умолчанию, а для нижнего установлена толщина 5 пикселов. Нижний разделитель должен представляться сплошным цветом без тени:
<HR width="50%" align="center"> <HR size="5" width="50%" align="center"> <HR noshade size="5" width="50%" align="center">
Эти разделители могут представляться следующим образом:
Нет комментариев. Ваш будет первым!