Когда Вы печатаете текст в программе Microsoft Word, он печатается по левому краю. Но довольно часто требуется сместить его в другую сторону.

Например, заголовок принято смещать в центр страницы, а чтобы напечатать шапку документа, зачастую нужно сместить текст вправо. Эта процедура называется выравнивание.

— это то, как текст расположен на странице. Он может быть расположен по центру, по левому и правому краю, по ширине. Для этого в программе Word есть специальные кнопки вверху:

О них мы поговорим чуть позже. А пока несколько слов о том, как не нужно выравнивать текст.

Неправильное выравнивание текста

Многие люди по незнанию выравнивают текст неправильно - при помощи кнопки пробел на клавиатуре или кнопки Tab.

Такое смещение считается ошибкой, так как расстояние от левого поля делается на «глазок». Из-за этого оно чаще всего больше, чем нужно. А если Вы таким образом выровняете текст по правому краю, то возникнет масса проблем при его редактировании. Да и сам способ весьма неудобный - приходится много раз нажимать кнопку пробел или Tab на клавиатуре.

Чем это грозит? Например, потеряй деловой репутации. Ведь можно очень быстро проверить оформление текста. Для этого достаточно нажать вот на эту кнопку вверху программы Microsoft Word:

В тексте появятся точки и непонятные значки. Вот точками показываются пробелы. И если Вы неправильно выровняете текст, при такой проверке это сразу же будет видно по множеству точек перед ним.

Чтобы вернуть все обратно - убрать точки и непонятные значки, - еще раз нажмите на кнопку

Между прочим, документ с неправильным выравниванием могут не принять в некоторых организациях.

Как выровнять текст

А сейчас научимся правильно выравнивать текст. Кстати, сделать это можно уже после того, как текст напечатан. Рекомендую именно так и поступать - это и проще, и быстрее.

Для смещения текста в программе Word есть четыре кнопки. Находятся они вверху.

— эта кнопка выравнивает текст по левому краю

— вот эта выравнивает по центру

— по правому краю

— по ширине (делает текст ровным с двух сторон)

А теперь попробуем правильно сместить текст. Для начала напечатайте несколько слов в программе Word. Затем выделите их. Для этого наведите курсор (стрелку или палочку) в самое начало или в самый конец текста. Затем нажмите левую кнопку мыши и, не отпуская ее, тяните в другой конец. Когда текст закрасится другим цветом (обычно черным или синим), это будет означать, что он выделен.

После выделения нажмите по кнопке, которая выравнивает текст по центру. Напечатанные Вами слова должны сместиться в середину страницы.

Вам может показаться, что это неправильный центр. На самом деле, все верно. Ведь поле (отступ) с левой стороны больше, чем с правой.

Таким же способом попробуйте выровнять текст по правому краю.

Что касается кнопки «По ширине». Если у Вас немного текста (пару слов), то Вы не увидите отличий от кнопки «По левому краю» - слова так же сместятся влево. А вот если у Вас несколько абзацев, то текст выровняется по двум сторонам листа - и по левой, и по правой. То есть он будет ровным с двух сторон.

Пример текста, выровненного по левому краю:

Тот же текст, только выровненный по ширине:

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

Текст выравнивается при помощи атрибута CSS text-align , который может принимать следующие значения:

center - по центру
justify - по ширине
left - по левому краю
right - по правому краю

Атрибут text-indent задает отступ "красной строки" - первой строки нового абзаца.

Для форматирования текста используют еще такие атрибуты:

line-height - высота строки. Возможные значения:
- n px,pt,ex,em,in,mm,cm,pc
- n %
margin - отступ от внешнего края элемента до внутреннего края родительского элемента. Возможны варианты (margin-top; margin-left; margin-bottom; margin-right). Значения:
- n px,pt,ex,em,in,mm,cm,pc
- n %
padding - отступ от внутреннего края элемента до его содержимого. Возможны варианты (padding-top; padding-left; padding-bottom; padding-right). Значения:
- n px,pt,ex,em,in,mm,cm,pc
- n %
vertical-align - вертикальное выравнивание (актуально для таблиц). Значения:
- top - выравнивание по верхней части
- middle - выравнивание по середине
- bottom - выравнивание по нижней части
- text-top - выравнивание по верхнему краю текста
- text-bottom - выравнивание по нижнему краю текста
white-space - способ отделения слов друг от друга
- normal
- nowrap (переносы строк игнорируются)

Ниже представлено несколько примеров выравнивания текста, с которыми разобраться не составит особого труда. Для лучшего понимания работы атрибутов выравнивания текста, попробуйте самостоятельно отформатировать несколько абзацев.

Пример выравнивания текста: Пример №6

HTML-код страницы :

Untitled

Золотое кольцо России

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

Еще три мощных атрибута для форматирования текста:

line-height - определяет межстрочный интервал. Значение должно быть больше высоты шрифта, в противном случае значение автоматически подгоняется под высоту текста. Значения:
- n px,pt,ex,em,in,mm,cm,pc
- n %
word-spacing - интервал между словами. Значения:
- n px,pt,ex,em,in,mm,cm,pc
letter-spacing - интервал между буквами. Значения:
- n px,pt,ex,em,in,mm,cm,pc

Пример форматирования текста: Пример №7

HTML-код страницы :

Untitled

Золотое кольцо России

Теперь полученные знания применим во внешнем листе стилей, отформатировав тег абзаца:

Пример форматирования текста внешним листом стилей: Пример №8

HTML-код страницы :

Untitled

Золотое кольцо России

CSS файл :

body {font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: gray; font-size: 8pt;} H1 {color: green; font-size: 130%;} p {text-indent: 15px; font-size: 10pt; line-height: 150%; text-align: justify; letter-spacing: 7px;}

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

Тег

В HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .

Выравнивание абзаца

Можно выровнять абзац, используя атрибут align со следующими значениями:

Скопируйте следующий код в файл .html .

Выравнивание абзаца с помощью атрибута Style

Этот абзац выровнен по центру

Этот абзац выровнен по правому краю

Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю - правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.

В окне браузера HTML код абзаца выглядит следующим образом.

Интервалы между строками

Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:

line-height: normal|number|length|initial|inherit;

Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:

Установка междустрочного интервала с помощью атрибута Style

В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине.

Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой.

Ниже приведено несколько различных способов использования значения line-height для атрибута style :

: Устанавливает межстрочный интервал 13 пикселей;

: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;

: Устанавливает высоту строки 14 пикселей.

Отступы

Я использовал термин »отступы «, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.

Ниже приводится пример абзацев с отступом слева и справа:

Отступы абзацев с помощью атрибута Style

Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.

Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.

А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.

Отступы между абзацами (отступ перед и отступ после абзаца)

В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента

Padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега

Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:

Отступы между абзацами с помощью атрибута Style

Для этого абзаца не заданы отступы до или после. Это обычный абзац, выровненный по ширине. Как вы уже знаете, мы можем выровнять абзац по ширине с помощью кода style=”text-align:justify” внутри тега.

Этот абзац выронен по ширине. Он также имеет отступ в 10 пикселей перед абзацем и 50 пикселей после. Внутри тега я задал 3 стиля.

Это обычный абзац без отступов и с выравниванием по умолчанию.

Что следует помнить

Абзац HTML может быть выровнен с помощью атрибута align или стиля text-align ;
HTML будет отображаться по-разному в зависимости от размеров экрана, размеров окна браузера;
Добавление дополнительных пробелов или пустых строк в HTML-код не влияет на вывод. Браузер удаляет все лишние пробелы;
Теги задают, что должно отображаться, а стили определяют, как это должно выводиться;
Стили могут быть заданы тремя различными способами — встроенные (внутри тегов ), внутренние (внутри того же HTML-файла с помощью элемента