Как сделать заглавные буквы в css

text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного текста будет изменен.

Синтаксис

text-transform: capitalize | lowercase | uppercase | none | inherit

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Применение свойства text-transform

Рис. 1. Применение свойства text-transform

Объектная модель

[window.]document.getElementById(" elementID ").style.textTransform

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

CSS свойство text-transform

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

Свойство text-transform подчеркивает правила регистра, отражающие специфику данного языка.

Значение по умолчанию none
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Да
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.textTransform = "capitalize";

Синтаксис¶

Пример¶

Пример, где для первого предложения установлено значение "capitalize", а для второго "lowercase":

Прописные и строчные буквы в CSS: свойство text-transform

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

Значение Что делает
uppercase Делает заглавными (прописными) все буквы в тексте
lowercase Делает строчными все буквы в тексте
capitalize Делает заглавной первую букву каждого слова в тексте
none Не делает изменений
inherit Наследует значение родителя

Пример записи стиля:

Используйте значение uppercase , если вам нужно сделать все буквы большими в заголовке или абзаце текста, словно текст набран в режиме Caps Lock. В случае, когда вам требуется убрать все заглавные буквы, оставив только строчные, воспользуйтесь значением lowercase . Значение capitalize может пригодиться, к примеру, в веб-форме для поля «ФИО», чтобы каждое новое слово автоматически начиналось с прописной буквы.

Обратите внимание: применение text-transform в CSS никак не влияет на исходное содержимое веб-страницы. Регистр букв изменяется лишь во время отображения страницы в окне браузера, а сам текст HTML-документа остается неизменным.

Примеры отображения стилей можно увидеть на скриншоте:

Скриншот: пример использования свойства text-transform Скриншот: использование свойства text-transform

Далее в учебнике: подчеркивание и зачеркивание текста с помощью свойства CSS text-decoration.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *