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 | Указывает, что значение наследуется от родительского элемента. |
Сделать первую или каждую букву заглавной
В CSS нет свойства, которая делает первую букву заглавной. Но можно выбрать первый символ текста через псевдоэлемент :first-letter , и применить к нему свойство text-transform: uppercase .
/* html code => Html code */ p::first-letter < text-transform: uppercase; >
Псевдоэлемент :first-letter работает только с блочными элементами (т.е. с такими тегами как данное свойство не будет работать). Чтобы :first-letter работало со строчными элементами, данному элементу надо задать свойство «inline-block» или «block».
/* не будет работать, т.к. строчный элемент */ span::first-letter < text-transform: uppercase; > /* с классом .ucfirst теперь блочный, и свойство будет работать */ .ucfirst < display: inline-block; > .ucfirst::first-letter < text-transform: uppercase; >
Сделать каждое слово с заглавной буквы
Сделать каждое слово с заглавной буквы можно через свойство text-transform: capitalize .
p < /* html code => Html Code */ text-transform: capitalize; >
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
Как сделать первую букву заглавной css
Нам понадобится div с классом (class) и немного предложений, которые будут обернуты в тег
Добавим стилей с псевдо элементом :first-letter , немного цвета : color: red; , установим первую букву заглавной в css » text-transform: uppercase; «
Получаем результат, когда первая буква будет заглавной CSS
Еще способы сделать первую букву заглавной в css.
Я как-то делал страницу посвященной теме «заглавная буква«, только не через CSS, а через php.
Не буду повторяться, вы можете ознакомиться
Свойство text-transform, регистр символов
С помощью CSS можно также управлять регистром символов: делать буквы строчными (маленькими) или заглавными (большими). Делается это с помощью свойства text-transform . Его значения:
- lowercase — все строчные;
- uppercase — все заглавные;
- capitalize — каждое слово начинается с большой буквы;
- none — отменяет изменение регистра.
Без лишних слов — к практике!
Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 16 января 2024. Всего от 5 250 ₽ в месяц.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
На главную
Всё ещё день седьмой. Кекс выдал мне задание
Сегодня пришёл Кекс и дал мне немного необычное задание. По соседству с ним поселилась одна кошечка, а Кекс совсем не умеет сочинять песни. Поэтому он попросил меня найти какое-нибудь великое произведение, чтобы он смог исполнить его ей.
Как говорится, для хорошего кота и в феврале март
(народная мудрость).
Нашёл лирическое произведение для Кекса:
Мяу мяу мяу
мррр мяу мяяяу
мяу мяу
мяуСобрание произведений М. Котидзе.