Как настроить стиль следующего абзаца css
Отдельная группа свойств CSS позволяет стилизовать большие группы текста, например, установить высоту строки или выравнивание текста.
line-height
Свойство line-height определяет межстрочный интервал. Для его установки можно использовать пиксели, проценты или единицы em. Как правило, применяются либо проценты, либо em. Например:
Если это свойство не установлено, то по умолчанию используется значение line-height: 120%; .
text-align
Свойство text-align выравнивает текст относительно одной из сторон веб-страницы. Оно принимает следующие значения:
left : текст выравнивается по левой стороне
right : текст выравнивается по правой стороне
justify : выравнивание по ширине, слова равномерно распределяются по строке
center : выравнивание по центру
text-indent
Свойство text-indent задает отступ первой строки абзаца. Для установки отступа могут применяться стандартные единицы измерения, например, em или пиксели:
Каскадные таблицы стилей CSS советы & приёмы
Вот простой приём: выделение отступом первой строки каждого абзаца. Многим людям проще читать текст, когда его абзацы выделены отступом, а не разделены между собой пустыми строками. Это особенно заметно с большими текстами, но также позволяет зарезервировать пустые строки для более важных разрывов текста.
Трюк здесь состоит в том, чтобы выделять отступом только чётные абзацы. Первый абзац страницы необязательно выделять отступом, как, например, и абзац, следующий за диаграммой, заголовком или чем-то, что уже само по себе является отступом от текста. А правила очень просты:
Здесь мы выделяем отступом первую строку только того абзаца, который следует за другим абзацем. С помощью этих правил мы также убираем пустую строку под всеми абзацами и над абзацами с отступом. На практике вы обнаружите, что вам всё же нужны исключения.
На этой странице, например, есть элементы P, которые используются в качестве подписи к изображениям (см. пример “Иллюстрации & подписи”). Мы уже выровняли их по центру, поэтому выделять дополнительно отступом не надо. Простое правило ‘ p.caption
Теперь мы можем использовать произвольное число пробелов между абзацами для обозначения важных разрывов в тексте. Давайте определим три разных класса: stb (малый тематический разрыв), mtb (средний тематический разрыв) и ltb (большой тематический разрыв). Мы присвоили данному абзацу класс stb , чтобы вы могли увидеть эффект.
Навигация по сайту
Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy
CSS: Отступ текста
Стандартный вид текста не всегда подходит, как по внешнему виду, так и по цвету, CSS предоставляет обширные возможности, с помощью которых, вы можете кардинально изменить ваш текст, например задав ему цвет, меняя межстрочный интервал, расстояние между буквами или размер текста и многое другое.
Отступ текста
Отступ в первой строке абзаца, имитирующий красную строку, — это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.
В случае применения свойства text-indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется для создания эффекта красной строки у абзацев:
Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.
Свойство text-indent работает только с блочными элементами, его нельзя применять к строчным элементам или вставляемому контенту, такому как картинки. Но если в первой строке блочного элемента, например абзаца, есть картинка, то она будет сдвинута вместе со всем остальным текстом строки.
Отрицательные значения свойства, позволяют сделать текст с выступающей первой строкой. Но, задавая отрицательные значения, нужно учитывать, что часть выступающей строки может выйти за границы элемента или даже может быть обрезана левым краем окна браузера, если элемент находится вплотную к краю. Для избежания таких неприятностей, можно применить внутренний отступ с левой стороны элемента равный выступу:
Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе — Блочная модель.
С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.
Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:
Форматирование
Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:
Оформление абзаца стилями CSS
Приступим к форматированию абзаца. Определим параметры полей, отступов и границ.
Для установки ширины полей используется свойство margin. Правило margin:50px установит для каждого поля ширину 50 пикселей.
Большинство случаев требует чтобы каждое поле имело свою ширину. Для задания ширины верхнего поля используйте margin-top, для правого — margin-right, для нижнего — margin-bottom, для левого — margin-left.
Для указания отступов следует пользоваться свойством padding. Оно работает аналогично свойству margin.
border — ещё одно полезное свойство. Оно предназначено для задания стиля границам (ширина, начертание). Свойство border-width определяет значение ширины границы блока Свойство border-color устанавливает цвет границы блока. Border-style задаёт стиль линии(сплошная, двойная, пунктирная и т.д.).Border-style может принимать следующие значения:
- none — граница отсутствует;
- hidden — граница не отображается;
- dotted — пунктирная линия;
- dashed — штрихпунктирная линия;
- solid — сплошная линия;
- double — две сплошные линии;
- groove — вдавленная линия;
- ridge — выпуклая линия;
- inset — весь блок выглядит как бы вдавленным;
- outset — весь блок выглядит как бы выпуклым.
Наиболее важные абзацы можно выделить цветом (color — цвет текста, background-color — цвет фона).
Результат будет выглядеть так:
Получилось неплохо. Теперь для сделаем аккуратней: выровняем текст по правой и левой границам (text-align:justify;), зададим отступ для первой строки (text-indent:30px;).
Спецификация CSS2 предусматривает псевдоэлементы first-line и first-letter — первая строка и первая буква соответственно. Создадим стили и для них. В итоге получится что-то вроде: