CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html. Абзацы в html и атрибут выравнивания Значение атрибута align задает выравнивание вправо

10.10.2023

Как я и обещал ранее, в этом уроке вы узнаете как можно выровнять по горизонтали содержимое любого HTML-тега на странице не используя устаревший атрибут align . Как вы возможно уже догадались, мы опять будем использовать стили (CSS), а точнее наш любимый атрибут style .

Итак, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:

text-align:center - Выравнивание каждой строки по центру элемента, например параграфа.
text-align:left - Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).
text-align:right - Каждая строка прижимается к правой стороне.
text-align:justify - Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая - «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify , то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

Пример выравнивания содержимого тегов

Выравнивание содержимого тегов

Заголовок по центру.

Параграф по центру.

Результат в браузере

Заголовок по центру.

Текст параграфа прижимается вправо.

Параграф по центру.

Вообще, горизонтальное выравнивание применяется только к блочным тегам и ячейкам таблицы (о них поговорим позже). Хотя, с другой стороны, даже если вы попытаетесь, то не сможете применить его к встроенным (inline). Почему? А помните мы недавно выяснили, что ширина встроенного элемента равна его содержимому? Соответственно получается, что этому самому содержимому просто некуда будет выравниваться и браузер элементарно проигнорирует ваши «художества». :)

Домашнее задание.

Создайте заголовок статьи, двух ее разделов и одного подраздела в первом разделе. И пусть заголовок статьи располагается по центру страницы.
Установите для всей страницы шрифт Arial, а для всех заголовков - Times и пусть они будут написаны курсивом.
Цвет текста заголовка статьи поставьте #FF6600, разделов #6600FF, а подраздела оставьте неизменным.
Напишите под каждым заголовком по одному параграфу, причем текст каждого из них должен занимать не меньше трех строк при просмотре в браузере.
Выровняйте второй параграф по центру, третий - по правой стороне, а четвертый по обоим.

Как известно, Хабр использует «олдскульные» атрибуты тегов, допускающие форматирование текста и рисунков в статьях и комментариях авторами. Среди таких тегов оказался один, отсутствующий в стандартах W3C. Это - . Обнаружилось, что часть авторов «наивно» пользуется этим атрибутом, потому что другого редактор Хабра просто не предоставляет. Как ни странно, в части браузеров этот атрибут на Хабре поддерживается, хотя эксперименты с чистыми тестовыми страницами показывают, что чудес нет, в img он не работает.

Заинтересовал вопрос, в каких случаях атрибут поддерживается и что надо дописать в стилях, чтобы он начал поддерживаться везде. Если бы это заработало на сайте, мы поддержали бы наивное мнение, что это правильный атрибут, но, тем не менее, получили бы инструмент центрирования рисунков.

На самом деле, атрибут align=«center» в HTML предназначен для блочных элементов (div, p, ...) и относится не к ним самим, а к внутреннему содержанию элемента. Поэтому, если напишем

то центрирование работать будет (это показано ниже на тестовой странице рисунками с alt="рис.-под-тест ").

Но этого нельзя написать на Хабре, таковы правила парсера тегов.

Чтобы проверить, как это работает на Хабре, можно воспользоваться предпросмотром при написании комментария или в черновике статьи. Это не совсем точно будет совпадать с окончательным видом, но пользоваться для тестов можно.

Вот что увидим:

В большинстве браузеров, кроме Firefox, вторая картинка центрируется (если стили Хабра ещё не исправили), хотя тесты показывают , что этот атрибут браузерами не поддерживается (кроме редких исключений с доктайпами).
Почему же этот неправильный текст не работает везде, но работает на Хабре, причём не в Firefox?

UPD 25 янв. 2013 (через год):

Посмотрев на стили рисунка, находим причину.
img { display: block; margin: 0 auto !important; }
Да, на Хабре в файле all.css поддерживается этот финт превращения неправильного атрибута в «правильный». Именно эти свойства нужно иметь рисунку, чтобы начать центрироваться - быть блоком и центрироваться стилем margin: 0 auto; .

(А ведь те, кто знает, что такого атрибута нет, не могут сами догадаться, что он работает на Хабре - документации нет, тест в Fx не проходит. Я, например, чисто случайно узнал о его существовании, увидев в заметках aleksandrIt (почти в каждой аннотации), посмотрев через Chrome.)

Осталось разобраться, почему центрирование не работает в Firefox.

Дело за малым - тоже посмотреть стили (с помощью Firebug). Здесь обнаруживаем, что атрибут чудесным образом изменился на align=«middle» и даже ручное переименование не помогает его исправить. Браузер сам меняет неправильный атрибут на, «по его мнению», наиболее подходящий (вертикальное выравнивание в потоке строчных элементов). Поэтому правило стилей img перестаёт работать.

Следовательно, для полной поддержки браузеров на Хабре не хватает правила:
img, img{ display: block; margin: 0 auto !important; }

Тест чистой страницы с атрибутами

Чтобы посмотреть тестовую страницу проверки работы атрибута img align=«center» в разных браузерах, посетите ссылку spmbt.kodingen.com/habrahabr/testImgAlignCenter.htm . В Firefox будет выглядеть примерно так, в других браузерах несколько иначе. Картинки и блоки подкрашены, чтобы лучше различались. Реальных картинок нет, чтобы наблюдать подписи в ALT.

Сначала увидим под надписью «Основной тест» голубоватый блок "Пустой рис. " с искомым атрибутом и несрабатывание атрибута в изображении, что совершенно логично.
Одним кликом на ссылке «Включить исправляющие стили» можно увидеть применение полученных нами правил стилей, чтобы центрирование начало работать во всех браузерах.

Технические замечания. Ососбенный вид функции применения стилей addRules() вызвано желанием включить в исполнение скрипт в браузере IE8. (В IE9 не проверялось, но должно работать, как в остальных.) Без доктайпа в IE8 не будет работать правило margin: 0 auto, но заработают атрибуты align:right и left.

Что делать?

Такое правило специально для правки ошибки было прописано в стилях Habr ZenComment и независимо от них, в скрипте HabrAjax (Хабр-аджакс), после чего центрирование атрибутом align=«center» стало работать правильно во всех браузерах.

Для выводов вообще , надо сказать, что не следовало бы поддерживать мнение среди вебмастеров, что этот атрибут может работать в тегах IMG. Пусть время атрибутов прошло и все пользуются стилями, некоторым неопытным веб-строителям может запасть мнение, что такой атрибут существует.

UPD 25 янв. 2013 (через год): обнаружилось, что стили Хабра перестали поддерживать этот неправильный атрибут. Для его задействования на сайте пришлось дописать юзерстили так же, как раньше это было сделано для Firefox.

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы продолжаем изучать и у нас на очереди свойства text-decoration, vertical-align, text-align, text-indent и ряд других, которые помогают оформлять внешний вид текстов в Html коде.

В прошлой статье мы рассмотрели свойства , которые предназначаются для настройки внешнего вида шрифтов при .

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

Text-decoration, text-align, text-indent в CSS

Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался для выравнивания содержимого, например, абзацев P или заголовков).

Он имеет всего четыре возможных значения:

Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.

Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.

Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:

Text-align:justify;

По умолчанию горизонтальное выравнивание текста осуществляется по левому краю, т.е. специально писать text-align:left не нужно, если, конечно же, раньше вы не задавали другое выравнивание. Этот абзац я, кстати, выровнял по центру (center) опять же для наглядного примера, но тут, я думаю, все и так понятно.

Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя ) или с помощью процентов:

От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.

А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:

Text-indent:-1em;

Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов , т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).

Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).

Оно может иметь всего четыре значения:

Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, (они по умолчанию подчеркиваются).

Поэтому выделять что-то еще подчеркиванием (кроме гиперссылок) не есть хорошо, ибо у пользователей в подсознании записано, что раз подчеркнуто (а еще и цветом выделено) — значит по этому можно кликнуть для перехода. Но выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение и последующее за ним разочарование вашим ресурсом (он то думал, а оказалось что...).

Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):

