Коротко: заглавные буквы в CSS делают свойством text-transform: uppercase. Есть также capitalize для первой буквы каждого слова и lowercase для строчных. Свойство меняет отображение текста, но не сам текст в разметке.
text-transform меняет вид, а не содержимое, поэтому поисковики и скринридеры видят исходный текст.Значения text-transform
| Значение | Результат |
|---|---|
uppercase |
ВСЕ ЗАГЛАВНЫЕ |
lowercase |
все строчные |
capitalize |
Первая Буква Слова |
none |
без изменений |
Пример
.btn {
text-transform: uppercase;
letter-spacing: 1px;
}
.title { text-transform: capitalize; }Для заглавных важно добавлять letter-spacing: прописные буквы выглядят плотнее, и небольшой разряд улучшает читаемость.
Вкладки: приёмы оформления
p::first-letter {
text-transform: uppercase;
font-size: 2em;
float: left;
}Буквица — крупная первая буква абзаца. Псевдоэлемент ::first-letter меняет только первый символ.
.caps { font-variant: small-caps; }small-caps показывает строчные буквы как уменьшенные прописные — аккуратный типографский приём для заголовков и имён.
.label { text-transform: lowercase; }
.label::first-letter { text-transform: uppercase; }Комбинируя свойства, получают свой формат. Но не увлекайтесь: слишком много преобразований усложняют вёрстку и перевод.
text-transform не меняет текст в HTML. Скопированный со страницы текст вернётся в исходном регистре, а поисковики увидят именно его. Если регистр важен для данных, правьте текст, а не только стиль.Практика: оформить заголовки
- Решите, где нужны заглавные: кнопки, меню, ярлыки.
- Задайте
text-transform: uppercaseнужному классу. - Добавьте
letter-spacingдля читаемости. - Проверьте, не выглядит ли текст слишком «кричащим».
- Убедитесь, что перевод интерфейса не ломается.
- Проверьте текст в разных браузерах.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Текст скопирован строчными | регистр меняет только CSS | правьте текст или это ожидаемо |
| Заглавные «слипаются» | нет разряда | letter-spacing |
| Ломается перевод | регистр зависит от языка | не форсировать uppercase |
| Акцент выглядит грубо | заглавные везде | оставить для акцентов |
| Не сработал на части текста | правило перебито | проверить приоритет селектора |
Проверьте себя
capitalize?
Вопросы и ответы
Нет, только отображение. В исходном HTML регистр остаётся прежним: скопируете со страницы — получите как в разметке.
Прописные буквы визуально плотнее, и без разрядки слова читаются хуже. Небольшой letter-spacing решает проблему.
uppercase делает заглавными все буквы, capitalize — только первые буквы слов. Для кнопок чаще берут uppercase, для заголовков — capitalize.
Слова кажутся «кричащими», теряется различие между словами, и читать тяжелее. Заглавные уместны для коротких акцентов: кнопок, ярлыков, заголовков.
Итоги
- Заглавные —
text-transform: uppercase. capitalizeделает заглавной первую букву слова.- Свойство меняет вид, а не текст в разметке.
- Для длинного текста заглавные буквы неудобны.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.