Теперь обратимся к способам изменения регистра букв текста с помощью свойства text-transform. Устанавливаемое по умолчанию значение none не оказывает на текст никакого воздействия: регистр, пришедший из исходного документа, не изменяется. Как следует из их имен, значения uppercase и lowercase переводят все символы текста в верхний и нижний регистр соответственно. И наконец, если указано значение capitalize, то прописной становится только первая буква каждого слова:
h1 {text-transform: capitalize;}
strong {text-transform: uppercase;}
p.cummings {text-transform: lowercase;}
p.raw {text-transform: none;}
<h1>The heading-one at the beginninG</h1>
<p>
By default, text is displayed in the capitalization it has in the source
document, but (strong)it is possible to change this(/strong) using the
property 'text-transform'.
</p>
<p class="cummings">
For example, one could Create TEXT such as might have been Written by the
late Poet e.e.cummings.
</p>
<p class="raw">
If you feel the need to Explicitly Declare the transformation of text to be
'none', that can be done as well.
</p>
Разные агенты пользователя могут применять разные методики обнаружения начала слова и в результате по-разному определять, какую букву переводить в верхний регистр. Например, визуальное представление текста «heading-one» элемента h1, показанного на рис. 6.24, могло бы быть сгенерировано одним из следующих двух способов: «Head-ingone» или «Heading-One». CSS не определяет, какой из них правильный, так что возможны оба. Это правильно, поскольку если для свойства text-transform задано значение capitalize, CSS требует от агентов пользователя лишь убедиться, что в верхний регистр переведена первая буква каждого слова. Все остальные символы слова игнорируются. Само по себе свойство text-transform может показаться незначительным, но оно очень полезно, если вдруг потребуется перевести в верхний регистр символы всех элементов h1. Вместо того чтобы изменять содержимое каждого элемента h1, достаточно применить text-transform:
h1 {text-transform: uppercase;}
<h1>This is an H1 element</h1>
Применяя text-transform, вы получаете двойное преимущество. Во-первых, для осуществления этого изменения достаточно написать одно правило, а не менять содержимое элементов h1. Во-вторых, если позже потребуется от всех прописных вернуться к первым заглавным, выполнить это изменение будет еще проще:
h1 {text-transform: capitalize;}
<h1>This is an H1 element</h1>