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

Свойство 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"




Читайте также:

• Свойство text-align

• Свойство css border

• Свойство css background

• Свойство css transition

• Свойство vertical-align

• Свойство font

• Свойство text-decoration

• Свойство cursor (Курсоры)

• Свойство word-wrap


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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.