Название документа

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание: Атрибут align в тегах

устарел и больше не должен с использоваться.

Пример

HTML

p>Это первый абзац текста. Это первый абзац текста. Это первый абзац текста. Это первый абзац текста.p> p>Это второй абзац текста. Это второй абзац текста. Это второй абзац текста. Это второй абзац текста.p> 

Результат

Стилизация абзацев

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

HTML

p>Разделение абзацев пустыми строками удобнее для читателей, но их также можно разделить, сделав отступы в их первых строках. Это часто используется для экономии места, например, чтобы тратить меньше бумаги при печати.p> p>Письмо (имеется ввиду письменность), предназначенное для редактирования, например, школьные записи и черновики, использует для разделения как пустые строки, так и отступы. В готовых работах объединение этих двух способов считается излишним и любительским.p> p>В очень старом письме абзацы были разделены специальным символом: ¶, i>pilcrowi> (знак абзаца). В настоящее время это считается замкнутым и трудно читаемым.p> p>Насколько трудно читать? Посмотрите сами: button data-toggle-text="О нет! Переключи обратно!">Используем "pilcrow" для абзацевbutton> p> 

CSS

p  margin: 0; text-indent: 3ch; > p.pilcrow  text-indent: 0; display: inline; > p.pilcrow + p.pilcrow::before  content: " ¶ "; > 

JavaScript

.querySelector('button').addEventListener('click', function (event)  document.querySelectorAll('p').forEach(function (paragraph)  paragraph.classList.toggle('pilcrow'); >); var newButtonText = event.target.dataset.toggleText; var oldText = event.target.innerText; event.target.innerText = newButtonText; event.target.dataset.toggleText = oldText; >); 

Результат

Проблемы доступности

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

Использование пустого элемента

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

Если требуется дополнительное пространство, используйте свойства CSS, например margin , чтобы создать такой эффект:

p  margin-bottom: 2em; // увеличение пустого пространства после абзаца > 

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

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 4 мар. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS: Отступ текста

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

Отступ текста

Отступ в первой строке абзаца, имитирующий красную строку, — это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.

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

Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.

Свойство text-indent работает только с блочными элементами, его нельзя применять к строчным элементам или вставляемому контенту, такому как картинки. Но если в первой строке блочного элемента, например абзаца, есть картинка, то она будет сдвинута вместе со всем остальным текстом строки.

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

     p 
У этого абзаца первая строка будет выступать над остальными на 40px, для просмотра выхода строки за границу элемента и ее усечение вследствии этого, просто удалите строку CSS-кода добавляющую внутренний отступ к абзацу (padding-left: 40px;).
  

Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе — Блочная модель.

С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.

     .test1 < text-indent: 25px; >.test2 
Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px.
 
Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%.
  

Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:

     .test1  
Первая строка текста элемента div будет иметь отступ равный 15% ширины его родительского элемента или ширины окна браузера. 
Первая строка текста элемента p будет иметь отступ, который был унаследован от его родительского элемента.
 
  

Форматирование

Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:

     p.class1 < text-transform: uppercase; text-decoration: overline; >p.class2 < text-transform: lowercase; text-decoration: line-through; >p.class3 
Первый абзац.
 
Второй абзац.
 
Третий абзац.
 
Расстояние между символами в тексте изменено с помощью свойства letter-spacing.
  

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

HTML: Абзац и красная строка

Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.

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

Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.

Не забывайте про закрывающий тег

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

Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

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

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

   p   
Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым некоторые относят и красную строку, считая, что употребление ее не так уж и важно. Однако надо понимать, что любая запятая несет в себе как эстетическую, так и смысловую нагрузку, а не только является данью правилам грамматики – это касается и форматирования.
   

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

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

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник