Абзацы в HTML. Как задать отступ для красной строки?

абзацы в html. как задать отступ для красной строки?

Использование абзаца

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

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

Для возможности разметить текст как абзац в HTML существует элемент <p>. Весь текст должен располагаться между открывающим тегом <p> и закрывающим тэгом </p>. В браузере этот элемент отделяется от остального содержания «абзацными отступами», то есть сверху и снизу будет присутствовать пустая строка.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования абзацев</title>
    </head>
    <body>
        <hr>
        <!-- Данный текст будет отделен от верхней
        и нижней черты абзацными отступами -->
        <p>Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit. Aenean commodo ligula
        eget dolor.</p>
        <hr>

        <!-- Данный текст не является абзацем. Он не
        имеет отступов от черты. -->
        Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit. Aenean commodo ligula
        eget dolor.
    </body>
</html>

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

Задание красной строки

В HTML нет встроенной возможности задать отступ для первой строки абзаца. Такой отступ называется красной строкой. Мы немного отойдем от основной темы учебного курса и покажем два способа реализации красной строки с помощью CSS[1].

Чтобы задать стиль отдельного элемента необходимо использовать его атрибут style. В значении этого атрибута будут располагаться CSS-стили, описывающие правила отображения. CSS имеет свой набор свойств, применимых к тем или иным элементам. В настоящий момент нам необходимо свойство text-indent. Оно как раз и задает отступ первого предложения, что позволяет нам создать красную строку. Установим это свойство в значение 1.5em. Оно равно одной целой и половине высоты строки.

Полное выражение по формированию отступа у первой строки абзаца записывается как «<p style=“text-indent: 1.5em“>содержание...</p>».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример красной строки одного абзаца</title>
    </head>
    <body>
        <!-- Абзац с заданным отступом -->
        <p style="text-indent: 1.5em">Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit. Aenean commodo ligula
        eget dolor. Aenean massa. Cum sociis natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus.
        Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim. Donec pede
        justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>


        <!-- Обычный абзац -->
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
        natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus.Donec quam felis, ultricies nec, pellentesque
        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
        pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
    </body>
</html>

Если вы хотите задать отступ красной строки сразу для всех абзацев, присутствующих на странице, можете использовать пример, который мы приведем ниже. В нем, в обязательный элемент <head> добавлен элемент <style> со следующим содержанием «p { text-indent: 1.5em }». В задачи тега <style> входит добавление стилей прямо в HTML-разметку страницы, без подключения отдельного файла.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример красной строки для всех абзацев</title>
        <style>
            p { 
                text-indent: 1.5em; 
            }
        </style>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit. Aenean commodo ligula
        eget dolor. Aenean massa. Cum sociis natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus.
        Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim. Donec pede
        justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
        natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus.Donec quam felis, ultricies nec, pellentesque
        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
        pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
    </body>
</html>

Термины, использованные в статье

  1. Каскадные таблицы стилей (англ. Cascading Style Sheets, сокр. CSS) - специальный язык, достаточно простой в освоении, который способен описывать стилевое оформление элементов веб-страницы. Как правило, стили, написанные на CSS, располагаются в отдельном файле и подключаются к странице при её загрузке.

Последние публикации