Свойство CSS text-transform отвечает за написание строчных или заглавных букв (верхний и нижний регистр) в html.
Синтаксис CSS text-transform
text-transform: capitalize | lowercase | uppercase | none | inherit;
Где:
- capitalize - каждое слово начинается с большой буквы
- lowercase - переводит все буквы в нижний регистр
- uppercase - переводит все буквы в верхний регистр
- none - отменяет все действия (по умолчанию)
- inherit - принять значение предка (родителя)
Примеры перевода в верхний и нижний регистр в HTML
Пример 1. Каждое слово с большой буквы в HTML
<html> <head> <style> .primer1{ text-transform: capitalize; font-size: 14px; } </style> </head> <body> <div class="primer1">Каждое слово начинается с большой буквы</div> </body> </html>
Вот как это выглядит на странице:
Каждое слово начинается с большой буквы
Пример 2. Все слова в нижнем регистре в HTML
<html> <head> <style> .primer2{ text-transform: lowercase; font-size: 14px; } </style> </head> <body> <div class="primer2">ВСЕ слова БУДУТ в нижним Регистре</div> </body> </html>
Вот как это выглядит на странице:
ВСЕ слова БУДУТ в нижним Регистре
Пример 3. Все слова в верхнем регистре в HTML
<html> <head> <style> .primer3{ text-transform: uppercase; font-size: 14px; } </style> </head> <body> <div class="primer3">Верхний регистр для ВСЕХ слов</div> </body> </html>
Вот как это выглядит на странице:
Верхний регистр для ВСЕХ слов
Для обращения к text-transform из JavaScript нужно писать следующую конструкцию:
[window.]document.getElementById("elementID").style.textTransform="VALUE"
Читайте также:
• Свойство text-align
• Свойство css border
• Свойство css background
• Свойство css transition
• Свойство vertical-align
• Свойство font
• Свойство text-decoration
• Свойство cursor (Курсоры)
• Свойство word-wrap