Text-transform в CSS

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

  • Данная статья написана командой Vertex Academy.
  • Это одна из статей из нашего Самоучителя по HTML&CSS.
  • Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.

За что отвечает  text-transform

Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:

  • General Electric
  • Game of Thrones
  • Microsoft Office

Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.

Для примера возьмем параграф из Википедии:

Слово компьютер является производным от английских слов to compute, computer, которые переводятся как «вычислять», «вычислитель» (английское слово, в свою очередь, происходит от латинского computāre — «вычислять»). ПЕРВОНАЧАЛЬНО В АНГЛИЙСКОМ ЯЗЫКЕ ЭТО СЛОВО ОЗНАЧАЛО ЧЕЛОВЕКА, ПРОИЗВОДЯЩЕГО АРИФМЕТИЧЕСКИЕ ВЫЧИСЛЕНИЯ С ПРИВЛЕЧЕНИЕМ ИЛИ БЕЗ ПРИВЛЕЧЕНИЯ МЕХАНИЧЕСКИХ УСТРОЙСТВ. В дальнейшем его значение было перенесено на сами машины, однако современные компьютеры выполняют множество задач, не связанных напрямую с математикой.

Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.

У text-transform есть 5 значений:

  • text-tranform: capitalize (Первая Буква Каждого Слова Будет Большой)
  • text-tranform: lowercase (все буквы будут маленькими)
  • text-transform: uppercase (ВСЕ БУКВЫ БУДУТ БОЛЬШИМИ)
  • text-transform: none (отменяет предыдущие форматирование)
  • text-tranform: inherit (наследует форматирование родителя)

Рассмотрим как это работает на практике. Представим, что у нас есть следующая HTML-страница:

Как видите, стили у нас подключены отдельным файлом style.css

Итак, пока никаких CSS-стилей мы не задали, текст в теге <p> будет выглядеть так:

ПРИМЕР 1

Чтоб сделать весь текст в теге <p> заглавными буквами, напишите в файле style.css следующее:

Получим:

ПРИМЕР 2

Чтоб сделать все буквы прописными, напишите следующее:

Получим:

ПРИМЕР 3

Чтобы сделать все первые буквы заглавными, напишите:

Получим:

Обратите внимание: слово, написанное полностью заглавными буквами, не изменилось.

ПРИМЕР 4

Теперь протестируем text-transorm: none.

Но в таком виде его тестировать не интересно. Давайте представим, что у нас еще есть h1:

Поменяем и файл со стилями. Давайте зададим text-transform: uppercase для всего body:

В итоге получим:

Но что если мы не хотим, чтобы текст параграфа <p> не менялся? Пишем:

Получаем:

ПРИМЕР 5

А теперь представим, что у нас есть несколько параграфов:

Допустим, для родительского тега body у нас задан один стиль, а для самих параграфов - другой:

В итоге сейчас это выглядит так:

Но что если мы хотим, чтобы один из параграфов имел стиль родителя? Например, мы хотим его выделить таким образом?

Давайте сделаем следующее - допишем ему text-transform: inherit:

Получим:

ИТОГО: 

  • Хотите, чтобы текст отображался ЗАГЛАВНЫМИ БУКВАМИ - используйте:

  • Хотите, чтобы текст отображался прописными буквами - используйте:

  • Хотите, чтобы Каждое Слово Было С Большой Буквы (чаще применяется в английском) - используйте:

  • Хотите отменить предыдущий стиль text-transform (заданный вами или кем-то другим) - используйте:

  • Хотите взять такой же text-transform как и у родительского элемента - используйте:

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr
Самоучители--узнать детальнее--