Форматирование текста в CSS

css

Содержание:



Свойство LETTER-SPACING

Свойство Значения Пр* Нc*
letter-spacing ДЛИНА, normal, inherit + +

Свойство Letter-spacing определяет интервал между символами в тексте. Чем больше значение, тем больше расстояние между буквами. Допускаются отрицательные значения, при которых размещение букв уплотняется.

Значения:

Допустимы любые единицы, принятые в CSS.

normal — обычный интервал, что аналогично значению 0.
inherit — наследование свойств родителя.

Пример:

.element1 { letter-spacing: -1px; }
.element3 { letter-spacing: 3px; }

— в примере вторая строка с обычным интервалом:

Свойство Letter-spacing

Свойство LINE-HEIGHT

Свойство Значения Пр* Нc*
line-height ДЛИНА, %, КОЭФФИЦИЕНТ, normal, inherit + +

Свойство Line-height устанавливает межстрочный интервал в тексте и влияет на компоновку контейнеров строк.

Значения:

Допустимы любые единицы, принятые в CSS. Значение можно указать в процентах. Коэффициент — это числовое значение без указания единиц измерения, например: 1,5 или 2. Отрицательные значения не допустимы.

normal — обычный межстрочный интервал.
inherit — наследование свойств родителя.

Пример:

.element2 { line-height: 2; } — в примере второй абзац имеет двойной межстрочный интервал:

Свойство Line-height

Свойство TEXT-DECORATION

Свойство Значения Пр* Нc*
text-decoration none, [underline; overline; line-through; blink], inherit + -

Свойство Text-decoration позволяет применить к тексту декоративные эффекты: подчёркивание, перечёркивание. Эффекты будут распространяться на элементы-потомки.

Значения:

underline — подчёркивание текста.
overline — линия над текстом.
line-through — перечёркнутый текст.
blink — устанавливает эффект мигания текста, но браузерам не обязательно иметь поддержку данного значения.
none — отменяет эффекты.
inherit — наследование свойств родителя.

Пример:

.element1 { text-decoration: underline; }
.element2 { text-decoration: overline; }
.element3 { text-decoration: line-through; }

Так выглядят эти декоративные эффекты, если слова заключить в тег <span>, задать им классы css и применить свойство Text-decoration:

Свойство Text-decoration

Свойство TEXT-INDENT

Свойство Значения Пр* Нc*
text-indent ДЛИНА, %, inherit * +

Свойство Text-indent применяется для создания отступа первой строки абзаца, как принято в русской типографике. Допускаются отрицательные значения, которые создают выступ в обратную сторону.

Область применения*: блочные элементы.

Значения:

Разрешены любые единицы измерения CSS или значения в процентах. Начальное значение — 0.

inherit — наследование свойств родителя.

Свойство TEXT-TRANSFORM

Свойство Значения Пр* Нc*
text-transform uppercase, lowercase, capitalize, none, inherit + +

Свойство Text-transform изменяет регистр букв элемента независимо от регистра текста в исходном формате.

Значения:

uppercase — делает все буквы в тексте прописными (заглавными).
lowercase — все буквы строчные.
capitalize — обычно первая буква слова становится заглавной. Точного описания на сей счёт спецификация не даёт, и форматирование текста лежит «на совести» у браузеров.
none — не меняет регистр.
inherit — наследование свойств родителя.

Пример:

.element1 { text-transform: uppercase; }
.element2 { text-transform: lowercase; }
.element3 { text-transform: capitalize; }

Вот как это выглядит, если регистр символов у всех предложений изначально был одинаковый:

Свойство Text-transform

Свойство WHITE-SPACE

Свойство Значения Пр* Нc*
white-space normal, nowrap, pre, pre-wrap, pre-line, inherit + -

Свойство White-space определяет, как будут обрабатываться пробелы во время компоновки. Стандартное поведение браузера — воспринимать несколько пробелов в коде HTML за один. Исключением служит тег <pre>, который указывает браузеру, что отображать нужно всё как есть, т.е. и любое количество пробелов тоже. Это же делает и свойство White-space.

Значения:

normal — текст выводится как обычно с автоматическим переносом строк.
nowrap — весь текст выводится как одна строка, без переносов строк, а пробелы не учитываются. Для переноса строки можно использовать тег <br>.
pre — текст выводится со всеми переносами строк и пробелами, как в коде HTML. Браузер добавит горизонтальную полосу прокрутки в случае, если ширина текста не помещается в окне.
pre-wrap — тоже, что и pre, но с переносом на новую строку, без полосы прокрутки.
pre-line — пробелы не учитываются, а текст переносится на новую строку.
inherit — наследование свойств родителя.

Свойство WORD-SPACING

Свойство Значения Пр* Нc*
word-spacing ДЛИНА, normal, inherit + +

Свойство Word-spacing устанавливает интервал между словами.

Значения:

Для установки интервала годятся любые единицы измерения CSS, например: px.

normal — обычный интервал, что соответствует значению 0.
inherit — наследование свойств родителя.

Содержание: