Прописные и строчные буквы в CSS: свойство text-transform
Если по какой-либо причине вам необходимо изменить регистр букв в тексте веб-страницы, на помощь придет свойство CSS text-transform. Какие значения можно устанавливать для данного свойства, смотрите в таблице ниже.
| Значение | Что делает |
|---|---|
| uppercase | Делает заглавными (прописными) все буквы в тексте |
| lowercase | Делает строчными все буквы в тексте |
| capitalize | Делает заглавной первую букву каждого слова в тексте |
| none | Не делает изменений |
| inherit | Наследует значение родителя |
Пример записи стиля:
Используйте значение uppercase , если вам нужно сделать все буквы большими в заголовке или абзаце текста, словно текст набран в режиме Caps Lock. В случае, когда вам требуется убрать все заглавные буквы, оставив только строчные, воспользуйтесь значением lowercase . Значение capitalize может пригодиться, к примеру, в веб-форме для поля «ФИО», чтобы каждое новое слово автоматически начиналось с прописной буквы.
Обратите внимание: применение text-transform в CSS никак не влияет на исходное содержимое веб-страницы. Регистр букв изменяется лишь во время отображения страницы в окне браузера, а сам текст HTML-документа остается неизменным.
Примеры отображения стилей можно увидеть на скриншоте:
Далее в учебнике: подчеркивание и зачеркивание текста с помощью свойства CSS text-decoration.
Как сделать первую букву заглавной css
В CSS нет свойства, которая делает первую букву заглавной. Но можно выбрать первый символ текста через псевдоэлемент :first-letter, и применить к нему свойство text-transform: uppercase. Псевдоэлемент :first-letter работает только с блочными элементами (не будет работать например со ). Чтобы :first-letter работало со строчными элементами, данному элементу надо задать свойство «inline-block» или «block».
p::first-letter text-transform: uppercase; >
text-transform
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного текста будет изменен.
Синтаксис
text-transform: capitalize | lowercase | uppercase | none | inherit
Значения
capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. lowercase Все символы текста становятся строчными (нижний регистр). uppercase Все символы текста становятся прописными (верхний регистр). none Не меняет регистр символов. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
text-transform Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-transform
Объектная модель
[window.]document.getElementById(» elementID «).style.textTransform
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Свойство text-transform, регистр символов
С помощью CSS можно также управлять регистром символов: делать буквы строчными (маленькими) или заглавными (большими). Делается это с помощью свойства text-transform . Его значения:
- lowercase — все строчные;
- uppercase — все заглавные;
- capitalize — каждое слово начинается с большой буквы;
- none — отменяет изменение регистра.
Без лишних слов — к практике!
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
На главную
Всё ещё день седьмой. Кекс выдал мне задание
Сегодня пришёл Кекс и дал мне немного необычное задание. По соседству с ним поселилась одна кошечка, а Кекс совсем не умеет сочинять песни. Поэтому он попросил меня найти какое-нибудь великое произведение, чтобы он смог исполнить его ей.
Как говорится, для хорошего кота и в феврале март
(народная мудрость).
Нашёл лирическое произведение для Кекса:
Мяу мяу мяу
мррр мяу мяяяу
мяу мяу
мяуСобрание произведений М. Котидзе.
