text-transform: визуальное преобразование регистра

Назначение

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

Как это работает

uppercase делает буквы прописными, lowercase — строчными, capitalize преобразует начальные буквы слов по правилам браузера. Некоторые преобразования зависят от языка, поэтому lang должен соответствовать тексту.

Пример

<style>
.label{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
</style>
<p class="label" lang="ru">Учебный справочник</p><p>Основной текст сохраняет обычный регистр.</p>

Что должно получиться

Короткая метка показана прописными буквами. Исходная строка остаётся «Учебный справочник», а длинный текст не получает дополнительную нагрузку от сплошных заглавных.

Граница применения и частая ошибка

Не используйте CSS-регистр как нормализацию идентификаторов или данных формы. Сервер получает исходные данные, а языковые правила преобразования не всегда совпадают с ожиданием приложения.

Самостоятельная проверка

Примените uppercase к короткой метке и сравните с длинным абзацем. Затем посмотрите исходный HTML: он не должен измениться из-за визуального преобразования.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Каскад и специфичность
• Модель размеров
• Отладка стилей