Свойство CSS text-transform
Свойство CSS text-transform отвечает за написание строчных или заглавных букв (верхний и нижний регистр) в html.
Синтаксис CSS text-transform
- capitalize — каждое слово начинается с большой буквы
- lowercase — переводит все буквы в нижний регистр
- uppercase — переводит все буквы в верхний регистр
- none — отменяет все действия (по умолчанию)
- inherit — принять значение предка (родителя)
Примеры перевода в верхний и нижний регистр в HTML
Пример 1. Каждое слово с большой буквы в HTML
Вот как это выглядит на странице:
Пример 2. Все слова в нижнем регистре в HTML
Вот как это выглядит на странице:
Пример 3. Все слова в верхнем регистре в HTML
Вот как это выглядит на странице:
Для обращения к text-transform из JavaScript нужно писать следующую конструкцию:
Свойство text-transform
Свойство text-transform (от англ. «text transform» ‒ «преобразование текста») управляет эффектами капитализации текста элемента.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | Н/Д ; |
| Медиа : | визуальные. |
Примечание
Фактическое преобразование в каждом случае зависит от языка содержимого.
JavaScript
[объект] .style .textTransform =»[значение]»;
Поддержка браузерами
Спецификация
| CSS | Раздел | |
|---|---|---|
| 1 | 5.4.5 ‘text-transform’ | Перевод |
| 2 | 16.5 Capitalization: the ‘text-transform’ property | |
| 2.1 | 16.5 Capitalization: the ‘text-transform’ property | |
| 2.2 | 16.5 Capitalization: the ‘text-transform’ property | |
| 3 | 2.1. Case Transforms: the ‘text-transform’ property | |
Значения
capitalize Преобразует первую букву каждого слова в верхний регистр; другие символы не изменяются.
full-width Переводит все символы в полноширинную форму. Если символ не имеет соответствующей полноширинной формы, он остаётся как есть. Это значение обычно используется для печати латинских символов и цифр, таких как идеографические символы.
lowercase Преобразует все буквы элемента в нижний регистр.
none Эффект капитализации отсутствует (отменяет наследуемое значение).
uppercase Преобразует все буквы элемента в верхний регистр.
inherit Указывает, что элемент должен унаследовать параметры родительского элемента.
Text-transform в CSS
Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.
За что отвечает text-transform
Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:
- General Electric
- Game of Thrones
- Microsoft Office
Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.
Для примера возьмем параграф из Википедии:
Слово компьютер является производным от английских слов to compute , computer , которые переводятся как «вычислять», «вычислитель» (английское слово, в свою очередь, происходит от латинского computāre — «вычислять»). ПЕРВОНАЧАЛЬНО В АНГЛИЙСКОМ ЯЗЫКЕ ЭТО СЛОВО ОЗНАЧАЛО ЧЕЛОВЕКА, ПРОИЗВОДЯЩЕГО АРИФМЕТИЧЕСКИЕ ВЫЧИСЛЕНИЯ С ПРИВЛЕЧЕНИЕМ ИЛИ БЕЗ ПРИВЛЕЧЕНИЯ МЕХАНИЧЕСКИХ УСТРОЙСТВ. В дальнейшем его значение было перенесено на сами машины, однако современные компьютеры выполняют множество задач, не связанных напрямую с математикой.
Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.
У text-transform есть 5 значений:
- text-tranform: capitalize (Первая Буква Каждого Слова Будет Большой)
- text-tranform: lowercase (все буквы будут маленькими)
- text-transform: uppercase (ВСЕ БУКВЫ БУДУТ БОЛЬШИМИ)
- text-transform: none (отменяет предыдущие форматирование)
- text-tranform: inherit (наследует форматирование родителя)
Рассмотрим как это работает на практике. Представим, что у нас есть следующая HTML-страница:
Прописные и строчные буквы в CSS: свойство text-transform
Если по какой-либо причине вам необходимо изменить регистр букв в тексте веб-страницы, на помощь придет свойство CSS text-transform. Какие значения можно устанавливать для данного свойства, смотрите в таблице ниже.
| Значение | Что делает |
|---|---|
| uppercase | Делает заглавными (прописными) все буквы в тексте |
| lowercase | Делает строчными все буквы в тексте |
| capitalize | Делает заглавной первую букву каждого слова в тексте |
| none | Не делает изменений |
| inherit | Наследует значение родителя |
Пример записи стиля:
Используйте значение uppercase , если вам нужно сделать все буквы большими в заголовке или абзаце текста, словно текст набран в режиме Caps Lock. В случае, когда вам требуется убрать все заглавные буквы, оставив только строчные, воспользуйтесь значением lowercase . Значение capitalize может пригодиться, к примеру, в веб-форме для поля «ФИО», чтобы каждое новое слово автоматически начиналось с прописной буквы.
Обратите внимание: применение text-transform в CSS никак не влияет на исходное содержимое веб-страницы. Регистр букв изменяется лишь во время отображения страницы в окне браузера, а сам текст HTML-документа остается неизменным.
Примеры отображения стилей можно увидеть на скриншоте:
Скриншот: использование свойства text-transform
Далее в учебнике: подчеркивание и зачеркивание текста с помощью свойства CSS text-decoration.