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

Тег

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

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

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

text-align: left|right|center|justify|initial|inherit;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отступы

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

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

Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут 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=”text-align:justify” внутри тега.

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

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

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

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

  А теперь пришло время таблиц!

  Для таблиц также можно использовать свойство css line- height . Оно задаст интервал в ячейках между строками текста. Однако в некоторых случаях нужно двигать именно ячейки, а не контент.

  Для реализации такого приема существует свойство border-spacing . Этот элемент работает только в том случае, если в другом табличном свойстве border-collapse указано раздельное отображение ячеек таблицы (border-collapse: separate ), т.е. двойная линия не убирается.

  Почему так происходит? border-spacing устанавливает расстояние от контента до границ элемента таблицы. По умолчанию рамка задается для каждого элемента своя. Если же используется свойство border-collapse: collapse , то происходит следующее: браузер анализирует табличное представление и удаляет двойные линии.

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

  

  У свойства border-spacing нет ключевых слов, поэтому значения указываются в виде единиц измерения. Можно установить как одно значение, так и два. Во втором случае первый параметр определит интервал по горизонтали, второй – по вертикали.

  Перейдем к практике. Информацию из предыдущего примера занесем в таблицу.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

  Глобализация Позитивные аспекты глобализации Усиление и стимулирование свободной конкуренции для активного развития технологий; Мировое разделение труда, которое способствует равномерному распределению важных ресурсов; Повышение уровня жизни человечества.

  Глобализация

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

  Рассматриваемые темы на этой странице:

  Первое с чего нужно начать исследование вопроса расстояние между строк, это с того, что это такое и как это свойство применять и изменять!

  Расстояние между строк определяет свойство:

  Измеряется расстояние между строк: пикселями, процентами и если применялось выше к основному тексту свойство font-size, то em.(1 em равен одному цифровому значению font-size).
  

  Теперь рассмотрим несколько примеров!

  Создадим класс Primer-line-height? С высотой шрифта 17px и межстрочным расстоянием равным 1 em, а второй вариант, em увеличим в два раза!

  Не забываем, совет, который есть на этой странице относительно стилей

  p.Primer-line-height {
  font-size: 17px;
  line-height: 1em;
  }

  Этот текст написан с межстрочным расстоянием е равным одному em, что равно одному цифровому размеру "font-size", т.е.= 17px

  p.Primer-line-height-1 {
  font-size: 17px;
  line-height: 2em;
  }

  Второй текст написан с межстрочным расстоянием е равным двум em, что равно двум размерам "font-size", т.е.= 2 х 17 = 34px

  C общими понятиями и примерами разобрались, теперь перейдем к более интересному!

  Теория – это конечно хорошо, но вот тут и начинается самое интересное! Применение теории к практике!

  Маленькое отступление:

  Я не буду вам рассказывать заново, про то, как мы,

  И сейчас, собственно, читаете текст, уже на той изменённой странице.

  Как уменьшить зазор между строк в Dreamweaver.

  Возникла ситуация, когда нужно уменьшить расстояние между строк на нашей странице.

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

  Для того, чтобы разобраться, мы возьмём в качестве примера данную страницу!

  Для того, чтобы увидеть код данной страницы нажимаем ctrl + U ищем строчку 287 – это наши первые подозреваемые. Как я определил, что это именно это начало наших стилей, которые нас интересуют!?

  После этой строки - №287 начинается основной текст. И он находится в дивах:
  

  
  

  См.скрин:

  Следующим шагом нужно разобраться с документом css. Опять же, если вы сейчас нажмёте ещё раз ctrl + U, то строчка 33 скажет нам, где находится документ css. Нам повезло, что документ css один. Если документов несколько, то прошерстить придётся все!

  Вот эта строчка нас интересует! Из неё мы видим, что документ css находится в папке номер 1969, и ищем файл style5.(можно и на этот )

  Открываем файл style5, нажимаем ctrl + F(поиск) и вставляем туда rightPan нажимаем найти далее.

  

  Вот мы видим, что наш id – rightPan. Но выделенный стиль синим – это описание самого id, но нам нужен следующий стиль

  И интересующаяя нас строчка, которая и указывает на межстрочное расстояние:

  line-height: 1em;

  См.скрин:

  

  Второй вариант:

  Как уменьшить расстояние между строк.

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

  Не все хотят использовать программу Dreamweaver, но нам, в любом случае требуется поиск, конечно, он есть и в простом блокноте, но я, все же, предпочитаю профессиональный инструмент, чего и вам советую!

  Как мы выше писали, первое, что нам нужно найти, это где располагается основной текст, и где описано наше расстояние между строк.

  Для примера, опять же рассмотрим эту страницу!

  В любом браузере есть такая вещь, как - просмотр кода элемента! Используемый браузер Яндекс браузер(в опере также). Выделяем часть текста, в котором нужно изменить межстрочное расстояние. Нажимаем ПКМ , ищем строку просмотр кода элемента.

  

  1. Выделенный текст.
  2. Слева – где находится.
  3. Стиль, который прикреплён к выделенному тексту.

  Для того, чтобы увидеть полную страницу, я сделал сохранил его в большом размере –

  
  

  line-height: 1em;

  И меняем цифровое значение на то, которое мы хотим!

  

  Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде ) свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.

  Краткая информация

  Обозначения

  	Описание	Пример
  <тип>	Указывает тип значения.	<размер>
  A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
  A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
  A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
  	Группирует значения.	[ crop || cross ]
  *	Повторять ноль или больше раз.	[,<время>]*
  +	Повторять один или больше раз.	<число>+
  ?	Указанный тип, слово или группа не является обязательным.	inset?
  {A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
  #	Повторять один или больше раз через запятую.	<время>#

  ×

  Значения

  Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта.

  Normal Расстояние между строк вычисляется автоматически.

  Песочница

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

  div { line-height: 0.5 ; }

  Пример

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

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

  Результат данного примера показан на рис. 1.

  Рис. 1. Применение свойства line-height

  Объектная модель

  Объект .style.lineHeight

  Примечание

  Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм.

  Спецификация

  Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.

  ×
  
  

  2016-05-11