MyTetra Share
Делитесь знаниями!
HTML: Абзац и красная строка
Ссылка на оригинал
Время создания: 31.01.2019 16:26
Автор: alensav
Текстовые метки: HTML, Абзац, красная, строка
Раздел: MyTetra - Ubuntu_Command
Запись: xintrea/mytetra_db_alensav/master/base/1548941200kcfg5giccm/text.html на raw.githubusercontent.com

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

  • Абзацы
  • Красная строка

Абзацы

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

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

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p> , который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).


1

<p>Абзац</p>

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

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

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

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


1

2

<p>Абзац

<p>Другой абзац</p>

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

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

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

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

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<html>

  <head>

    <style>

      p { text-indent: 25px; }

    </style>

  <head>

  <body>

 

    <p>

      Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым

      некоторые относят и красную строку, считая, что употребление ее не так уж и важно.

      Однако надо понимать, что любая запятая несет в себе как эстетическую, так

      и смысловую нагрузку, а не только является данью правилам грамматики – это

      касается и форматирования.

    </p>

 

  </body>

</html>

Попробовать »

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


1

2

3

4

5

6

7

<p style="text-indent: 25px;">

  Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым

  некоторые относят и красную строку, считая, что употребление ее не так уж и важно.

  Однако надо понимать, что любая запятая несет в себе как эстетическую, так

  и смысловую нагрузку, а не только является данью правилам грамматики – это

  касается и форматирования.

</p>

Попробовать »

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

С этой темой смотрят:

  • HTML заголовки, линии и комментарии
  • HTML перенос строки
  • HTML теги для текста
  • Выравнивание текста
  • Как изменить шрифт
  • Стиль и размер шрифта


Так же в этом разделе:
 
MyTetra Share v.0.59
Яндекс индекс цитирования