Контакты

CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html. Выравнивание элементов в HTML

  • 28.05.2019

Для изображений стандарты не определяют принятого по умолчанию выравнивания по отношению к тексту и другим изображениям в той же строке – не всегда можно предсказать, как эти компоненты будут выглядеть.1 В HTML-документах изображения обычно расположены «в линию» только с одной строкой текста. Как принято в печатных средствах массовой информации текст их «обтекает», так что с изображением могут соседствовать несколько строк, а вовсе не одна.

К счастью, создатели документов способны отчасти управлять выравниванием изображений по отношению к окружающему тексту с помощью атрибута align тега . Стандарты HTML и XHTML определяют пять значений для атрибута align: left, right, top, middle, bottom. Значения left и right заставляют текст обтекать изображение, смещенное к соответствующему краю. Оставшиеся три выравнивают изображение в вертикальном направлении по отношению к окружающему тексту.

Все популярные броузеры, включая Opera, Firefox, Netscape и Internet Explorer, соглашаются с тем, что атрибут align=bottom является умолчанием вертикального выравнивания, и одинаково располагают картинки выше самого верхнего символа в строке текста, см. рис. 15.11.

В то же время броузеры расходятся во мнении, как располагать относительно текста изображения с атрибутом align=middle. На рис. 5.11 показано, что Netscape и Opera помещают изображение, ориентируясь на среднюю линию текста. Что касается броузеров Internet Explorer

Рис. 5.11. Стандартное выравнивание внедренных изображений

Рис. 5.12. Internet Explorer и Firefox совмещают среднюю линию изображения со средней линией самого высокого элемента, а не средней линией текста

и Firefox, они располагают изображение по средней линии самого высокого элемента, который не обязательно является текстовым (рис. 5.12).

Кроме того, броузеры в той или иной степени поддерживают пять дополнительных признаков вертикального выравнивания изображений: texttop, center, absmiddle, baseline и absbottom (кто не догадался об их смысле, поднимите руку):

Выражение align=texttop приказывает броузеру выровнять верхний край изображения с верхним краем самого высокого элемента текста в текущей строке. Иначе действует значение top, которое выравнивает верхний край изображения с верхним краем самого высокого элемента, текстового компонента или изображения в текущей строке. Если строка не содержит других изображений, выступающих над текстом, texttop и top имеют одинаковый эффект. Opera не поддерживает texttop, но другие популярные броузеры интерпретируют его строго в соответствии с этим описанием.

Впервые появившись в броузере Internet Explorer и Netscape, значение center интерпретируется в броузерах Internet Explorer, Netscape и Firefox точно так же, как и значение middle. Только не будем забывать, что значение middle каждый из них понимает по-своему. Opera игнорирует выражение align=center.

Если вы присвоите атрибуту align тега значение absmiddle, броузер выставит абсолютную середину изображения против абсолютной середины текущей строки. Не так действуют значения middle и center, которые выравнивают середину изображения с базовой линией текущей строки текста. В то время как Netscape и Opera не проводят разницы между absmiddle и middle, Firefox и Internet Explorer используют эти значения для избирательного выравнивания изображений по средним линиям. Иными словами, Firefox и Internet Explorer воспринимают признак absmiddle так же, как Netscape воспринимает middle.

Рис. 5.13. При выравнивании изображений с атрибутом alingn=absbottom броузеры принимают во внимание нижние выносные элементы

bottom и baseline (принимаются по умолчанию)

Значения bottom и baseline имеют тот же эффект, как если бы вы не включили атрибут выравнивания совсем. Броузер выравнивает нижний край изображения с базовой линией текста. Не следует путать это с действием значения absbottom, которое учитывает и те части букв, что спускаются ниже базовой линии.1 (Если вы все еще держите руку поднятой, можете ее опустить.)

Выражение align=absbottom предлагает броузеру выровнять нижний край изображения с истинным нижним краем текста в текущей строке. Истинный нижний край – это самая нижняя точка текста с учетом всех нижних выносных элементов (например, нижняя часть символа «y»), даже если таковых в строке нет. Базовая линия проходит по нижнему краю «v» в символе «y». Opera, носитель стандарта, игнорирует значение absbottom, а другие популярные броузеры обращаются с ним согласно описанию (рис. 5.13).

Используйте top и middle для совмещения пиктограмм, маркеров списков и других специальных изображений с близлежащим текстом. В других случаях align=bottom (выбирается по умолчанию) достигает лучшего внешнего вида. Выравнивая одно или несколько изображений в строке, выбирайте то значение атрибута, которое позволит добиться наилучшего внешнего вида вашего документа.

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

Текст…

. Когда мы выводим 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.

Здравствуйте, уважаемые читатели блога сайт. В этой статье мы продолжаем изучать основы стилевой разметки CSS и рассмотрим свойства vertical-align, text-align, text-indent и некоторые другие, предназначенные для оформления текста html.

Выравнивание текста с помощью CSS

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

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:

text-align: left|right|center|justify

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

По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.

Примеры использования свойства:

p { text-align: justify }
h1 { text-align: center }

Следующее свойство CSS text-ident задает отступ для красной строки , например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:

text-indent: <отступ>

Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:

p { text-ident: 10px; }

Далее рассмотрим вертикальное выравнивание — свойство vertical-align . Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|<величина>

Рассмотрим каждое значение подробнее:

  • baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
  • sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
  • super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
  • top — выравнивание фрагмента текста по верхнему краю родительского элемента;
  • text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
  • middle — выравнивание центра фрагмента текста по центру родительского элемента;
  • bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
  • text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:

Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что и запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.

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

Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:

  • top — для выравнивания содержимого по верхней границе ячейки;
  • bottom — для выравнивания содержимого по нижней границе ячейки;
  • middle — для выравнивания по центру ячейки (используется по умолчанию).

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

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег 

, помещенный в него текст отображается как есть, со всеми пробелами.


Свойство white-space имеет следующий синтаксис:


white-space: normal|pre|nowrap|pre-wrap|pre-line


Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.


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


Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега 
 позволит перенести текст на новую строку.


Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.


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


Пример использования:


p { white-space: pre; }


Далее рассмотрим параметр word-wrap
, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:


word-wrap: normal|break-word


Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:


p { word-wrap: break-word; }


Параметры тени у текста — свойство text-shadow


Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использования свойства text-shadow позволяет заметно оживить web страницу. Синтаксис:


text-shadow: none | <цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]


Значение none отменяет добавление тени у текста и установлено по умолчанию.


Цвет тени
 задается в любом доступном CSS формате и является не обязательным параметром. По умолчанию цвет тени совпадает с цветом текста.


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


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


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


Рассмотрим пример:


p {

text-shadow: red 1px 1px 2px;

font-size: 2em;

}


И вот так будет выглядеть текст абзаца p с применением данного правила стиля в Internet Explorer 11:




На этом буду завершать статью. Чтобы узнать больше о свойствах CSS не забудьте подписаться на обновления блога и читайте статьи из раздела « ». До новых встреч!


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

 я сейчас Вам не советую его применять, ввиду наличия более современных способов, но не упомянуть я о нём не могу. Использовать его очень и очень просто. Всё, что Вам необходимо выравнять по центру, Вы помещаете внутри этого тега. Вот, например, тут мы выравниваем заголовок 1-го уровня по центру.
 

 

 
Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега 

:
 

 
Заголовок 1-го уровня, выравненный по центру


 
 
Это был тег 

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

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

. То есть всё, что необходимо поместить в определённый контейнер помещается внутри тега 

. А уже у этого тега есть атрибут "align
", значение которого и определяет положение данного контейнера. Бывают три значения: "left
", "center
", "right
". По умолчанию, стоит "left
", впрочем, думаю, что Вас это не удивляет.
Давайте сейчас напишем тот же HTML-код
, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю.
 

 


 
 
Как видите, всё работает. Советую Вам также поменять значения атрибута "align
", чтобы посмотреть на другие виды выравнивания содержимого контейнеров.
Другой способ выравнивания элементов HTML
 - это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей.
А пока Ваша страница должна выглядеть так:
 




 
Заголовок 1-го уровня, выравненный по центру


 


 
Заголовок 1-го уровня, выравненный по правому краю


 


 
С уважением, Михаил Русаков.
P.S.
 Если Вы хотите узнать больше по HTML
, то посмотрите мой бесплатный курс с примером создания сайта на HTML
: 


Описание

 
Выравнивание блока текста по краю.
Вместо этого атрибута необходимо использовать стили

 
Синтаксис

 
Значения

 left
 Выравнивание текста по левому краю. В этом случае строки текста выравнивается
 по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
 является наиболее популярным на сайтах, поскольку позволяет пользователю легко
 отыскивать взглядом новую строку и комфортно читать большой текст.
 center
 Выравнивание текста по центру. Текст помещается по центру горизонтали окна
 браузера или контейнера, где расположен текстовый блок. Строки текста словно
 нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный
 способ выравнивания активно используется в заголовках и различных подписях,
 вроде подрисуночных, он придает официальный и солидный вид оформлению текста.
 Во всех других случаях выравнивание по центру применяется редко по той причине,
 что читать большой объем такого текста неудобно.
 right
 Выравнивание текста по правому краю. Этот способ выравнивания выступает
 в роли антагониста предыдущему типу. А именно, строки текста равняются по
 правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен,
 а именно с него начинается чтение новых строк, такой текст читать труднее,
 чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому
 краю применяется обычно для коротких заголовков объемом не более трех строк.
 Мы не рассматриваем специфичные сайты, где текст приходится читать справа
 налево, там возможно подобный способ выравнивания и пригодится. Но где вы
 у нас в стране видели такие сайты.
 justify
 Выравнивание по ширине, что означает одновременное выравнивание по левому
 и правому краю. Чтобы произвести это действие браузер в этом случае добавляет
 пробелы между словами.
 
Значение по умолчанию

 
Пример. Выравнивание текста




 
 
 Тег P, атрибут 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.

 



Браузеры: Настольные
 Мобильные
 ?



Internet Explorer

Chrome

Opera

Safari

Firefox



1

1

1

1

1



Android

Firefox Mobile

Opera Mobile

Safari Mobile



1

1

6

1



✖


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

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







            

         
		 

		 

		
	

	
Статьи по теме

		

	
		

				

		 
	

			   
	   



		

			
Последние статьи

			
		

		
		

		        

            
Популярные статьи

            
        

        		

		

		        

            
Выбор редакции
rzdoro.ru