Как сделать красную строку в css

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

Большую часть времени веб-разработчики тратят на то, где будет располагаться текст и, как он будет выглядеть. Существует множество свойств, которые позволяют работать с текстом. Иногда текст и шрифты используют как синонимы. Разделим эти два понятия. Текст – это содержимое, а шрифт – это то, что отображает содержимое.

Одним из самых распространенных эффектов является отступ первой строки абзаца (в просторечие: красная строка). Он позволяет создать видимость структурированности текста.

Свойство text-indent реализует отступы в CSS. Рассмотрим его синтаксис:

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

В результате первая строка абзацев будет сдвинута на 1.5em . Если задать отрицательное значение, то получится не отступ, а выступ, т.е. первая строка будет выдвинута влево, относительно элемента.

CSS :: Текст

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

Установка интервала между словами и символами текста.
css-свойства word-spacing и letter-spacing

Для того, чтобы изменить интервал между словами или отдельными символами текста используются наследуемые свойства word-spacing и letter-spacing, которые в качестве значений принимают числа в любых доступных единицах измерения, использующихся в CSS (смотреть). Более того, разрешается использовать отрицательные значения, но в этом случае слова и символы могут заходить друг на друга или вести себя непредсказуемым образом, так что нужно быть внимательным и следить за сохранением читабельности текста. Значения в процентах не допускаются, но кроме числовых значений свойства могут принимать значение normal , которое используется по умолчанию и задает обычные для данного шрифта интервалы, а также значение inherit , которое указывает, что для элемента наследуется значение аналогичного свойства родительского элемента. Использование этих и некоторых других свойств форматирования текста показано в примере №1 .

Пример №1. Использование свойств letter-spacing, word-spacing, line-height, text-indent

Высота строки и css-cвойство line-height

Читабельность текста можно также улучшить за счет увеличения межстрочного интервала (расстояния между строками). Для этих целей используется наследуемое свойство line-height, которое может принимать следующие значения:

  • normal – используется стандартный в данной ситуации межстрочный интервал, который в зависимости от браузера составляет около 120 — 125% от текущего размера шрифта; значение используется браузером по умолчанию;
  • множитель – представляет собою число, на которое будет умножен текущий размер шрифта для определения межстрочного интервала (см. пример №1 );
  • размер – задает расстояние между строк в любых единицах измерения, использующихся в CSS ;
  • проценты – размер межстрочного интервала определяется в процентах от текущего размера шрифта;
  • inherit – указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

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

Красная строка и css-cвойство text-indent

Установка красной строки (отступ первой строки в абзаце) задается при помощи наследуемого свойства text-indent. Допускается использование любых доступных единиц измерения, использующихся в CSS , а также проценты, которые определяют размер отступа первой строки относительно ширины родительского элемента, а не размеров текущего шрифта (см. пример №1 ). Более того, для создания выступа первой строки разрешается использовать и отрицательные значения.

Здесь и далее мы будем практически всегда опускать значение свойств inherit , т.к. его могут принимать все свойства CSS . Оно указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

Выравнивание текста и css-cвойства text-align и text-align-last

Для горизонтального выравнивания текста в CSS предусмотрено наследуемое свойство text-align (см. пример №2 ), которое применяется к блочным элементам, определяя выравнивание его строчного содержимого. Отметим, что применять его к строчным элементам не имеет смысла, т.к. ширина таких элементов определяется их содержимым. Возможные значения свойства:

  • left – текст будет выравниваться по левому краю; значение используется браузером по умолчанию;
  • right – текст будет выравниваться по правому краю;
  • center – текст будет выравниваться по центру;
  • justify – текст будет растягиваться на всю ширину родительского элемента;
  • start – аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево;
  • end – аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.

Пример №2. Пример использования свойства text-align

Если необходимо отдельно выровнять содержимое только последней строки элемента, можно использовать css -свойство text-align-last, которое в качестве дополнительного значения принимает ключевое слово auto (см. пример №2 ). Данное значение используется по умолчанию, а текст последней строки в этом случае выравнивается в зависимости от значения свойства text-align с одним исключением: text-align не должно быть установлено в justify , иначе текст будет выравниваться по левому краю.

Направление письма и символов,
css-свойства direction, unicode-bidi и writing-mode

В некоторых языках возникает необходимость смены направления письма. Если у нас принято направление письма слева направо, то во многих арабских языках это делается наоборот, т.е. справа налево. Для таких случаев предусмотрено специальное наследуемое свойство direction, значение ltr которого задает направление текста слева направо, а значение rtl , соответственно, справа налево (см. пример №3 ). Если же нужно изменить еще и направление символов, то следует воспользоваться наследуемым свойством unicode-bidi, которое используется только совместно с direction и может принимать значения:

  • normal – право выбора направления остается за браузером, который использует собственный алгоритм для определения направления текста на основе стандартов Unicode ; значение используется браузером по умолчанию;
  • embed – направление текста будет задаваться, как указано в свойстве direction;
  • bidi-override – направление текста, опять же, будет задаваться свойством direction, но в дополнение к этому изменится и направление символов в тексте.

Пример №3. Пример использования свойств direction, unicode-bidi

Отметим, что по умолчанию, если задано направление текста слева направо (как принято у нас), браузеры выравнивают текст по левому краю. Если же задано выравнивание текста справа налево, то браузеры по умолчанию выравнивают текст по правому краю.

Помимо необходимости регулирования горизонтального направления текста время от времени может возникать и ситуация, когда текст на странице требуется располагать не в горизонтальном, а в вертикальном направлении. В этом случае не обойтись без наследуемого css -свойства writing-mode (см. пример №4 ), которое может принимать следующие значения:

  • horizontal-tb – устанавливает горизонтальное направление текста слева направо с заполнением строками сверху вниз;
  • vertical-rl – устанавливает вертикальное направление текста сверху вниз с заполнением строками справо налево;
  • vertical-lr – устанавливает вертикальное направление текста сверху вниз с заполнением строками слева направо.

Пример №4. Пример использования свойства writing-mode

Отметим, что использование свойств direction и unicode-bidi совместно с writing-mode может привести к вполне ожидаемому дополнительному изменению направления вдоль вертикальной прямой (попробуйте внести изменения в код примера и поэкспериментируйте со значениями).

Пробельные символы и css-cвойство white-space

Как мы уже упоминали в процессе изучения HTML , браузеры по умолчанию игнорируют большинство пробельных символов в html -коде, заменяя символы табуляции, подряд идущие пробелы и автоматические переносы строк одним пробелом. Однако такое положение не всегда устраивает пользователей, а применение элемента «pre» , в котором сохраняются все пробелы и переносы строк, также не всегда удовлетворяет их потребностям. Поэтому в CSS для определения способа обработки пробельных символов предусмотрено специальное наследуемое свойство white-space (см. пример №5 ). Перечислим значения свойства:

  • normal – все пробельные символы и переносы строк в коде HTML преобразуются в один пробел, а разрывы строк добавляются браузером автоматически; значение используется браузером по умолчанию;
  • pre – текст форматируется аналогично содержимому тега <pre>, т.е. отображается так, как вводит его пользователь: сохраняются все подряд идущие пробельные символы и переносы строк, автоматические переносы не добавляются;
  • nowrap – текст отображается одной строкой, подряд идущие пробельные символы заменяются одним пробелом, переносы строк в коде HTML игнорируются, автоматические переносы строк не добавляются, действительны только принудительные разрывы строк, сделанные при помощи тегов <br>;
  • pre-wrap – все подряд идущие пробельные символы и переносы строк сохраняются, но разрывы строк добавляются браузером автоматически;
  • pre-line – все подряд идущие пробельные символы заменяются одним пробелом, но переносы строк в коде HTML сохраняются, а также по необходимости браузером добавляются автоматические переносы.

Пример №5. Пример использования свойства white-space

Переносы строк и css-cвойства word-break и word-wrap

Следует иметь ввиду, что по умолчанию все браузеры переносят слова целиком. Однако, если нужно изменить такое поведение, можно использовать наследуемое свойство word-break (см. пример №6 ), которое указывает браузеру, как нужно вставлять переносы строк внутри слов, если они не помещаются по ширине в родительском элементе.

Свойство может принимать следующие значения:

  • normal – данное значение используется по умолчанию и строки переносятся как обычно;
  • break-all – если очередное слово не будет полностью помещаться в заданную ширину блока, то браузер будет переносить оставшуюся часть слова на новую строку; значение не работает для текста на китайском, корейском или японском языке;
  • keep-all – не разрешается перенос строк в словах на китайском, корейском или японском языке; для остальных языков действует как normal .

Пример №6. Пример использования свойства word-break

Также в CSS присутствует довольно похожее наследуемое свойство word-wrap, которое разрешает либо запрещает браузеру вставлять разрыв строки внутри длинных слов для переноса их на новую строку, если они не помещаются по ширине в заданную область (см. пример №7 ).

Свойство может принимать следующие значения:

  • normal – слова могут переноситься на новую строку только целиком, если только перенос не будет задан явно, например, при помощи тега <br>.
  • break-word – если слово не будет полностью помещаться в заданную ширину блока и будет отсутствовать допустимая точка для разрыва строки вне слова, то браузер будет вставлять разрыв строки внутри слова и переносить оставшуюся часть на новую строку.

Внимательно рассмотрите оба примера и найдите отличия в алгоритме работы этих свойств.

Пример №7. Пример использования свойства word-wrap

Заглавные и строчные буквы,
css-cвойство text-transform

Присутствует в CSS и возможность управления преобразованием текста в прописные (заглавные) или строчные буквы. Делается это при помощи наследуемого свойства text-transform (см. пример №8 ), которое может принимать следующие значения:

  • capitalize – прописной (заглавной) становится первая буква каждого слова;
  • uppercase – все буквы преобразуются в прописные;
  • lowercase – все буквы преобразуются в строчные;
  • none – текст отображается стандартным образом; значение используется браузером по умолчанию.

Пример №8. Пример использования свойства text-transform

Декоративная линия и подчеркивание текста

При использовании CSS отпадает необходимость использования элементов HTML для выделения текста подчеркиванием, т.к. для этого имеются ненаследуемые свойства text-decoration-line, text-decoration-style и text-decoration-color, которые позволяют соответственно задать тип, стиль и цвет декоративной линии для выбранного фрагмента текста (см. пример №9 ). Кроме того, имеется и сокращенное ненаследуемое свойство text-decoration, позволяющее задать все параметры в одном объявлении.

Свойство text-decoration-line в качестве значений может принимать следующие ключевые слова:

  • line-through – отображает текст перечеркнутым ;
  • overline – оформляет текст надчеркнутым ;
  • underline – оформляет текст подчеркнутым ;
  • none – используется по умолчанию и отменяет все эффекты, включая подчеркивание у ссылок, что бывает очень полезно при формировании меню.

Свойство text-decoration-style в качестве значений также принимает ряд ключевых слов, определяющих стиль декоративной линии:

  • dashed – декоративная линия будет иметь пунктирный вид;
  • dotted – декоративная линия будет иметь точечный вид;
  • double – декоративная линия будет двойной ;
  • solid – декоративная линия будет сплошной ;
  • wavy – декоративная линия будет иметь волнистый вид.

Что касается цвета декоративной линии, то для свойства text-decoration-color разрешается использовать любое допустимое в CSS значение цвета.

Все вышеуказанные параметры декоративной линии можно также задавать в одном объявлении при помощи сокращенного свойства text-decoration, перечисляя их через пробел в любой последовательности. При этом если значение какого-нибудь свойства не будет указано, браузер просто применит значение по умолчанию (см. пример №9 ).

Пример №9. Использование декоративной линии для фрагментов текста

Установка теней для текста и css-cвойство text-shadow

Иногда для декоративного оформления текста бывает полезным использование теней. Для этих целей CSS предлагает наследуемое css -свойство text-shadow, которое создает одну или несколько теней для текста (см. пример №10 ). Формат записи свойства имеет вид , где:

  • смещение x – обязательный параметр, который в случае положительных значений смещает тень относительно текста по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение отсутствует.
  • смещение y – обязательный параметр, который в случае положительных значений смещает тень относительно текста вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
  • размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
  • цвет – определяет цвет тени. т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр.
  • none – тень добавляться не будет (используется по умолчанию).

Для указания числовых значений параметров свойства text-shadow разрешается использовать все доступные в CSS единицы измерения (смотреть), а для указания цвета – любое допустимое в CSS его значение.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *