Text-transform в CSS • Vertex Academy
Vertex Academy text-transform css,сделать буквы заглавными css,сделать буквы маленькими css,сделать первые буквы заглавными css
- Данная статья написана командой Vertex Academy.
- Это одна из статей из нашего Самоучителя по HTML&CSS.
- Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Привет! В этой статье мы продолжим говорить об изменениях шрифтов с помощью CSS, а именно поговорим о том, как работает свойство text-transform.
Можно заметить, что часто заголовки пишутся прописными буквами. А в английском языке в названиях (например, книг, сериалов и пр.) первые буквы всех слов прописные:
- General Electric
- Game of Thrones
- Microsoft
Или, например, у Вас может возникнуть необходимость отобразить часть текста прописными буквами, а часть большими буквами.
Для примера возьмем параграф из Википедии:
Слово компьютер является производным от английских слов to compute, computer, которые переводятся как «вычислять», «вычислитель» (английское слово, в свою очередь, происходит от латинского computāre — «вычислять»). ПЕРВОНАЧАЛЬНО В АНГЛИЙСКОМ ЯЗЫКЕ ЭТО СЛОВО ОЗНАЧАЛО ЧЕЛОВЕКА, ПРОИЗВОДЯЩЕГО АРИФМЕТИЧЕСКИЕ ВЫЧИСЛЕНИЯ С ПРИВЛЕЧЕНИЕМ ИЛИ БЕЗ ПРИВЛЕЧЕНИЯ МЕХАНИЧЕСКИХ УСТРОЙСТВ. В дальнейшем его значение было перенесено на сами машины, однако современные компьютеры выполняют множество задач, не связанных напрямую с математикой.
Именно для того, чтобы поменять регистр текста (из прописных в заглавные, из заглавных в прописные) и используется свойство text-transform.
- text-tranform: capitalize (Первая Буква Каждого Слова Будет Большой)
- text-tranform: lowercase (все буквы будут маленькими)
- text-transform: uppercase (ВСЕ БУКВЫ БУДУТ БОЛЬШИМИ)
- text-transform: none (отменяет предыдущие форматирование)
- text-tranform: inherit (наследует форматирование родителя)
Рассмотрим как это работает на практике.
Представим, что у нас есть следующая HTML-страница:
<!DOCTYPE html> <html> <head> <meta charset = «utf-8″> <title>My Page</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <p>A paragraph with some TEXT</p> </body> </html>
|
2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset = «utf-8»> <title>My Page</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <p>A paragraph with some TEXT</p> </body> </html> |
Как видите, стили у нас подключены отдельным файлом style.css
Итак, пока никаких CSS-стилей мы не задали, текст в теге <p> будет выглядеть так:
ПРИМЕР 1
Чтоб сделать весь текст в теге <p> заглавными буквами, напишите в файле style.
css следующее:
p { text-transform: uppercase; }
p { text-transform: uppercase; } |
Получим:
ПРИМЕР 2
Чтоб сделать все буквы прописными, напишите следующее:
p { text-transform: lowercase; }
p { text-transform: lowercase; } |
Получим:
ПРИМЕР 3
Чтобы сделать все первые буквы заглавными, напишите:
p { text-transform: capitalize; }
p { text-transform: capitalize; } |
Получим:
Обратите внимание: слово, написанное полностью заглавными буквами, не изменилось.
ПРИМЕР 4
Теперь протестируем text-transorm: none.
Но в таком виде его тестировать не интересно. Давайте представим, что у нас еще есть h2:
<!DOCTYPE html> <html> <head> <meta charset = «utf-8″> <title>My Page</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <h2>Heading</h2> <p>A paragraph with some TEXT</p> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset = «utf-8»> <title>My Page</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <h2>Heading</h2> <p>A paragraph with some TEXT</p> </body> </html> |
Поменяем и файл со стилями.
Давайте зададим text-transform: uppercase для всего body:
body { text-transform: uppercase; }
body { text-transform: uppercase; } |
В итоге получим:
Но что если мы не хотим, чтобы текст параграфа <p> не менялся? Пишем:
body { text-transform: uppercase; } p { text-transform: none; }
|
2 3 4 5 6 7 |
body { text-transform: uppercase; }
p { text-transform: none; } |
Получаем:
ПРИМЕР 5
А теперь представим, что у нас есть несколько параграфов:
<!DOCTYPE html>
<html>
<head>
<meta charset = «utf-8″>
<title>My Page</title>
<link rel=»stylesheet» type=»text/css» href=»style.
css»>
</head>
<body>
<p>A paragraph with some TEXT</p>
<p>A paragraph with some TEXT</p>
<p>A paragraph with some TEXT</p>
</body>
</html>
|
1 2 34 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset = «utf-8»> <title>My Page</title> <link rel=»stylesheet» type=»text/css» href=»style.css»> </head> <body> <p>A paragraph with some TEXT</p> <p>A paragraph with some TEXT</p> <p>A paragraph with some TEXT</p> </body> </html> |
Допустим, для родительского тега body у нас задан один стиль, а для самих параграфов — другой:
body { text-transform: uppercase; } p { text-transform: none; }
|
1 2 3 4 5 6 7 |
body { text-transform: uppercase; }
p { text-transform: none; } |
В итоге сейчас это выглядит так:
Но что если мы хотим, чтобы один из параграфов имел стиль родителя? Например, мы хотим его выделить таким образом?
Давайте сделаем следующее — допишем ему text-transform: inherit:
<!DOCTYPE html>
<html>
<head>
<meta charset = «utf-8″>
<title>My Page</title>
<link rel=»stylesheet» type=»text/css» href=»style.
css»>
</head>
<body>
<p>A paragraph with some TEXT</p>
<p>A paragraph with some TEXT</p>
<p>A paragraph with some TEXT</p>
</body>
</html>
|
1 2 34 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset = «utf-8»> <title>My Page</title> <link rel=»stylesheet» type=»text/css» href=»style.css»> </head> <body> <p>A paragraph with some TEXT</p> <p>A paragraph with some TEXT</p> <p>A paragraph with some TEXT</p> </body> </html> |
Получим:
ИТОГО:
- Хотите, чтобы текст отображался ЗАГЛАВНЫМИ БУКВАМИ — используйте:
text-transform: uppercase;
text-transform: uppercase; |
- Хотите, чтобы текст отображался прописными буквами — используйте:
text-transform: lowercase;
text-transform: lowercase; |
- Хотите, чтобы Каждое Слово Было С Большой Буквы (чаще применяется в английском) — используйте:
text-transform: capitalize;
text-transform: capitalize; |
- Хотите отменить предыдущий стиль text-transform (заданный вами или кем-то другим) — используйте:
text-transform: none;
text-transform: none; |
- Хотите взять такой же text-transform как и у родительского элемента — используйте:
text-transform: inherit;
text-transform: inherit; |
Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End.
Детальнее о наших курсах у нас на сайте здесь.
Text-transform и копирование — Веб-стандарты
Что происходит при копировании текста с text-transform.
В CSS есть свойство text-transform. С помощью него можно менять регистр текста: можно преобразовать текст в ПРОПИСНЫЕ, строчные или Капитализировать Только Первые Буквы Слов. Это делается значениями uppercase, lowercase и capitalize, соответственно. Помимо них есть значения full-width и full-size-kana, про которые мы в этот раз говорить не будем.
Пример текста с text-transform: uppercase
Пример текста с text-transform: lowercase
Пример текста с text-transform: capitalize
Выше приведен пример использования свойства text-transform. Попробуйте скопировать любой из них и вставить куда-нибудь. Результат будет отличаться в зависимости от вашего браузера:
- Если у вас браузер на WebKit или Blink (Chrome, Safari, Opera 15+, Яндекс.
Браузер и вскоре даже Edge), то вставится измененный текст — тот, который вы видите в браузере. - В остальных браузерах (Firefox, IE и пока Edge) вставится исходный текст — тот, который написан в HTML.
Браузер и вскоре даже Edge), то вставится измененный текст — тот, который вы видите в браузере.Стандарт до недавнего времени не определял, какое поведение является верным, поэтому оно стало предметом споров в баг-трекерах. Баг для Firefox завели еще в 2000 году, баг для WebKit с противоположным смыслом — в 2010. У сторонников обоих вариантов есть аргументы.
Главный аргумент за копирование измененного текста, как в WebKit — соответствие ожиданиям пользователя. Человек не может понять, в результате чего текст отображается заглавными буквами. Может быть, он прописан таким образом в исходном коде, а может быть, к нему применено text-trasform: uppercase. Если пользователь будет копировать текст в верхнем регистре, а потом вставлять его и иногда видеть что-то другое, ему будет казаться, что веб сломался и глючит.
Аргумент другой стороны в том, что такое поведение нарушает принцип разделения содержимого и оформления.
CSS не должен влиять на контент страницы. А раз создатели сайта решили менять регистр через CSS, то они относятся к этому как к стилизации, и у пользователя должен быть доступ к изначальному варианту текста.
В 2016 году за этот вопрос взялась Рабочая группа CSS (CSSWG). При обсуждении выделили основные сценарии использования text-transform:
p::first-line { text-transform: uppercase }— первую строку набирают прописными буквами, как это иногда делают в англоязычной художественной литературе. В этом случае лучше копировать исходный текст, иначе он будет выглядеть странно.abbr { text-transform: lowercase; font-variant: small-caps }— аббревиатуры в тексте набирают капителью. Свойствоfont-variant: small-capsберёт специальное начертание для капители из шрифта или отображает строчные буквы как прописные, только уменьшенного размера, если их нет. В этом случае тоже лучше копировать исходный текст, иначе аббревиатуры будут набраны строчными буквами.h2 { text-transform: uppercase }— стилизуют заголовки с помощью прописных букв. Здесь применимы аргументы за оба варианта поведения.em { font-style: normal; text-transform: uppercase }— используют прописные буквы для выделения важных фрагментов. Здесь тоже применимы оба аргумента.
В результате обсуждений в рабочей группе, в 2018 году было принято решение: дополнить стандарт CSS указанием, что свойство text-transform не должно влиять на копируемый текст.
Сейчас баг в Firefox закрыт как «wontfix», баг в WebKit по-прежнему открыт. Но уже можно надеяться, что скоро его поправят, и копирование текста с text-transform начнет работать во всех браузерах одинаково.
text-transform — CSS: Каскадные таблицы стилей
Свойство CSS text-transform указывает, как использовать заглавные буквы в тексте элемента. Его можно использовать для отображения текста в верхнем или нижнем регистре или с заглавными буквами каждого слова.
Это также может помочь улучшить читаемость рубина.
Свойство text-transform учитывает правила отображения регистра для конкретного языка, такие как следующие:
- В тюркских языках, таких как турецкий (
tr), азербайджанский (az), крымский татарский (crh), поволжский татарский (tt) и башкирский (ba), есть два видаи, с точкой и без нее , и две пары корпусов:и/хих/и. - В немецком языке (
de)ßстановитсяSSв верхнем регистре. - В голландском (
nl) диграфijстановитсяIJ, даже сtext-transform: capitalize, который переводит только первую букву слова в верхний регистр. - В греческом языке (
el) гласные теряют ударение, когда все слово написано прописными буквами (ά/Α), за исключением дизъюнктива eta (ή/Ή). Кроме того, дифтонги с ударением на первой гласной теряют ударение и получают диэрезис на второй гласной (άι/ΑΪ). - На греческом (
el), символ сигмы в нижнем регистре имеет две формы:σиς.ςиспользуется только тогда, когда сигма завершает слово. При примененииtext-transform: нижний регистрк сигме в верхнем регистре (Σ) браузеру необходимо выбрать правильную форму нижнего регистра в зависимости от контекста. - в ирландском языке (
ga), некоторые буквы с префиксом остаются строчными, когда базовая начальная буква заглавная, поэтому, например,text-transform: uppercaseизменитАР АОН ЦЛнаАР АОН ЦЛ, а не, как можно было бы ожидать,АР АОН ЦЛ(только Firefox). В некоторых случаях дефис также удаляется при переводе в верхний регистр:t-uisceпреобразуется вAN tUISCE(и дефис правильно вставляется с помощьюtext-transform: нижний регистр).
Кроме того, дифтонги с ударением на первой гласной теряют ударение и получают диэрезис на второй гласной (
Язык определяется атрибутом HTML lang или атрибутом XML xml:lang .
Примечание: Поддержка случаев, зависящих от языка, зависит от браузера, поэтому сверьтесь с таблицей совместимости браузеров.
/* Значения ключевых слов */ преобразование текста: нет; преобразование текста: использовать заглавные буквы; преобразование текста: верхний регистр; преобразование текста: нижний регистр; преобразование текста: полная ширина; преобразование текста: полноразмерная кана; /* Глобальные значения */ преобразование текста: наследовать; преобразование текста: начальный; преобразование текста: вернуться; преобразование текста: возврат слоя; преобразование текста: не установлено;
-
с большой буквы Это ключевое слово, которое преобразует первую букву каждого слова в верхний регистр. Другие символы остаются без изменений (они сохраняют свой первоначальный регистр, как написано в тексте элемента).
Буква определяется как символ, который является частью общих категорий Unicode Letter или Number Экспериментальный ; таким образом, любые знаки препинания или символы в начале слова игнорируются.Примечание: Авторы не должны ожидать, что
будет использовать заглавную букву, чтобы следовать соглашениям о регистре заголовков, зависящим от языка (например, пропускать статьи на английском языке).Примечание: Ключевое слово
с заглавной буквыбыло недостаточно указано в CSS 1 и CSS 2.1. Это привело к различиям между браузерами в том, как вычислялась первая буква (Firefox считал-и_как буквы, а в других браузерах нет. И Webkit, и Gecko ошибочно считали буквенные символы, такие какⓐ, настоящими буквами. Internet Explorer 9 был наиболее близок к определению CSS 2, но с некоторыми странными случаями. ) Точно определяя правильное поведение, CSS Text Level 3 убирает этот беспорядок. Строка с заглавной буквыв таблице совместимости браузеров содержит версию, в которой различные движки начали поддерживать это теперь точно определенное поведение.-
верхний регистр Ключевое слово, которое преобразует все символы в верхний регистр.
-
нижний регистр Ключевое слово, которое преобразует все символы в нижний регистр.
-
нет Ключевое слово, которое предотвращает изменение регистра всех символов.
-
полная ширина — это ключевое слово, которое заставляет писать символы — в основном идеограммы и латинские буквы — внутри квадрата, что позволяет выравнивать их в обычных восточноазиатских шрифтах (например, китайском или японском).
-
полноразмерная кана Обычно используется для текста аннотации
Буква определяется как символ, который является частью общих категорий Unicode Letter или Number Экспериментальный ; таким образом, любые знаки препинания или символы в начале слова игнорируются.
) Точно определяя правильное поведение, CSS Text Level 3 убирает этот беспорядок. Строка 
Это ключевое слово преобразует все мелкие символы кана в эквивалентные полноразмерные символы кана, чтобы компенсировать проблемы с читаемостью при небольших размерах шрифта, обычно используемых в ruby. Большие фрагменты текста, установленные со значением text-transform в верхнем регистре , могут быть трудны для чтения людям с когнитивными проблемами, такими как дислексия.
- MDN Понимание WCAG, пояснения к Руководству 1.4
- Понимание W3C WCAG 2.1
| Исходное значение | нет |
|---|---|
| Применяется ко всем элементам | . Это также относится к ::first-letter и ::first-line . |
| Унаследовано | да |
| Вычисленное значение | как указано |
| Тип анимации | дискретный |
преобразование текста =
нет |
[ с большой буквы | верхний регистр | нижний регистр ] || полная ширина || полноразмерная кана |
математика-авто |
полужирный математический |
математический курсив |
математика-жирный-курсив |
двойной удар по математике |
математика-жирный-фрактур |
математический скрипт |
математический полужирный шрифт |
математический анализ |
математика без засечек |
математический полужирный шрифт без засечек |
математика-без засечек-курсив |
math-sans-serif-bold-italic |
математика-монопространство |
начальная математика |
математический хвост |
математическая петля |
math-stretched
Пример использования «none»
Начальная строка Lorem ipsum dolor sit amet, consectetur adipisicing elit…
<р> преобразование текста: нет Lorem ipsum dolor sit amet, consectetur adipisicing elit…
диапазон {
преобразование текста: нет;
}
сильный {
поплавок: справа;
}
Это демонстрирует отсутствие преобразования текста.
Пример использования «заглавных букв» (общий)
Начальная строка Lorem ipsum dolor sit amet, consectetur adipisicing elit…
<р> преобразование текста: капитализировать Lorem ipsum dolor sit amet, consectetur adipisicing elit…
диапазон {
преобразование текста: использовать заглавные буквы;
}
сильный {
поплавок: справа;
}
Это демонстрирует использование заглавных букв в тексте.
Пример использования «заглавной буквы» (пунктуация)
Начальная строка (this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡трансформироваться!
<р> преобразование текста: капитализировать (this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡трансформироваться!
диапазон {
преобразование текста: использовать заглавные буквы;
}
сильный {
поплавок: справа;
}
Это демонстрирует, как игнорируются начальные знаки препинания в слове.
Ключевое слово нацелено на первую букву, то есть на первую часть символа Юникода в общей категории «Буква» или «Число».
Пример использования слова «заглавная» (символы)
Начальная строка ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙкл
<р> преобразование текста: капитализировать ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
диапазон {
преобразование текста: использовать заглавные буквы;
}
сильный {
поплавок: справа;
}
Это демонстрирует, как игнорируются начальные символы. Ключевое слово нацелено на первую букву, то есть на первую часть символа Юникода в общей категории «Буква» или «Число».
Пример использования «заглавной буквы» (голландский ij digraph)
Начальная строка Голландское слово "ijsland" начинается с диграфа.
<р> преобразование текста: капитализировать Голландское слово "ijsland" начинается с диграфа.
диапазон {
преобразование текста: использовать заглавные буквы;
}
сильный {
поплавок: справа;
}
Это демонстрирует, как голландский ij орграф должен обрабатываться как одна буква.
Пример использования «верхнего регистра» (общий)
Начальная строка Lorem ipsum dolor sit amet, consectetur adipisicing elit…
<р> преобразование текста: верхний регистр Lorem ipsum dolor sit amet, consectetur adipisicing elit…
диапазон {
преобразование текста: верхний регистр;
}
сильный {
поплавок: справа;
}
Это демонстрирует преобразование текста в верхний регистр.
Пример использования «верхнего регистра» (греческие гласные)
Начальная строка Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"
<р> преобразование текста: верхний регистр Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"
диапазон {
преобразование текста: верхний регистр;
}
сильный {
поплавок: справа;
}
Это демонстрирует, как греческие гласные, за исключением разделительного eta , не должны иметь ударения, а ударение на первой гласной в паре гласных становится диэрезисом на второй гласной.
Пример использования строчных букв (общий)
Начальная строка Lorem ipsum dolor sit amet, consectetur adipisicing elit…
<р> преобразование текста: нижний регистр Lorem ipsum dolor sit amet, consectetur adipisicing elit…
диапазон {
преобразование текста: нижний регистр;
}
сильный {
поплавок: справа;
}
Это демонстрирует преобразование текста в нижний регистр.
Пример использования строчной буквы (греч. Σ)
Начальная строка Σ — ЭТО ГРЕЧЕСКАЯ БУКВА, которая НЕСКОЛЬКО РАЗ появляется в ΟΔΥΣΣΕΥΣ.
<р> преобразование текста: нижний регистр Σ ЭТО ГРЕЧЕСКАЯ БУКВА, НЕСКОЛЬКО РАЗ ПОЯВЛЯЮЩАЯСЯ В ΟΔΥΣΣΕΥΣ.
диапазон {
преобразование текста: нижний регистр;
}
сильный {
поплавок: справа;
}
Это демонстрирует, как сигма греческого символа ( Σ ) трансформируется в обычную строчную сигму ( σ ) или вариант окончания слова ( ς ), в зависимости от контекста.
Пример использования строчных букв (литовский)
Начальная строка Ĩ — литовская БУКВА, как и J́
<р> преобразование текста: нижний регистр Ĩ — это литовская БУКВА, как и J́
диапазон {
преобразование текста: нижний регистр;
}
сильный {
поплавок: справа;
}
Это демонстрирует, как литовские буквы Ĩ и J́ сохраняют свою точку при преобразовании в нижний регистр.
Пример использования «полной ширины» (общий)
Начальная строка 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
<р> преобразование текста: полная ширина 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
диапазон {
преобразование текста: полная ширина;
}
сильный {
ширина: 100%;
поплавок: справа;
}
Некоторые символы существуют в двух форматах: обычной ширины и полной ширины, с разными кодовыми точками Unicode.
Полноширинная версия используется для плавного смешивания их с азиатскими идеографическими символами.
Пример использования «полной ширины» (японская катакана половинной ширины)
<р>
Начальная строка
ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強
<р>
преобразование текста: полная ширина
ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強
диапазон {
преобразование текста: полная ширина;
}
сильный {
ширина: 100%;
поплавок: справа;
}
Японская катакана половинной ширины использовалась для представления катаканы в 8-битных кодах символов. В отличие от обычных (полноширинных) символов катаканы, буква с дакутэн (звонкий звуковой знак) представлена двумя кодовыми точками: телом буквы и дакутэн. полная ширина объединяет их в одну кодовую точку при преобразовании этих символов в полную ширину.
Пример использования «полноразмерная кана»
ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇼ ㇽㇾㇿヿヿヿ
ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ
p:n-й тип(2) {
преобразование текста: полноразмерная кана;
}
| Спецификация |
|---|
| Текстовый модуль CSS, уровень 3 # text-transform |
Таблицы BCD загружаются только в браузере
с включенным JavaScript.
Включите JavaScript для просмотра данных.-
вариант шрифта
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие? Узнайте
, как внести свой вклад.
Последнее изменение этой страницы: участников MDN.
Использование прописных букв в CSS: Руководство по использованию прописных и строчных букв в CSS
Добавление кода CSS в верхнем регистре экономит ваше время и усилия при ручном преобразовании строчных букв в прописные. Это может показаться сложным и слишком продвинутым, но все, что вам нужно сделать, это использовать CSS text-transform. Вот все, что вам нужно знать о верхнем регистре CSS и преобразовании текста.
Содержание
Что такое преобразование текста CSS?
Свойство CSS text-transform следует использовать, если у вас есть текст в элементе 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.Верхний регистр CSS
преобразование текста: верхний регистр;
Vestibulum sed felis ut erat facilisis vestibulum id non libero.
a {
преобразование текста: верхний регистр;
}
<тело>
В этом простом коде мы присвоили класс div предложению Lorem Ipsum. Обратите внимание, что код CSS включает в себя идентификатор div предложения вместо «p». Затем следует «текстовое преобразование: верхний регистр;».
Если преобразовать код этого примера с помощью онлайн-текстового редактора CSS, текст примет вид «VESTIBULUM SED FELIS UT ERAT FACILISIS VESTIBULUM ID NON LIBERO».
Краткий обзор верхнего регистра CSS
В двух словах, text-transform предоставляет вам возможность изменить регистр текста на веб-странице. Вы можете добиться использования всех заглавных букв в CSS, используя ключевое слово «заглавные буквы». Кроме того, text-transform capitalize преобразует все первые буквы во всех словах в верхний регистр.