Css текст заглавными буквами: Свойство text-transform, регистр символов — Оформление текста — HTML Academy

Leave a Comment / Css / By /

Содержание

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
    O    ffice

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

Для примера возьмем параграф из Википедии:

Слово компьютер является производным от английских слов 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>

1

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; }

1

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

3

4

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

3

4

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 | CSS | 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>Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами. </p> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-transform

Объектная модель

Объект.style.textTransform

Спецификация

СпецификацияСтатус
CSS Text Module Level 4Рабочий проект
CSS Text Module Level 3Рабочий проект
CSS Level 2 Revision 1 (CSS 2.1)Рекомендация
CSS Level 1Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4121711
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Текст и шрифт

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

text-transform — CSS — Дока

  1. Кратко
  2. Пример
  3. Как это понять
  4. Как пишется
  5. Подсказки
  6. На практике
    1. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Свойство text-transform позволяет трансформировать буквы в тексте. С помощью этого свойства можно сделать текст из одних заглавных или наоборот, из одних маленьких букв вне зависимости от формата исходного текста.

Это свойство важно. Вместо того, чтобы набирать текст одними заглавными буквами, лучше применить его. Поскольку в процессе жизни сайта тексты могут меняться, но их формат должен оставаться одинаковым. Нельзя гарантировать что контент-менеджер вставит текст, написанный заглавными, в нужное место.

Пример

Секция статьи «Пример»
<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-transform. Заодно зададим это же свойство для второго заголовка, но со значением capitalize, которое преобразует текст так, чтобы каждое новое слово начиналось с заглавной буквы.

.title {  text-transform: uppercase;}. title-case {  text-transform: capitalize;}
          .title {
  text-transform: uppercase;
}
.title-case {
  text-transform: capitalize;
}
Открыть демо в новой вкладке

Как это понять

Секция статьи «Как это понять»

Слово transform с английского языка переводится как трансформация — преобразование чего-то в нечто другое. Дословно можно перевести всё свойство как текст-трансформация. Или, говоря человеческим языком, трансформация текста.

Как пишется

Секция статьи «Как пишется»

Пишем свойство text-transform и после двоеточия указываем одно из доступных значений. Значения обозначаются ключевыми словами:

  • uppercase — все буквы в тексте, к которому применяется это значение, будут трансформированы в заглавные.
  • lowercase — все буквы будут преобразованы в строчные, маленькие.
  • capitalize — каждое слово начинается с прописной, заглавной буквы. Это часто необходимо при работе с текстами на английском языке.
  • full-width — латинские буквы и иероглифы восточно-азиатских языков вписываются в квадрат.
  • full-size-kana — латинские буквы и иероглифы восточно-азиатских языков вписываются в квадрат, но используются в рамках <ruby> элементов (например, когда вам нужно обозначить новый иероглиф, и сверху правила его чтения)
  • none — значение по умолчанию, отменяет все трансформации.

Подсказки

Секция статьи «Подсказки»

💡 Свойство трансформации нельзя анимировать при помощи свойства transition 😒

💡 Значение по умолчанию — none.

💡 При применении свойства text-transform меняется регистр текста. Это означает, что при копировании текст будет именно таким, как отображается на экране.

<p>вниоптусх</p><p>Всероссийский научно-исследовательский. ..</p>
          <p>вниоптусх</p>
<p>Всероссийский научно-исследовательский...</p>

.abbreviation {  text-transform: uppercase;}
          .abbreviation {
  text-transform: uppercase;
}
Открыть демо в новой вкладке

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

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 Довольно часто в макетах встречаются пункты меню, написанные заглавными буквами. Не нужно в разметке набирать текст заглавными. Скопируй текст из макета и примени свойство text-transform.

<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-align

alt + ←

→

vertical-align

alt + →

CSS All Caps: пошаговое руководство

Кристина Копецки — 29 декабря 2020 г.

Свойство CSS text-transform: uppercase устанавливает для содержимого текстового элемента все заглавные буквы. Вы также можете использовать это свойство, чтобы установить для содержимого текстового элемента нижний регистр или регистр заголовка. text-transform может применяться к абзацам, заголовкам или любому другому текстовому элементу.

При написании и разработке веб-сайта разработчики могут использовать свойства CSS для настройки регистра текстового шрифта, если это необходимо. В этой статье мы поговорим о двух способах: с помощью преобразования текста и с помощью варианта шрифта. Давайте посмотрим на синтаксис обоих.

CSS Все заглавные буквы

Вы можете изменить содержимое текстового элемента на все прописные, используя свойство CSS text-transform. Это свойство определяет, как текст на веб-странице пишется заглавными буквами. Вы также можете использовать это свойство, чтобы установить содержимое текстового элемента в нижний регистр.

Найдите свой матч для буткемпа

  • Career Karma подберет для вас лучшие учебные курсы по технологиям
  • Получите доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите свой интерес
Программная инженерия Дизайн Наука о данных Аналитика данных Продажи Кибербезопасность Цифровой маркетинг Имя

Фамилия

Эл. адрес

Номер телефона

Продолжая, вы соглашаетесь с нашими условия обслуживания а также Политика конфиденциальности , и вы соглашаетесь получать предложения и возможности от Career Karma по телефону, текстовым сообщениям и электронной почте.

Чтобы в блоке текста были все заглавные буквы, используйте преобразование текста: верхний регистр в вашем селекторе CSS:

преобразование текста: верхний регистр;

Свойство text-transform принимает три возможных значения:

  • верхний регистр: переводит каждое слово в текстовый элемент в верхний регистр.
  • нижний регистр: переводит текст в нижний регистр.
  • капитализация: Делает каждое слово заглавным, также известным как заглавный регистр.

Давайте посмотрим на пример метода преобразования текста в действии.

Пример CSS для всех заглавных букв

Мы собираемся создать веб-страницу, которая отображает «Эта страница не существует». всеми заглавными буквами.

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

Мы собираемся использовать метод преобразования текста, чтобы быть в безопасности.

Давайте определим HTML-документ с нашим текстом и правилом преобразования текста:

 
 
 <голова>
   <стиль>
     п {
       преобразование текста: верхний регистр;
     }
   
 
 <тело>
 
   
это все заглавными буквами

Все буквы в выделенном тексте отображаются в верхнем регистре.

Во-первых, мы определяем тег. Этот тег включает тег