Выравнивание, стили шрифта и горизонтальные линии документах HTML
Выравнивание, стили шрифта и горизонтальные линии документах HTMLВ этом разделе спецификации рассматриваются элементы и атрибуты HTML, которые используются для визуального форматирования элементов. Многие из них не рекомендуется применять.
15.1 Форматирование
15.1.1 Цвет фона
Определение атрибута
- bgcolor = color [CI]
- Не рекомендуется. Этот атрибут устанавливает цвет фона документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона «канвы» тела документа (элемент BODY) или таблицы (элементы TABLE, TR, TH и TD). Дополнительные атрибуты, устанавливающие цвет текста, могут использоваться с элементом BODY.
Этот атрибут не рекомендуется использовать для определения цвета фона. Лучше использовать таблицы стилей.
15.1.2 Выравнивание
Можно выравнивать блок элементов (таблицы, изображения, объекты, параграфы и т.п.) на «канве» с помощью атрибута align. Хотя этот атрибут может быть установлен для многих элементов HTML, диапазон его значений может отличаться, в зависимости от элемента. Здесь мы обсуждаем только значение атрибута «выравнивание» для текста.
Определение атрибута
- align = left|center|right|justify [CI]
- Не рекомендуется. Этот атрибут определяет горизонтальное выравнивание элемента по отношению к окружающему контексту. Возможные значения:
- left: строки текста выравниваются по левому краю;
- center: строки текста выравниваются по центру;
- right: строки текста выравниваются по правому краю;
- justify: строки текста выравниваются по обоим полям.
Значение по умолчанию зависит от базового направления текста.
НЕ РЕКОМЕНДУЕТСЯ:
Здесь заголовок центрируется.
<h2 align="center"> Что за прелесть эта мерзость! </h2>
Используя CSS (каскадные таблицы стилей), например, Вы можете достичь того же эффекта следующим образом:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
h2 { text-align: center}
</STYLE>
<BODY>
<h2> Что за прелесть эта мерзость! </h2>Учтите, что это будет действовать на все элементы h2. Вы можете ограничить область видимости стиля, установив атрибут class элемента:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
h2.wood {text-align: center}
</STYLE>
<BODY>
<h2> Что за прелесть эта мерзость! </h2>
НЕ РЕКОМЕНДУЕТСЯ:
также, для того, чтобы выровнять вправо параграф на «канве» атрибутом HTML align, Вы могли бы записать:
<P align="right">...параграф текста...
..параграф текста...что в таблице стиля могло бы быть:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
P.mypar {text-align: right}
</STYLE>
<BODY>
<P>...параграф текста... НЕ РЕКОМЕНДУЕТСЯ:
Чтобы выровнять вправо несколько параграфов, сгруппируйте их элементом DIV:
<DIV align="right"> <P>...текст первого параграфа... <P>...текст второго параграфа... <P>...текст третьего параграфа... </DIV>
В таблице стиля свойство выравнивания текста наследуется от предка, поэтому Вы можете использовать:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
DIV.mypars {text-align: right}
</STYLE>
<BODY>
<DIV>
<P>...текст первого параграфа...
<P>...текст второго параграфа...
<P>. ..текст третьего параграфа..
</DIV>
..текст третьего параграфа..
</DIV>Чтобы выровнять по центру весь документ:
<HEAD>
<TITLE>Что за прелесть эта мерзость!</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...тело выровнено по центру...
</BODY>Элемент CENTER полностью эквивалентен определению элемента DIV
15.1.3 Плавающие объекты
Изображения и объекты могут появляться непосредственно «in-line» или «всплывать» к одной из сторон страницы, изменяя временно поля текста, который может обтекать объект по любой его стороне.
«Всплывание» объекта
Атрибут align объектов, изображений, таблиц, фрэймов и т.п. заставляет объект прижиматься к левому или правому полю страницы. Плавающие объекты обычно начинают новую строку.
Этот атрибут принимает следующие значения:
- left: прижимает объект к левому краю. Последующий текст обтекает объект справа.
- right: прижимает объект к правому краю. Последующий текст обтекает объект слева.
ПРИМЕР НЕ РЕКОМЕНДУЕМОГО ИСПОЛЬЗОВАНИЯ:
Пример показывает. как элемент IMG «всплывает» к левому краю «канвы».
<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">
Некоторые атрибуты выравнивания также допускают значение «center», которое не вызывает всплывания, а центрирует объект по отношению к краям. В то же время, у элементов P и DIV, значение «center» вызывает центрирование содержимого элементов.
Обтекание текста вокруг объекта
Ещё один атрибут, определённый для элемента BR, управляет обтеканием текста вокруг «всплывающего» объекта.
Определение атрибута
- clear = none|left|right|all [CI]
- Не рекомендуется. Определяет, где должна появиться следующая строка после обрыва строки, сделанного этим элементом. Этот атрибут учитывает плавающие объекты (изображения, таблицы и т.д.). Возможные значения:
- left: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
- right: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
- all: следующая строка начнётся в ближайшей строке под любым плавающим объектом у любого края.
Определяет, где должна появиться следующая строка после обрыва строки, сделанного этим элементом. Этот атрибут учитывает плавающие объекты (изображения, таблицы и т.д.). Возможные значения:Посмотрите на этот рисунок. Текст обтекает изображение по правому краю до обрыва строки элементом BR:
********* ------- | | ------- | image | --<BR> | | *********
Если атрибут clear установлен в none, линия, следующая после BR, начнётся сразу под ним у правого края изображения:
********* ------- | | ------- | image | --<BR> | | ------ *********
НЕ РЕКОМЕНДУЕТСЯ:
Если атрибут clear
********* ------- | | ------- | image | --<BR clear="left"> | | ********* -----------------
Используя таблицы стилей, Вы можете установить, чтобы все обрывы строки вели себя одинаково для объектов (изображений, таблиц и т.
д.), «всплывая» у левого края. В таблице стилей Вы можете записать:
<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>
| |
*********
-----------------
...
</BODY>
Последующие элементы HTML специфицируют информацию о шрифте. Хотя они и не относятся к не рекомендуемым, их использование менее предпочтительно, чем таблиц стилей.
15.2.1 Элементы стиля шрифта: TT, I, B, BIG, SMALL, STRIKE, S и U
Начальный тег: необходим, Конечный тег: необходим
Атрибуты, определённые в другом месте
- id, class (идентификаторы документа)
- lang (язык), dir (направление текста)
- title (название элемента)
- style (инлайн-стиль)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup (внутренние события)
Представление элементов стиля шрифта зависит от пользовательского агента (ПА).
- 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>. ..голубой курсив...
..голубой курсив...Элементы стиля шрифта должны вкладываться соответствующим образом. Отображение вложенных элементов стиля шрифта зависит от ПА.
15.2.2 Элементы модификатора шрифта: FONT и BASEFONT
FONT и BASEFONT не рекомендуется применять.
См. формальное определение в разделе Переходное ОТД.
Определения атрибутов
- size = cdata [CN]
- Не рекомендуется. Устанавливает размер шрифта. Возможные значения:
- Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от ПА. Не все ПА могут отобразить все семь размеров.
- Относительное увеличение размера шрифта. «+1» означает: на один размер больше. «-3» означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7.
- color = 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:
Базовый размер шрифта не применяется к заголовкам/headings, за исключением тех случаев, когда заголовки изменены с использованием относительного изменения размера в элементе FONT.
15.3 Горизонтальные линии: элемент HR
Начальный тег: необходим, Конечный тег: запрещён
Определение атрибутов
- align = left|center|right [CI]
- Не рекомендуется. Определяет горизонтальное выравнивание линии по отношению к окружающему контексту. Возможные значения:
- left: линия выравнивается влево.
- center: линия выравнивается по центру.
- right: линия выравнивается вправо.
По умолчанию align=center.
- noshade [CI]
- Не рекомендуется. Если этот булев атрибут установлен, он требует, чтобы ПА отображал горизонтальную линию сплошным цветом, а не традиционно с двухцветной «тенью».
- size = pixels [CI]
- Не рекомендуется. Определяет высоту линии. Значение по умолчанию зависит от ПА.
- width = length [CI]
- Не рекомендуется. Определяет ширину линии. Ширина по умолчанию — 100%, т.е. линия растянута по ширине всей «канвы».
Атрибуты, определённые в другом месте
- id, class (идентификаторы документа)
- lang (язык), dir (направление текста)
- title (название элемента)
- style (инлайн-стиль)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
Элемент HR отображает горизонтальную линию в ПА.
Величина свободного пространства под и над горизонтальной линией зависит от ПА.
НЕ РЕКОМЕНДУЕТСЯ:
В этом примере линия центрируется, размер установлен в половину доступной ширины между краями страницы.
Верхняя линия имеет толщину по умолчанию, а две нижние — по 5 пикселов. Нижняя линия должна отображаться сплошным цветом без тени:
<HR align="center"> <HR size="5" align="center"> <HR noshade size="5" align="center">
Эти линии должны выглядеть примерно так:
Вертикальное и горизонтальное выравнивание по центру на HTML и CSS
Допустим есть информационный блок на сайте или форма для входа. И возникает задача поместить этот блок точно в центре вне зависимости от разрешения экрана. Существует множество способов горизонтального и вертикального выравнивания. Рассмотрим наиболее простой из них.
Выровнять объект по горизонтали несложно для этого достаточно использовать спецификацию CSS margin. Вспомогательной здесь является спецификация display. Все, что потребуется создать это контейнер div с соответствующими параметрами:
<div>Выравниванием содержимое по центру</div>
Параметр спецификации display table указывает на то, что объект якобы является блочной таблицей.
Итак, горизонтальное выравнивание по центру оказалось несложным. Далее предстоит сделать то же самое, но еще и по вертикали.
Для этого нужно будет добавить еще один контейнер <div>. Также нужно использовать спецификацию display, но уже с параметром table-cell, якобы указывая на ячейку таблицы. В таблице же параметром, отвечающим за положение по вертикали является vertical-align. Итак, используя все спецификации получаем следующий код:
<div><div>Выравниванием содержимое по центру</div></div>
Обращаем ваше внимание на то, что в первом контейнере div для стилей добавлена еще спецификация height равная 100%. Тем самым мы указываем на то, что необходимо использовать именно высоту всей страницы.
Еще нужно обратить внимание на спецификацию vertical-align:middle. Дело в том, что если написать в заголовке html 5 документа по стандарту <!DOCTYPE HTML> вышеуказанный код перестает работать. Проблема решается указанием высоты для тэгов html и body.
Причем для второго нужно указать не 100%, а несколько меньше, так как появляется вертикальная полоса прокрутки.
Итак, с учетом всех изменений код по горизонтальному и вертикальному выравниванию будет выглядеть следующим образом:
<!DOCTYPE HTML>
<html>
<head>
<style>
html { height: 100%; }
body { height: 95%; }
</style>
</head>
<body>
<div>
<div>Выравниванием содержимое по центру
</div></div>
</body>
</html>
Существуют и другие способы выравнивания по горизонтали и по вертикали, но данный является одним из наиболее простых.
При выравнивании объекта по центру часто нужно использовать внешние или внутренние отступы в html на css для его смещения.
Поделиться в соц. сетях:
Выравнивание элементов. justify-content | Руководство по Flexbox (Примеры)
- Что такое Flexbox. Flex Container
- Макет страницы на Flexbox
- Направление flex-direction
- flex-wrap
- flex-flow. Порядок элементов
- Выравнивание элементов. justify-content
- Выравнивание элементов. align-items и align-self
- Выравнивание строк и столбцов. align-content
- Управление элементами. flex-basis, flex-shrink и flex-grow
- Многоколоночный дизайн на Flexbox
Flex ContainerИногда мы можем сталкиваться с тем, что пространство flex-контейнеров по размеру отличается от пространства, необходимого для flex-элементов. Например:
- flex-элементы не используют все пространство flex-контейнера
- flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.
Для управления этими ситуациями мы можем применять свойство justify-content. Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца — по вертикали) и принимает следующие значения:
flex-start: значение по умолчанию, при котором первый элемент выравнивается по левому краю контейнера(при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее.flex-end: последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далееcenter: элементы выравниваются по центруspace-between: если в стоке только один элемент или элементы выходят за границы flex-контейнера, то данное значение аналогично flex-start. В остальных случаях первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). Все оставшееся пространство между ними равным образом распределяется между остальными элементамиspace-around: если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center. В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами.
Выравнивание для расположения элементов в виде строки:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flexbox в CSS3</title>
<style>
.flex-container {
display: flex;
border: 1px #ccc solid;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.flex-item {
text-align: center;
font-size: 1em;
padding: 1.5em;
color: white;
}
.color1 {
background-color: #675ba7;
}
.color2 {
background-color: #9bc850;
}
.color3 {
background-color: #a62e5c;
}
.color4 {
background-color: #2a9fbc;
}
.color5 {
background-color: #f15b2a;
}
</style>
</head>
<body>
<h4>Flex-end</h4>
<div>
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
</div>
<h4>Center</h4>
<div>
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
</div>
<h4>Space-between</h4>
<div>
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
</div>
<h4>Space-around</h4>
<div>
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
</div>
</body>
</html>
Выравнивание при расположении в виде столбцов:
См. также
также- Что такое Flexbox. Flex Container
- Макет страницы на Flexbox
- Направление flex-direction
- flex-wrap
- flex-flow. Порядок элементов
- Выравнивание элементов. justify-content
- Выравнивание элементов. align-items и align-self
- Выравнивание строк и столбцов. align-content
- Управление элементами. flex-basis, flex-shrink и flex-grow
- Многоколоночный дизайн на Flexbox
Выравнивание radio-button и текста по вертикали
Даже когда занимаешься версткой довольно долго, иногда некторые простые моменты могут отнять некоторое время. Один из таких для меня было то, что когда выводишь рядом radio-button и текст к нему, то текст получается немного ниже, чем следовало бы. И лично меня это немного раздражало и поэтому я решил выровнять текст и радио-кнопку по вертикали по центру, чтобы они смотрелись красиво.
В исходном варианте всё выглядело так:
<input type="radio" value="1" /> test radio-button
На экране (при увеличении масштаба) это выглядит так:
Т.
е. видно, что текст чуть ниже, чем нужно. Как же выровнять текст относительно radio-button по вертикали, чтобы он был по середине, как и сам radio-button. Чтобы каждый раз не искать решение когда оно потребуется, я и написал эту заметку.
Есть несколько вариантов как сделать выравнивание. Но я приведу на мой взгляд самый простой и самый короткий способ, как говорится без всяких заморочек.
Выравнивание radio-button по вертикали в одну линию с текстом
Этот способ работает во всех современных браузерах.
<input type="radio" value="1" /> test radio-button
Выглядеть после выравнивания будет так:
Если вы применяете какие-то особенные шрифты или просто хочется немного сместить радио кнопку по вертикали, можно воспользоваться таким тоже простым вариантом:
<input type="radio" value="1" /> test radio-button
Результат будет такой:
В интернете есть и другие варианты выравнивания.
Выравнивание radio-button с помощью таблицы
<table border="0">
<tr>
<td><input type="radio" value="1" /></td>
<td>test radio-button</td>
</tr>
</table>
Однако по-моему это очень громоздкий вариант, да и устаревший очень.
Выравнивание данных в html
Выравнивание контента на странице — необходимость которая придает странице внешний вид и размещение злементов по краям, или по центру.
Выравнивание данных страницы производится тегом <center>данные</center>
| Здесь текст расположен посередине. Посередине будет и фото. | <center>Здесь текст расположен посередине</center> <center>Посередине будет и фото</center> <center><img src=»Image/20-20.jpg» width=200 height=120 border=1></center> |
Ваш материал будет помещен посередине страницы.
Этот пример применим страницы без таблицы.
Если у вас страница с таблицей,то выравнивание будет внутри той ячейки где вы вписали тег выравнивания.Что бы поместить материал по вертикали страницы, то
применяется тег
<td valign=»?»> со значениями : top, middle, или bottom (верх,середина или низ).
Для того,что бы разместить данные по горизонтали применяется тег <td align=?> со значениями left, center, или right (влево,середина или вправо).
| Здесь текст расположен посередине. Посередине будет и фото. | <table Border=1>
<tr>
<td Align=»center»>Здесь текст расположен посередине Посередине будет и фото <img src=»Image/20-20.jpg» width=200 height=120 border=1> </td> </tr> </table> |
Расстояние между рамками двух смежных ячеек, как по горизонтали, так и по вертикали <table cellspacing=»?» со значением 0-без разрыва и 1,2.
.. и далее.
Также можно задать расстояние между данными ячейки и ее рамкой
<table cellpadding=»?»>.Значение определяется в пикселях.
<img src=»имя картинки» hspase=»?»> задает ширину отступа слева
и справа от изображения.
<img src=»имя картинки» vspase=»?»>задает ширину отступа сверху и снизу от изображения.
<img src=»имя картинки» align=»?»> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center;(слева,справа,по центру).
<td colspan=?> — Указывает кол-во столбцев которое объединено в одной ячейке.
<td rowspan=?> — Указывает кол-во строк которое объединено в одной ячейке.
<td nowrap> — Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
Выравнивание, стили шрифта и горизонтальные линии документах HTML
Выравнивание, стили шрифта и горизонтальные линии документах HTML В этом разделе рассматриваются элементы и атрибуты HTML, которые используются для визуального форматирования элементов.
Многие из них не рекомендуется применять.
15.1 Форматирование
15.1.1 Цвет фона
Определение атрибута
- bgcolor = цвет [CI]
- Не рекомендуется. Этот параметр устанавливает цвет фона документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона «канвы» тела документа (элемент BODY ) или таблицы (элементы TABLE , TR , TH и TD ). Дополнительные услуги, устанавливающие цвет текста, Программу № BODY .
Этот атрибут не рекомендуется использовать для определения цвета фона. Лучше использовать таблицы стилей.
15.1.2 Выравнивание
Можно выравнивать блок элементов (таблицы, изображения, объекты, параграфы и т.п.) на «канве» с помощью атрибута align . Хотя этот атрибут может быть установлен для многих элементов HTML, диапазон его значений может отличаться, в зависимости от элемента.
Здесь мы обсуждаем только
значение атрибута «выравнивание» для текста.
Определение атрибута
- выровнять = слева | по центру | справа | по ширине [CI]
- Не рекомендуется. Этот атрибут определяет горизонтальное окружение элемента по отношению к кающему контексту. Возможные значения:
- слева : строки текста выравниваются по левому краю;
- центр : строки текста выравниваются по центру;
- правый : строки текста выравниваются по правому краю;
- оправдать : строки текста выравниваются по обоим полям.
Значение по умолчанию зависит от базового направления текста.Для направления слева направо — это align = left , для направления справа налево — по умолчанию align = right .
НЕ РЕКОМЕНДУЕТСЯ:
Здесь заголовок центрируется.
Что за прелесть эта мерзость!
Используя CSS (каскадные таблицы стилей), например, Вы можете достичь того же эффекта следующим образом:
<ГОЛОВКА>Что за прелесть эта мерзость! <ТЕЛО>Что за прелесть эта мерзость!
Учтите, что это будет действовать на все элементы h2 .
Вы можете ограничить область видимости стиля, установив атрибут class элемента:
<ГОЛОВКА>Что за прелесть эта мерзость! <ТЕЛО>Что за прелесть эта мерзость!
НЕ РЕКОМЕНДУЕТСЯ:
также, для того, чтобы выровнять вправо параграф на «канве» атрибутом HTML align , Вы могли бы записать:
...параграф текста ...
что в таблице стиля могло бы быть:
<ГОЛОВКА>Что за прелесть эта мерзость! <ТЕЛО>... параграф текста ...
НЕ РЕКОМЕНДУЕТСЯ:
Чтобы выровнять вправо несколько параграфов, сгруппируйте их элемент DIV :
... текст первого параграфа...
... текст второго параграфа ...
.
.. текст параграфа ...
В таблице стиля свойство выравнивания текста наследуется от предка, поэтому Вы можете использовать:
<ГОЛОВКА>Что за прелесть эта мерзость! <ТЕЛО>... текст первого параграфа ...
...текст второго параграфа ...
... текст параграфа ..
Чтобы выровнять по центру весь документ:
<ГОЛОВКА>Что за прелесть эта мерзость! <ТЕЛО> ... тело выровнено по центру ...
..
<ТЕЛО>
Следующее описание является лишь информативным.
.. голубой курсив ... 
Устанавливает цвет текста.
Определяет высоту линии. Значение по умолчанию зависит от ПА.
Этот способ представления текста позволяет пользователю легко отыскивать взглядом новую систему и комфортно читать большой текст.
К основному тексту такой способ выравнивания не рекомендуется. Читать большой объем такого текста неудобно.