Text-decoration:underline overline line-through;

Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел .

Vertical-align — вертикальное выравнивание

Дальше у нас идет вертикальное выравнивание — vertical-align. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Правда, для это означает немного другое — выравниваться по вертикали будет весь контент, который находится в этих ячейках.

Для Css правила vertical-align можно использовать следующие значения:

Строки по умолчанию выравниваются по базовой линии. Вот смотрите, я применил к этому фрагменту текста увеличение шрифта и эти два фрагмента выровнялись по базовой (нижней) линии. А вертикальное выравнивание с помощью vertical-align как раз и предназначено именно для изменения способа выравнивания строк.

Например, если я для того же увеличенного фрагмента текста пропишу vertical-align:baseline, то никаких изменений не произойдет, т.к. значение baseline используется для этого Css правила по умолчанию.

Кстати, в качестве значений для него можно использовать и числа, а надпись vertical-align:0 будет означать тоже самое, что и vertical-align:baseline, т.е. значение baseline эквивалентно нулю. Следовательно, если мы хотим указать какой-либо сдвиг в вертикальном выравнивании, то этот сдвиг будем указывать относительно базовой линии (или же нуля).

Можно написать так:

Vertical-align:10px;

И получим сдвиг фрагмента с увеличенным шрифтом вверх на 10 пикселей относительно базовой линии. Если напишем отрицательное значение:

Vertical-align:-10px;

То получим сдвиг фрагмента вниз относительно базовой линии. Из примеров видно, что из-за сдвига увеличилась высота строки, чтобы текст помещался в ней без наезда на соседнюю строку. Сдвиг можно также задавать в Em и Ex, ну, и в процентах, которые будут считаться от высоты линии этого элемента (помните в прошлой статье мы научились ее задавать с помощью ).

Для вертикального выравнивания содержимого ячеек таблиц в vertical-align следует использовать значения Top и Bottom для получения, соответственно, выравнивания содержимого по верхней и нижней границе ячейки (ну, а middle в ячейке таблицы используется как значение вертикального выравнивания по умолчанию).

А для шрифтовых элементов можно использовать text-top, text-bottom, middle. Давайте для примера применим к этому фрагменту текста значение:

Vertical-align:middle;

Что получилось в результате? По базовой линии обычного текста выровнялась средняя линия увеличенного фрагмента, т.е. мы получили вертикальное выравнивание по средней линии. Для text-top и text-bottom будет все аналогично. Вот так text-top , а так text-bottom .

Значения Css свойства vertical-align sub и super соответствуют под- и надиндексу, которые имели место быть в чистом Html (до использования CSS свойств для визуального оформления).

Text-transform, letter-spacing, word-spacing и white-space

None используется по умолчанию и означает, что символы в тексте изменяться никак не будут — как написано в Html, так и будут отображаться. Значение Uppercase для text-transform позволит трансформировать все буквы фрагмента в заглавные (пример показан в этом предложении , где использовалось правило text-transform:uppercase, а изначально буквы были написаны строчные).

Значение lowercase для Css правила text-transform позволит вам трансформировать все символы фрагмента в строчные, ну, а значение capitalize сделает все первые буквы слова заглавными (пример в этом предложении — text-transform:capitalize). Т.е. с помощью text-transform можно сделать все что угодно с обычным текстом, а потом запросто все вернуть обратно.

Поэтому, если у вас, например, стоит задача сделать все заголовки написанными только заглавными буквами, то в Html пишите их обычно, а заглавными их сделаете уже в CSS через text-transform:uppercase. Потом, если вы решите что-то поменять назад, то достаточно внести только маленькое изменение в стили, а не в содержимое всех 100500 заголовков на вашем сайте.

По умолчанию и letter-spacing, и word-spacing имеют значение Normal, ну или это тоже самое, что ноль (т.е. расстояние между символами и словами никак не изменяется). Величину же изменения расстояния в этих правилах можно будет указывать только в пикселах, либо Em или Ex, но никак не в процентах.

