Работа с текстом в CSS
Этот урок посвящен свойствам CSS для форматирования текста.
Подготовка и основные селекторы
Создадим параграф с текстом-заглушкой: Lorem ipsum. Добавим ему класс main-text. В файле main.css обратимся к этому классу (хотя можно обратиться к тегу <p> напрямую, мы рассмотрим разные селекторы).
Стили текста
Цвет текста (color)
Свойство color задает цвет текста. Цвет можно указать словом (например, red для красного) или шестнадцатеричным кодом (#код цвета). Примеры: #000000 или #000 (черный); #FFFFFF или #FFF (белый). Укажем черный цвет для нашего текста (color: #000;), хотя это значение по умолчанию.
Выравнивание текста (text-align)
text-align определяет выравнивание: left (по умолчанию, слева), center (по центру), right (справа), justify (по ширине). Пример: text-align: center;
Размер шрифта (font-size)
font-size устанавливает размер шрифта в пикселях (px) или относительных единицах (em). Например: font-size: 20px; или font-size: 2em; (в два раза больше значения по умолчанию, обычно 14px).
Стиль шрифта (font-style)
font-style задает стиль: normal (по умолчанию, обычный), italic (курсив).
Толщина шрифта (font-weight)
font-weight определяет жирность: normal (по умолчанию), bold (жирный), bolder (еще жирнее, чем bold; поддержка зависит от шрифта).
Семейство шрифтов (font-family)
font-family позволяет указать семейство шрифтов. Для шрифтов, доступных всем пользователям, рекомендуем сервис fonts.google.com. После выбора шрифта, скопируйте код @import и добавьте его в начало CSS-файла. Затем укажите имя шрифта в свойстве font-family, например: font-family: ‘Название шрифта’;. Можно указать несколько шрифтов через запятую, в порядке приоритета. Для указания конкретного стиля (например, жирности) используйте font-weight.
Преобразование регистра (text-transform)
text-transform меняет регистр: lowercase (нижний регистр), uppercase (верхний регистр), capitalize (каждая буква с большой).
Пробелы (word-spacing, letter-spacing)
word-spacing устанавливает расстояние между словами. letter-spacing — расстояние между символами. Можно использовать положительные и отрицательные значения.
Межстрочный интервал (line-height)
line-height задает расстояние между строками текста.
Дополнительные свойства
Можно использовать другие свойства, такие как text-decoration (например, для перечеркивания текста) и cursor (для изменения курсора мыши).
Изученные свойства CSS позволяют гибко управлять стилями текста на веб-страницах. Применяйте их к абзацам, ссылкам и другим элементам для достижения желаемого визуального эффекта.