CSS text-transform, примеры. Перевод в верхний и нижний регистр букв в HTML

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

Синтаксис CSS text-transform

text-transform: capitalize | lowercase | uppercase | none | inherit;

Где:

capitalize - каждое слово начинается с большой буквы
lowercase - переводит все буквы в нижний регистр
uppercase - переводит все буквы в верхний регистр
none - отменяет все действия (по умолчанию)
inherit - принять значение предка (родителя)

Примеры перевода в верхний и нижний регистр в HTML

Пример 1. Каждое слово с большой буквы в HTML

<html>
<head>
<style>
	.primer1{ 
	text-transform: capitalize; 
	font-size: 14px; 
	}
</style>
</head>
<body>
	<div class="primer1">Каждое слово начинается с большой буквы</div> 
</body>
</html>

Вот как это выглядит на странице:

Каждое слово начинается с большой буквы

Пример 2. Все слова в нижнем регистре в HTML

<html>
<head>
<style>
	.primer2{ 
	text-transform: lowercase; 
	font-size: 14px; 
	}
</style>
</head>
<body>
	<div class="primer2">ВСЕ слова БУДУТ в нижним Регистре</div> 
</body>
</html>

Вот как это выглядит на странице:

ВСЕ слова БУДУТ в нижним Регистре

Пример 3. Все слова в верхнем регистре в HTML

<html>
<head>
<style>
	.primer3{ 
	text-transform: uppercase; 
	font-size: 14px; 
	}
</style>
</head>
<body>
	<div class="primer3">Верхний регистр для ВСЕХ слов</div> 
</body>
</html>

Вот как это выглядит на странице:

Верхний регистр для ВСЕХ слов

Для обращения к text-transform из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.textTransform="VALUE"

← Перейти в каталог CSS уроков