Как сделать абзац css
Каскадные таблицы стилей CSS советы & приёмы
Смотрите также указатель всех приёмов работы.
Абзацы с отступом
Масштабированная модель Эйфелевой башни в Парке Мини-Франция
Вот простой приём: выделение отступом первой строки каждого абзаца. Многим людям проще читать текст, когда его абзацы выделены отступом, а не разделены между собой пустыми строками. Это особенно заметно с большими текстами, но также позволяет зарезервировать пустые строки для более важных разрывов текста.
Трюк здесь состоит в том, чтобы выделять отступом только чётные абзацы. Первый абзац страницы необязательно выделять отступом, как, например, и абзац, следующий за диаграммой, заголовком или чем-то, что уже само по себе является отступом от текста. А правила очень просты:
Здесь мы выделяем отступом первую строку только того абзаца, который следует за другим абзацем. С помощью этих правил мы также убираем пустую строку под всеми абзацами и над абзацами с отступом. На практике вы обнаружите, что вам всё же нужны исключения.
На этой странице, например, есть элементы P, которые используются в качестве подписи к изображениям (см. пример “Иллюстрации & подписи”). Мы уже выровняли их по центру, поэтому выделять дополнительно отступом не надо. Простое правило ‘ p.caption
Навигация по сайту
Created 17 January 2001;
Last updated Ср 06 янв 2021 05:40:49
CSS: Отступ текста
Форматирование текста
Стандартный вид текста не всегда подходит, как по внешнему виду, так и по цвету, CSS предоставляет обширные возможности, с помощью которых, вы можете кардинально изменить ваш текст, например задав ему цвет, меняя межстрочный интервал, расстояние между буквами или размер текста и многое другое.
Отступ текста
В случае применения свойства text-indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется для создания эффекта красной строки у абзацев:
Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.
Свойство text-indent работает только с блочными элементами, его нельзя применять к строчным элементам или вставляемому контенту, такому как картинки. Но если в первой строке блочного элемента, например абзаца, есть картинка, то она будет сдвинута вместе со всем остальным текстом строки.
Отрицательные значения свойства, позволяют сделать текст с выступающей первой строкой. Но, задавая отрицательные значения, нужно учитывать, что часть выступающей строки может выйти за границы элемента или даже может быть обрезана левым краем окна браузера, если элемент находится вплотную к краю. Для избежания таких неприятностей, можно применить внутренний отступ с левой стороны элемента равный выступу:
С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.
Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:
Форматирование
Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:
Свойства текста в CSS
В предыдущей статье мы рассмотрели свойства, отвечающие за оформление шрифта. На этой странице продолжаем работу с текстом: знакомимся с свойствами CSS, отвечающими за форматирование и оформление текста.
Выравнивание текста
Свойство text-align позволяет выравнивать текст по горизонтали в пределах элемента.
Свойство применимо ко всем элементам.
: left ; «> Текст расположен слева.
: center ; «> Выравнивание по центру.
: right ; «> Текст расположен в правой части абзаца.
Текст расположен слева.
Выравнивание по центру.
Текст расположен в правой части абзаца.
Оформление и выделение текста
Свойство text-decoration позволяет определенным образом выделить текст:
Присвоение свойству text-decoration значения none отменяет все оформление, включая подчеркивание ссылок, устанавливаемое браузером по умолчанию.
Свойство применимо ко всем элементам.
Отступ первой строки
Свойство text-indent позволяет установить величину отступа первой строки в элементе.
Свойство применимо к блочным элементам (подробнее здесь. ).
Первая строка этого абзаца не выделена отступом. По умолчанию величина отступа первой строки равна 0.
: 25px ; «> Отступ первой строки этого абзаца составляет 25 пикселей. Как видите, следующая строка не имеет отступа!
Первая строка этого абзаца не выделена отступом. По умолчанию величина отступа первой строки равна 0.
Отступ первой строки этого абзаца составляет 25 пикселей. Как видите, следующая строка не имеет отступа!
Регистр букв
Свойство text-transform задает регистр букв для текста элемента.
При значении none (значение по умолчанию) текст не меняет регистра.
Свойство применимо ко всем элементам.
: uppercase ; «> Все буквы текста в верхнем регистре.
: capitalize ; «> Лишь первая буква каждого слова в верхнем регистре.
Все буквы текста в верхнем регистре.
Лишь первая буква каждого слова в верхнем регистре.
Интервал между буквами и словами
Свойства letter-spacing и word-spacing задают соответственно интервал между буквами и интервал между словами в тексте элемента.
Интервал задается в единицах длины, принятых в CSS (подробнее здесь. ).
По умолчанию эти расстояния зависят от используемого шрифта.
Свойства применимы ко всем элементам.
: 5px ; «> Интервал между буквами равен 5 пикселям.
: 10px ; «> Расстояние между словами составляет 10 пикселей.
Интервал между буквами равен 5 пикселям.
Расстояние между словами составляет 10 пикселей.
Межстрочный интервал
При значении normal (значение по умолчанию) межстрочный интервал зависит от шрифта и определяется браузером.
: 2 ; «> Установим межстрочный интервал, выбрав в качестве значения число 2. То есть множитель равен 2. В итоге интервал в два раза больше размера текущего шрифта.
Установим межстрочный интервал, выбрав в качестве значения свойства число 2. То есть множитель равен 2. В итоге интервал в два раза больше размера текущего шрифта.
Пробелы и переносы
По умолчанию несколько пробелов в исходном коде браузеры отображают как один, а перенос текста на следующую строку происходит автоматически.
Свойство white-space позволяет учесть все пробелы, установленные в исходном коде, а также контролирует перенос текстовой строки.
При значении pre свойства white-space браузер учтет все пробелы и переносы в исходном коде. Но автоматический перенос строк не работает.
При значении nowrap пробелы и переносы не учитываются, и если не осуществить перенос строки с помощью тега
, то добавится полоса прокрутки.
Свойство применимо к блочным элементам (подробнее здесь. ).
Добавление тени
Оформление текста тенью придает ему эффект трехмерности и позволяет таким образом заметно выделить его, привлекая тем самым внимание.
Добавление нескольких теней приветствуется с точки зрения улучшения визуального эффекта при их сочетании.
Но в использовании тени есть и недостаток, заключающийся в том, что браузер Internet Explorer понимает добавление тени только с 10.0 версии.
: #CCFF33 ; font-size : 40px ; text-shadow : #FF3366 3px 3px 5px, teal 3px 3px 10px ; «> К тексту добавлены две тени!
Оформление текста в CSS
Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.
Существует вероятность, что человек не станет читать даже очень грамотно и хорошо написанный, но не оформленный или плохо оформленный текст, поэтому следует уделить особое внимание вопросу удобочитаемости.
CSS предоставляет довольно обширные возможности, позволяющие кардинально изменить внешний вид вашего текста с помощью различных цветовых решений, размера строки и т.д.
Визуальное оформление текста в CSS
В окне браузера данный пример будет выглядеть следующим образом:
Цвет текста в CSS
Способы задания могут быть следующими:
Визуальное оформление, реализованное с помощью приведенного выше кода, выглядит следующим образом:
Размер текста в CSS
CSS свойство font-size позволяет задать размер текста.
Единицами измерения могут быть:
Визуальное представление приведенного выше кода выглядит следующим образом:
Отступ текста в CSS
Изначальная концепция HTML не предполагала отступы, выделяя абзацы лишь вертикальным расстоянием, а множество пробелов перед строкой браузер преобразует в один.
Визуальное отображение кода:
Жирный и наклонный текст в CSS
С помощью атрибута CSS font-weight определяется жирность шрифта.
Данный атрибут может принимать следующие значения:
В браузере данный код выглядит следующим образом:
Тень текста в CSS
CSS свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.
В том случае, если цвет тени не задан, используется цвет текста.
Представленный выше код в браузере выглядит следующим образом:
Выравнивание текста в CSS
С помощью свойства vertical-align выполняется выравнивание текста по вертикали.
Данное свойство может принимать следующие значения:
Таким образом, возможности CSS позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.
HTML: Абзац и красная строка
Абзацы
Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.
Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую, понятную каждому пользователю, структуру. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит многое: прежде всего, какое впечатление сложится у посетителя о вашем сайте.
Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег
, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).
Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.
Не забывайте про закрывающий тег
Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.
Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.
Красная строка
Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.
Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:
В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.