Оформление текста используя 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