Выравнивание элементов в HTML. CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html Атрибут align в html обозначает
Как я и обещал ранее, в этом уроке вы узнаете как можно выровнять по горизонтали содержимое любого 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, а подраздела оставьте неизменным.
- Напишите под каждым заголовком по одному параграфу, причем текст каждого из них должен занимать не меньше трех строк при просмотре в браузере.
- Выровняйте второй параграф по центру, третий - по правой стороне, а четвертый по обоим.
До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.
Выравнивание элементов - это , которые просто необходимо знать при . Первое, что необходимо сделать - это набрать простейшей страницы.
Ещё когда-то давно появился тег
Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега
:
Заголовок 1-го уровня, выравненный по центру
Это был тег
Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML
. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега Давайте сейчас напишем тот же HTML-код
, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю. Как видите, всё работает. Советую Вам также поменять значения атрибута "align
", чтобы посмотреть на другие виды выравнивания содержимого контейнеров. Другой способ выравнивания элементов HTML
- это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей. А пока Ваша страница должна выглядеть так: С уважением, Михаил Русаков. P.S.
Если Вы хотите узнать больше по HTML
, то посмотрите мой бесплатный курс с примером создания сайта на HTML
: Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задаётся атрибутом align
. Данный атрибут устарел, взамен используйте стили. В табл. 1 перечислены возможные значение атрибута align
и результат его использования.
В таблице браузеров применяются следующие обозначения. Число указывает версию браузреа, начиная с которой элемент поддерживается. Выравнивание блока текста по краю. Вместо этого атрибута необходимо использовать стили
Duis te feugifacilisi. Duis autem dolor in
hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.
Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en
commodo consequat. ✖
В таблице браузеров применяются следующие обозначения. Число указывает версию браузреа, начиная с которой элемент поддерживается. Здравствуйте, уважаемые читатели блога сайт. Сегодня мы продолжаем изучать и у нас на очереди свойства text-decoration, vertical-align, text-align, text-indent и ряд других, которые помогают оформлять внешний вид текстов в Html коде. В прошлой статье мы рассмотрели свойства , которые предназначаются для настройки внешнего вида шрифтов при . Ну, а еще раньше мы во всех подробностях рассмотрели все типы , узнали как их можно группировать и какие приоритеты расставляет браузер при их интерпретации. Правда, все это было разбито на несколько статей, поэтому чтобы не запутаться я советую изучать материалы в том порядке, как это приведено в . Как же в 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. Практически для всех элементов в 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 свойств для визуального оформления). 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 файлик и заключив любой фрагмент текста в подобные теги: Удачи вам! До скорых встреч на страницах блога сайт Вам может быть интересно
Заголовок 1-го уровня, выравненный по центру
Заголовок 1-го уровня, выравненный по правому краю
Синтаксис
Значения
Табл. 1. Использование значений атрибута align
Значение
Описание
Пример
bottom
Выравнивание нижней границы изображения по окружающему тексту.
left
Выравнивание изображения по левому краю окна.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle
Выравнивание середины изображения по базовой линии текущей строки.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right
Выравнивание изображения по правому краю окна.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Значение по умолчанию
Пример
Этот текст обтекает рисунок по его левому краю.Браузеры
Описание
Синтаксис
Значения
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается
по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
является наиболее популярным на сайтах, поскольку позволяет пользователю легко
отыскивать взглядом новую строку и комфортно читать большой текст.
center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна
браузера или контейнера, где расположен текстовый блок. Строки текста словно
нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный
способ выравнивания активно используется в заголовках и различных подписях,
вроде подрисуночных, он придает официальный и солидный вид оформлению текста.
Во всех других случаях выравнивание по центру применяется редко по той причине,
что читать большой объем такого текста неудобно.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает
в роли антагониста предыдущему типу. А именно, строки текста равняются по
правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен,
а именно с него начинается чтение новых строк, такой текст читать труднее,
чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому
краю применяется обычно для коротких заголовков объемом не более трех строк.
Мы не рассматриваем специфичные сайты, где текст приходится читать справа
налево, там возможно подобный способ выравнивания и пригодится. Но где вы
у нас в стране видели такие сайты.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому
и правому краю. Чтобы произвести это действие браузер в этом случае добавляет
пробелы между словами.
Значение по умолчанию
Пример. Выравнивание текста
Браузеры: Настольные
Мобильные
?
Internet Explorer
Chrome
Opera
Safari
Firefox
1
1
1
1
1
Android
Firefox Mobile
Opera Mobile
Safari Mobile
1
1
6
1
Браузеры
Text-decoration, text-align, text-indent в CSS
Vertical-align — вертикальное выравнивание
Text-transform, letter-spacing, word-spacing и white-space
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 элементов
