text-transform

Описание

Свойство text-transform позволяет изменять регистр букв текста.

text-transform
Значения: capitalize | uppercase | lowercase | none | inherit
Начальное значение: none
Область применения: все элементы
Наследование: да
Поддержка браузерами: Internet Explorer 8+, Chrome 9+, Opera 9+, Safari 2+, Firefox 2+
Примечание:

По-умолчанию устанавливается значение none, которое не оказывает на текст никакого воздействия. Регистр текста остается прежним. Значения uppercase и lowercase преобразуют символы в верхний и нижний регистр, соответственно. Если указать значение capitalize, то только первые символы каждого слова будут прописными. Inherit наследует значение родителя.

Пример

h3 {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.capitalize {
	text-transform: capitalize;
}		
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
    <title>text-transform</title>
</head>
<body>
	<h3>Это заголовок. К нему применено свойство text-transform со значением uppercase. Все символы будут прописными.</h3>
	<p class="lowercase">К данному абзацу применено Свойство Text-transform со Значением Lowercase, а значит все буквы будут в нижнем регистре.</p>
	<p class="capitalize">А к этому, последнему абзацу применено свойствоо text-transform со свойством CAPITALIZE. Первые буквы каждого слова будут прописными, и только они.</p>
</body>
</html>

Результат

Свойство text-transform

Однако не все так просто. Присутствуют некоторые нюансы. Если обратить внимание на второй абзац вышеприведенного примера, то можно заметить, что слово capitalize, несмотря на примененное к абзацу свойство text-transform со значением capitalize, отображается полностью из прописных букв, что соответствует исходному тексту. Объясняется это тем, что при указанном значении capitalize проверяется только первые буквы слов, а остальные остаются неизменными, независимо от их первоначального состояния.
Несмотря на внешнюю простоту, свойство text-transform может оказаться очень полезным. Например, для того, чтобы сделать текст всех заголовков H1 вашего сайта прописным, достаточно лишь добавить в таблицу стилей одно свойство

h1 {text-transform: uppercase;}

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *