Как сделать первую букву заглавной 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 .
Прописные и строчные буквы в CSS: свойство text-transform
Если по какой-либо причине вам необходимо изменить регистр букв в тексте веб-страницы, на помощь придет свойство CSS text-transform. Какие значения можно устанавливать для данного свойства, смотрите в таблице ниже.
| Значение | Что делает |
|---|---|
| uppercase | Делает заглавными (прописными) все буквы в тексте |
| lowercase | Делает строчными все буквы в тексте |
| capitalize | Делает заглавной первую букву каждого слова в тексте |
| none | Не делает изменений |
| inherit | Наследует значение родителя |
Пример записи стиля:
Используйте значение uppercase , если вам нужно сделать все буквы большими в заголовке или абзаце текста, словно текст набран в режиме Caps Lock. В случае, когда вам требуется убрать все заглавные буквы, оставив только строчные, воспользуйтесь значением lowercase . Значение capitalize может пригодиться, к примеру, в веб-форме для поля «ФИО», чтобы каждое новое слово автоматически начиналось с прописной буквы.
Обратите внимание: применение text-transform в CSS никак не влияет на исходное содержимое веб-страницы. Регистр букв изменяется лишь во время отображения страницы в окне браузера, а сам текст HTML-документа остается неизменным.
Примеры отображения стилей можно увидеть на скриншоте:
Далее в учебнике: подчеркивание и зачеркивание текста с помощью свойства CSS text-decoration.
text-transform
CSS свойство text-transform контролирует использование строчных и прописных букв в тексте. Оно позволяет весь текст сделать написанным заглавными буквами или строчными. С помощью свойства text-transform можно сделать так, чтобы каждое слово в тексте начиналось с заглавной буквы.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
| Анимируется: | нет |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.textTransform=»uppercase» |
Синтаксис
text-transform: none|capitalize|uppercase|lowercase|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| none | Текст отображается без изменений. |
| capitalize | Переделывает первую букву каждого слова в прописную. |
| uppercase | Переделывает все символы в прописные. |
| lowercase | Переделывает все символы в строчные. |
| inherit | Указывает, что значение наследуется от родительского элемента. |