Однако, можно использовать как положительные (разрежение символов или слов), так и отрицательные значения (сближение символов или слов). Например, можно «вот так разредить символы в этой фразе» с помощью следующего Css правила:

Letter-spacing:0.4em;

Или же можно «вот так сблизить символы в этой фразе» с помощью:

Letter-spacing:-1px;

Тоже самое можно сказать и про word-spacing с одной лишь только разницей, что при этом расстояние будет изменяться уже между словами, как, например, в этой фразе, при помощи вот такой вот CSS конструкции :

Word-spacing:4em;

Аналогично можно использовать в word-spacing отрицательные значения для уменьшения расстояния между словами.

Ну, и последнее на сегодня Css правило, которое позволяет определенным образом оформлять текст в Html коде — это white-space . Отвечает оно за отображение пробельных символов на веб странице, которые имели место быть при написании Html кода.

Как вы помните из статьи про , браузер при разборе кода объединяет все пробелы, символы переноса строк и табуляции в один единственный пробел, и осуществляет перенос строк на веб странице именно по пробельным символам, которые имели место быть в коде.

Так вот, white space может принимать одно из трех значений:

Понятно, что по умолчанию используется значение Normal и в этом случае все отображается так, как я описал чуть выше. А вот при использовании значения Pre мы получим полную аналогию с использованием , т.е. на вебстранице текст будет отображен со всеми теми лишними пробельными символами, которые имели место быть при написании кода и переносы браузер уже по ним сделать не сможет.

Ну, а значение nowrap просто запретит браузеру переносить по тем пробельным символам, которые он найдет внутри фрагмента с CSS правилом white-space:nowrap. Попробовать, как все это работает, вы сможете и сами, создав простенький Html файлик и заключив любой фрагмент текста в подобные теги:

фрагмент подопытного текста

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Float и clear в CSS - инструменты блочной верстки
CSS - что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link
Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Background в CSS (color, position, image, repeat, attachment) - все для задания цвета фона или фоновой картинки Html элементов

Приветствую Вас Друзья! Сегодня мы поговорим о теге абзаце и об атрибуте выравнивания . В общем, весь контент на странице должен быть разбит по абзацам. Содержимое абзаца пишется между тегами

Текст…

. Когда мы выводим 2 последовательных абзаца, то между ними формируется невидимое поле что отталкивает их друг от друга. Тег является блочным тегом поэтому он занимают всю ширину страницы.

Для примера возьмем страницу с таким кодом:

Страница с параграфами.

Первый абзац: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Второй абзац: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.

Давайте посмотрим, как выглядит это дело в браузере:

Наверняка вы заметили, что в коде страницы есть тег strong, этот тег делает текст жирным.

Атрибуты тегов

Для каждого тега можно, в некоторых случаях даже нужно указать атрибуты. Через атрибут мы сообщаем браузеру как именно отображать тот или иной элемент на странице.

Атрибут указывается внутри скобки открывающего тега и имеет следующий синтаксис: имя_атрибута="значение"

Атрибут выравнивания

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

Содержимое параграфа.

У этого атрибута есть 4 значения:

1. Left – Выравнивает контент по левому краю. Это значение стоит по умолчанию. То есть если для абзаца не указываем атрибут align , то контент внутри абзаца по умолчанию, выровняется по левому краю. Это можно заметит в предыдущем примере.

2. Right – Выравнивает контент по правому краю.

Текст…

Вот как это выглядит в браузере:

3.Center - Выравнивает контент по центру страницы.

Текст…

4.Justify – Выравнивает контент по ширине страницы.

Текст…

Итоги урока:
Мы сегодня узнали, что такое абзац в html. Абзацы используются очень часто в html. Также узнали, что такое атрибут тега. И выучили атрибут выравнивания align. Который может принять одно из следующих значений: left (значение по умолчанию), right, center, justify.

HTML теги, определяющие выравнивание текста, отступ

Выровненный по ширине текст используется в типографии

В примере ниже показано, как выровнить текст по ширине страницы:

align="left"	align="right"
	С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
align="justify"	align="center"
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.	С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.