text-transform — CSS — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Алёна Батицкая советует
Кратко
Скопировано
Свойство text
позволяет трансформировать буквы в тексте. С помощью этого свойства можно сделать текст из одних заглавных или наоборот, из одних маленьких букв вне зависимости от формата исходного текста.
Это свойство важно. Вместо того, чтобы набирать текст одними заглавными буквами, лучше применить его. Поскольку в процессе жизни сайта тексты могут меняться, но их формат должен оставаться одинаковым. Нельзя гарантировать что контент-менеджер вставит текст, написанный заглавными, в нужное место.
Пример
Скопировано
<div> <h2>title case</h2> <p>Title case (англ. «регистр заголовка»)...</p> <article> <h3>who framed roger rabbit?</h3> <p>The overarching villain...</p> </article></div>
<div> <h2>title case</h2> <p>Title case (англ. «регистр заголовка»)...</p> <article> <h3>who framed roger rabbit?</h3> <p>The overarching villain...</p> </article> </div>
Текст в заголовке написан маленькими буквами, но по дизайну, как это часто случается, требуется, чтобы заголовок отображался заглавными буквами. Используем свойство text
. Заодно зададим это же свойство для второго заголовка, но со значением capitalize
, которое преобразует текст так, чтобы каждое новое слово начиналось с заглавной буквы.
.title { text-transform: uppercase;}.title-case { text-transform: capitalize;}
.title {
text-transform: uppercase;
}
.title-case {
text-transform: capitalize;
}
Открыть демо в новой вкладкеКак понять
Скопировано
Слово transform с английского языка переводится как трансформация — преобразование чего-то в нечто другое. Дословно можно перевести всё свойство как текст-трансформация. Или, говоря человеческим языком, трансформация текста.
Как пишется
Скопировано
Пишем свойство text
и после двоеточия указываем одно из доступных значений. Значения обозначаются ключевыми словами:
uppercase
— все буквы в тексте, к которому применяется это значение, будут трансформированы в заглавные.lowercase
— все буквы будут преобразованы в строчные, маленькие.capitalize
— каждое слово начинается с прописной, заглавной буквы. Это часто необходимо при работе с текстами на английском языке.full
— латинские буквы и иероглифы восточно-азиатских языков вписываются в квадрат.- width full
— латинские буквы и иероглифы восточно-азиатских языков вписываются в квадрат, но используются в рамках- size - kana <ruby>
элементов (например, когда вам нужно обозначить новый иероглиф, и сверху правила его чтения)none
— значение по умолчанию, отменяет все трансформации.
Подсказки
Скопировано
💡 Свойство трансформации нельзя анимировать при помощи свойства transition
😒
💡 Значение по умолчанию — none
.
💡 При применении свойства text
меняется регистр текста. Это означает, что при копировании текст будет именно таким, как отображается на экране.
<p>вниоптусх</p><p>Всероссийский научно-исследовательский...</p>
<p>вниоптусх</p>
<p>Всероссийский научно-исследовательский...</p>
.abbreviation { text-transform: uppercase;}
.abbreviation {
text-transform: uppercase;
}
Открыть демо в новой вкладкеЕсли скопировать текст и вставить куда-нибудь в текстовое поле, то можно заметить, что две буквы заглавные. А значит регистр исходного текста был изменён. А не просто поменялось внешнее отображение текста.
На практике
Скопировано
Алёна Батицкая советует
Скопировано
🛠 Довольно часто в макетах встречаются пункты меню, написанные заглавными буквами. Не нужно в разметке набирать текст заглавными. Скопируй текст из макета и примени свойство
text
.
<div> <a href="#"> <img src="../images/logo.png" alt="Company logo"> </a> <nav> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">О компании</a> </li> <li> <a href="#">Проекты</a> </li> <li> <a href="#">Контакты</a> </li> </ul> </nav></div>
<div>
<a href="#">
<img src="../images/logo.png" alt="Company logo">
</a>
<nav>
<ul>
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">О компании</a>
</li>
<li>
<a href="#">Проекты</a>
</li>
<li>
<a href="#">Контакты</a>
</li>
</ul>
</nav>
</div>
.Открыть демо в новой вкладкеmenu-list { text-transform: uppercase;}
.menu-list { text-transform: uppercase; }
Теперь если даже в меню добавится ещё пара пунктов, то они также будут отображаться заглавными буквами.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
text
ctrl + alt + ←
→
vertical
ctrl + alt + →
text-transform | WebReference
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён.
Краткая информация
Значение по умолчанию | none |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам |
Анимируется | Нет |
Синтаксис
text-transform: capitalize | lowercase | uppercase | noneСинтаксис
Описание | Пример | |
---|---|---|
<тип> | ![]() | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз.![]() | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- capitalize
- Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
- lowercase
- Все символы текста становятся строчными (нижний регистр).
- uppercase
- Все символы текста становятся прописными (верхний регистр).
- none
- Не меняет регистр символов.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
none capitalize lowercase uppercase
div { text-transform: {{ playgroundValue }}; }
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-transform</title> <style> h2 { text-transform: uppercase; /* Заглавные буквы */ } p { text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */ } </style> </head> <body> <h2>Культурный памятник Средневековья</h2> <p>Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства text-transform
Объектная модель
Объект.style.textTransform
Спецификация
Спецификация | Статус |
---|---|
CSS Text Level 4 | Редакторский черновик |
CSS Text Level 3 | Рабочий проект |
CSS Level 2 (Revision 1) | Рекомендация |
CSS Level 1 | Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
4 | 12 | 1 | 7 | 1 | 1 |
1 | 1 | 6 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Текст и шрифт
Свойство преобразования текста в CSS
❮ Назад Полное руководство по CSS Далее ❯
Пример
Преобразование текста в различные элементы
div.a {
текстовое преобразование: верхний регистр;
}
div.b {
преобразование текста: нижний регистр;
}
div.c {
text-transform: заглавные буквы;
}
Попробуйте сами »
Определение и использование
text-transform
управляет использованием заглавных букв в тексте.Показать демо ❯
Значение по умолчанию: | нет |
---|---|
Унаследовано: | да |
Версия: | CSS1 |
Синтаксис JavaScript: | объект .![]() |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Собственность | |||||
---|---|---|---|---|---|
преобразование текста | 1,0 | 4,0 | 1,0 | 1,0 | 7,0 |
Синтаксис CSS
преобразование текста: нет|заглавные буквы|верхний регистр|нижний регистр|начальный|наследовать;
Значения свойств
Значение | Описание | Демо |
---|---|---|
нет | Без заглавных букв. Текст отображается как есть. Это по умолчанию | Демонстрация ❯ |
с большой буквы | Преобразует первый символ каждого слова в верхний регистр | Демонстрация ❯ |
верхний регистр | Преобразует все символы в верхний регистр | Демонстрация ❯ |
нижний регистр | Преобразует все символы в нижний регистр | Демонстрация ❯ |
начальный | Устанавливает для этого свойства значение по умолчанию.![]() | |
унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Связанные страницы
Учебник CSS: Текст CSS Трансформация
Ссылка на HTML DOM: свойство textTransform
❮ Назад Полное руководство по CSS Следующий ❯
НАБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9004 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
4 Top5 Examples
4 Top5 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3. CSS.
Использование прописных букв в CSS: Руководство по использованию прописных и строчных букв в CSS
Добавление кода CSS в верхнем регистре экономит ваше время и усилия при ручном преобразовании строчных букв в прописные. Это может показаться сложным и слишком продвинутым, но все, что вам нужно сделать, это использовать CSS text-transform. Вот все, что вам нужно знать о верхнем регистре CSS и преобразовании текста.
Содержание
Что такое преобразование текста CSS?
Вы будете использовать свойство преобразования текста CSS, если у вас есть текст в элементе HTML и вы хотите использовать его с заглавной буквы. По сути text-transform в CSS дает вам возможность конвертировать любой текст в :
- Нижний регистр
- Верхний регистр
- Заголовок
Что такое синтаксис для преобразования текста?
Как правило, вам потребуется определить объект HTML, в котором находится текст, который вы хотите преобразовать. Затем вы вводите фигурные скобки. Внутри этих фигурных скобок вы разместите свойство text-transform.
Например, если бы мы писали текст в абзаце HTML с заглавной буквы, синтаксис был бы таким:
стр{ преобразование текста: использовать заглавные буквы; }
Как видите, стиль состоит из двух частей, разделенных полным двоеточием. Левая часть представляет свойство, а правая часть — значение. Также стоит отметить, что вы должны завершать строку кода точкой с запятой.
В качестве свойства text-transform принимает следующие значения.
- Нет: Это свойство гарантирует, что ваш текст не будет трансформироваться в заглавные буквы. Вы можете использовать его, чтобы сохранить исходный регистр вашего текста.
- Нижний регистр: Преобразует все текстовые символы в нижний регистр.
- Заглавные буквы: Это значение преобразует первую букву каждого слова в выделенном тексте или объектах в верхний регистр.
- Верхний регистр: Все символы в тексте будут в верхнем регистре. Это может быть особенно полезно при написании броских заголовков.
Использование свойства Text-Transform
- Text-transform дает вам возможность динамически преобразовывать текст посредством выбора объекта HTML.
- Позволяет легко писать имена собственные с заглавной буквы. При использовании text-transform имена пользователей будут отображаться как имена собственные.
- Для сообщений в блогах и заголовков. Добавление «заглавных букв» в text-transform может гарантировать, что заголовки постов в блоге будут в заголовке.
- Предотвращение изменения текста. Вы также можете передать значение «none» свойству text-transform, чтобы предотвратить манипулирование текстом.
- Знаки препинания в предложениях и абзацах, например, в блогах, новостных сайтах.
Подробнее о значениях преобразования текста
В CSS синтаксис требует свойства, за которым следует значение. Вам придется изменить свойство и значение.
Например, в нашем примере с заглавными буквами вы видите, что нам нужно изменить свойство text-transform. Что касается этого свойства, мы указываем, что хотим, чтобы преобразование было «заглавным». Чтобы понять это, взгляните на следующий код.
р{ преобразование текста: нет; }
По сути, свойства — это доступные характеристики объекта HTML, которыми вы можете манипулировать. В нашем примере это «p» или абзац. Так как наша программа гипотетически содержит какой-то текст, мы хотим, чтобы этот текст остался нетронутым — остался неизменным с точки зрения преобразования текста.
Поэтому, чтобы передать это через код, мы используем «text-transform: none;» Когда вы сравните код из нашей первой статьи, вы заметите, что мы заменили только «заглавные буквы» на «нет».
Чтобы понять все значения преобразования текста, мы разделим их на две основные категории: ключевые слова и глобальные значения. К глобальным значениям относятся наследование, инициализация, возврат и отмена.
Значения ключевых слов
CSS-трансформация. Другие буквы или символы остаются нетронутыми и неизменными.

Пример прописных букв CSS
<голова> <стиль> div.a { преобразование текста: верхний регистр; } стиль> голова> <тело>Верхний регистр CSS
преобразование текста: верхний регистр;
Vestibulum sed felis ut erat facilisis vestibulum id non libero.тело>
В этом простом коде мы присвоили класс div предложению Lorem Ipsum.