Стилевое оформление текста в CSS — важная составляющая веб-разработки. Этот раздел охватывает ключевые свойства CSS, позволяющие управлять внешним видом и поведением текста на веб-страницах.
Работа со стилями текста
Рассмотрим применение различных стилей к тексту, в частности, к абзацам. Ранее упоминалось свойство font-size, но сейчас рассмотрим его подробнее. Создадим новый абзац с классом st:
<p class="st"></p>Размер шрифта (font-size)
Свойство font-size определяет размер шрифта. Его значение можно задать в пикселях (px), процентах (%) или единицах em.
Зададим размер шрифта в 16 пикселей:
.st {
font-size: 16px;
}Использование процентов (%) для font-size не является оптимальным, так как размер будет зависеть от размера родительского элемента. Наиболее предпочтительный способ — использование единиц em, которые масштабируются относительно размера шрифта родительского элемента. Для всего текста обычно устанавливается значение 1.1em. Для заголовков это значение может быть иным.
.st {
font-size: 1.1em;
}Толщина и семейство шрифтов (font-weight, font-family)
font-weight задает толщину шрифта. Значения могут быть bold (жирный), normal (обычный), а также числовые значения от 100 до 900.
font-family указывает семейство шрифтов. Можно указать несколько шрифтов через запятую. Браузер выберет первый доступный шрифт из списка. Например:
.st {
font-weight: bold;
font-family: 'Comic Sans MS', sans-serif;
}sans-serif — резервный шрифт, используемый, если ‘Comic Sans MS’ недоступен на компьютере пользователя.
Дополнительные свойства
Помимо основных свойств, существуют и другие, влияющие на внешний вид текста:
- text-decoration: Управляет подчеркиванием, перечеркиванием и другими декоративными элементами текста. Значения: underline, line-through, overline.
- text-align: Выравнивает текст внутри элемента. Значения: left, center, right, justify.
- text-indent: Задает отступ первой строки абзаца. Например: text-indent: 1.1em;
- text-transform: Преобразует регистр букв. Значения: uppercase, lowercase, capitalize, none. capitalize делает заглавной первую букву каждого слова.
- word-spacing: Задает интервал между словами.
- letter-spacing: Задает интервал между буквами.
- line-height: Задает интервал между строками. Рекомендуется использовать проценты для гибкости. Например: line-height: 120%;
Рассмотрены основные свойства CSS для работы со стилями текста и шрифтами. Использование этих свойств позволяет гибко управлять внешним видом текста на веб-страницах и создавать более привлекательный дизайн.