Главная1 курс UX/UI2 занятие. Основы CSS8. CSS-текст
2 занятие

8. CSS-текст

Преобразование текста: свойство text-transform

Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.

  • none - Значение по умолчанию, означает отсутствие эффектов.
  • capitalize - Изменяет написание первой буквы каждого слова в элементе, делая её прописной.
  • uppercase - Выводит все слова в элементе прописными буквами.
  • lowercase - Выводит все слова в элементе строчными буквами.
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;

Обработка пробелов и переносы строк: свойство white-space

Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.

  • normal - Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
  • nowrap - Запрещает переносы строк, за исключением применения тега br.
white-space: normal;
white-space: nowrap;

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

  • left - Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
  • right - Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
  • center - Содержимое на уровне строки центрируется внутри линейного блока.
  • justify - Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
text-align: left;
text-align: right;
text-align: center;
text-align: justify;

Промежутки

CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing.

Свойство word-spacing определяет дополнительный интервал между словами.

Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.

word-spacing: normal;
word-spacing: 1px;

Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к кернингу и word-spacing.

letter-spacing: normal;
letter-spacing: 0.1em;
letter-spacing: 2px;

Отступ первой строки: свойство text-indent

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

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

text-indent: 20px;
text-indent: 5%;
Далее