Оформление текста используя CSS

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

Для многих свойств можно применить “глобальные” значения:

initial - устанавливает значение по умолчанию

inherit - наследует значение родительского элемента

Их описание находится здесь, чтобы не дублировать его много раз.

Стилизация текста

color - задает цвет текста

text-shadow - задает тень тексту, можно задать несколько теней через запятую

Синтаксис: text-shadow: смещение по x | смещение по y | радиус-размытия | цвет;

text-decoration - добавляет декоративную линию. Сокращенное свойство для text-decoration-line, text-decoration-color, text-decoration-style.

Синтаксис: text-decoration: text-decoration-line text-decoration-color text-decoration-style

Значения text-decoration-line:

  • none - отсутствие линии
  • overline - добавляет линию над текстом
  • underline - добавляет линию под текстом
  • line-through - перечеркивает текст
  • initial
  • inherit

Значения text-decoration-style:

  • solid - сплошная линия
  • double - двойная линия
  • dotted - линия из точек
  • dashed - пунктирная линия
  • wavy - волнистая линия

Примеры: https://codepen.io/dmitryvalak/pen/XWNrVwE

Шрифты

font-family - задает название шрифта для текста. Можно указать несколько шрифтов через запятую. Если в названии шрифта есть пробелы, его нужно обернуть кавычками. Обычно указывается несколько шрифтов и семейство шрифтов. Самым первым указывают приоритетный шрифт, если браузер не находит такого шрифта у пользователя он применяет следующий. Семейство шрифтов указывается для ситуации когда ни одного из указанных шрифтов нет, тогда браузер сам выберет подходящий шрифт из указанного семейства шрифтов.

Список семейств шрифтов:

  • serif - шрифты с засечками
  • sans-serif - рубленные шрифты
  • cursive - курсивные шрифты
  • fantasy - декоративные шрифты
  • monospace - моноширинные шрифты

font-size - задает размер шрифта

font-style - задает стиль шрифта

Значения:

  • normal - обычный стиль (значение по умолчанию)
  • italic - курсив
  • oblique - наклонный
  • initial
  • inherit

font-weight - задает вес/жирность шрифта. Значения можно указать ключевыми словами или числовыми значениями: 100, 200, 300, 400, 500, 600, 700, 800, 900

Ключевые слова:

  • normal - обычный (аналогично 400)
  • bold - жирный (аналогично 700)
  • lighter - на один порядок более легче
  • bolder -  на один порядок более тяжелее
  • initial
  • inherit

Примеры: https://codepen.io/dmitryvalak/pen/bGBbaXe

Трансформация текста

text-transform - трансформирует текст

Значения:

  • capitalize - первая буква каждого слова заглавная
  • uppercase -  все буквы заглавные
  • lowercase - все буквы строчные
  • none - отсутствие трансформаций (значение по умолчанию)
  • initial
  • inherit

Примеры: https://codepen.io/dmitryvalak/pen/eYBOyqy

Выравнивание текста

text-align - задает горизонтальное выравнивание текста

Значения:

  • left -  выравнивание по левому краю
  • right - выравнивание по правому краю
  • start - выравнивание по начальному краю
  • end - выравнивание по конечному краю
  • center - выравнивание по центру
  • justify - выравнивание по левому и по правому краю, увеличивается расстояние между буквами и пробелы, последняя строка не выравнивается
  • match-parent - аналогично inherit, но значения start и end вычисляются в зависимости от значения direction родительского элемента
  • inherit

Примеры: https://codepen.io/dmitryvalak/pen/YzpKYmb

text-justify - указывает тип выравнивания при значении text-align: justify

Значения:

  • none - отключает выравнивание текста
  • auto - браузер сам выбирает наилучший тип выравнивания на основании используемого языка, качества отображения и производительности (значение по умолчанию)
  • inter-word - для выравнивания добавляет расстояние между словами
  • inter-character - для выравнивания добавляет расстояние между символами

Примеры: https://codepen.io/dmitryvalak/pen/poNzazw

text-align-last - задает горизонтальное выравнивание текста для последней строки

Значения:

  • auto - выравнивается по значению свойства text-align
  • left, right, start, end, center, justify - значения аналогичны как у свойства text-align

line-height - задает высоту строки. Можно использовать число (значение по умолчанию 1.2) или единицы измерения css

Пример: https://codepen.io/dmitryvalak/pen/gOLYvOp

Отступы, интервалы и переносы строк

word-spacing - устанавливает интервал между словами. Кроме ключевых слов значения можно указать в единицах измерения css (значение в процентах имеет плохую поддержку браузеров), значение может быть отрицательным

Значения:

  • normal - не изменяет интервал (значение по умолчанию)
  • initial
  • inherit

Пример: https://codepen.io/dmitryvalak/pen/QWGLQwp

letter-spacing - устанавливает интервал между символами, правила и значения аналогичны word-spacing

Пример: https://codepen.io/dmitryvalak/pen/yLVBvyz

text-indent - устанавливает отступ для первой строки в блоке. Значения указывается в единицах измерения css, значение может быть отрицательным

Пример: https://codepen.io/dmitryvalak/pen/qBqWxEL

white-space - позволяет управлять переносами строк и пробелами

Значения:

  • normal - текст переносится по необходимости, лишние пробелы удаляются (значение по умолчанию)
  • nowrap - запрещает перенос строк
  • pre-wrap - текст переносится по необходимости, все пробелы сохраняются
  • pre-line - текст переносится по необходимости, все лишние пробелы удаляются, кроме случаев с использованием
  • break-spaces - аналогично pre-wrap, но все неудаляемые пробелы и переносы строк занимают место
  • initial
  • inherit

Примеры: https://codepen.io/dmitryvalak/pen/RwobQPb

tab-size - указывает величину отступа табуляции (Tab), работает для тегов textarea и pre

Значения:

  • значение в единицах измерения css
  • число указывающие число пробелов
  • initial
  • inherit

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии