CSS свойство text-transform

❮ Назад Вперед ❯

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

Свойство text-transform подчеркивает правила регистра, отражающие специфику данного языка.

Значения "full-width" и "full-width-kana" экспериментальные и пока не поддерживаются каким-либо браузером.

Значение по умолчанию	none
Применяется	Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется	Да
Анимируемое	Нет
Версия	CSS1
DOM синтаксис	object.style.textTransform = "capitalize";

Синтаксис

text-transform: none | capitalize | uppercase | lowercase | full-width | full-width-kana | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p{text-transform:uppercase}
    </style>
  </head>
  <body>
    <h2>Пример свойства text-transform</h2>
    <p>Какой-нибудь параграф.</p>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</div>
  </body>
</html>

Попробуйте сами!

Пример, где для первого предложения установлено значение "capitalize", а для второго "lowercase":

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .a {text-transform:capitalize}
      .b {text-transform:lowercase}
    </style>
  </head>
  <body>
    <h2>Пример свойства text-transform</h2>
    <div class="a">"Пример свойства text-transform"</div>
    </br>
    <div class="b">"Какой-нибудь параграф".</div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
none	Заглавные буквы не применены. Значение по умолчанию.
capitalize	Первая буква каждого слова заглавная.
uppercase	Первая буква каждого слова заглавная.
lowercase	Все буквы каждого слова строчные.
full-width	Символы переведены в полноширинную форму (идеографические символы и латинский алфавит).
full-width-kana	Все малые кана символы переведены в большие для компенсации проблем удобочитаемости при малых размерах шрифта.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.


1.0+	12.0+	1.0+	1.0+	7.0+

1.0+

12.0+

1.0+

7.0+

CSS свойство text-transform

Синтаксис

Пример

Пример

Значения

Поддержка браузера

Практикуйте свои знания