Войти
Регистрация

Трансформация текста в CSS

Трансформация текста в CSS

Здравствуйте, дорогие друзья!

В любом тексте не обойтись без его трансформации, а именно в каждом тексте есть заголовки, которые иногда нужно выделить не только жирным или подчеркиванием, а еще и сделать все буквы заглавными, либо наоборот строчными.

В предыдущей статье подчеркивания текста было свойство text-decoration, в этой теме почти похожее по названию свойство text-transform, которое принимает 3 свойства: capitalize, uppercase и lowercase

Каждое значение этого свойства трансформирует текст по-своему. Теперь, чтобы изменить регистр букв не нужно лезть в HTML-код и переписывать строку.

1. Capitalize - первый символ каждого слова заглавный:

p {
   text-transform: capitalize;
}

Результат: Абзац с текстом

2. Uppercase - все буквы в тексте заглавные:

p {
   text-transform: uppercase;
}

Результат: Абзац с текстом

3. Lowercase - все буквы в тексте прописные:

p {
   text-transform: lowercase;
}

Результат: Абзац с текстом

Вот так просто можно менять регистр букв в любом предложении при создании сайта.

До встречи в следующей статье и помните про практику после каждой статьи.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?