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+


Считаете ли это полезным?

Похожие статьи