Как сделать в CSS заглавные буквы?

Категория: Сайтостроение, Опубликовано: 2017-03-20
Автор:

Оформляя страницу сайта, нам не редко приходится выделять заголовки или какие-то фрагменты текста заглавными буквами. Конечно, в случае если это нужно сделать один раз, то проще всего не заморачиваться и набрать нужный текст с помощью клавиши Caps Lock. А что если мы делаем какую-то типовую страницу, и все последующие будут на нее похожи, и текст нужно будет выделять в одних и тех же блоках на странице?

В случае если у нас есть блоки, в которых текст обязательно должен быть выделен, мы можем для них задать отображение текста, с помощью свойства CSS, заглавными буквами.

Навигация по статье:

  • Как сделать в CSS заглавные буквы?
  • Интересное свойство font-variant

Как сделать в CSS заглавные буквы?

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

Делаем блок с заголовком в html:

<div> <h4>Задаём в CSS заглавные буквы</h4> </div>

<div>

<h4>Задаём в CSS заглавные буквы</h4>

</div>

Задаем свойство text-transform: uppercase; для тега h4:

.text-transformation h4{ text-transform: uppercase; }

.text-transformation h4{

text-transform: uppercase;

}

Задаём в CSS заглавные буквы

Текст блока

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

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

В этом случае намного удобнее будет преобразовать уже существующий текст с помощью свойства CSS в заглавные буквы.

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

Как узнать класс элемента на сайте я рассказывала в этой статье с видео инструкцией:
Как определить ID и класс элемента на странице?

Интересное свойство font-variant

Для выделения текста в CSS заглавными буквами существует еще одно свойство font-variant, которое дает достаточно необычный и интересный эффект.

font-variant

может принимать три значения:

small-caps – отображает все символы слова, которые следуют после заглавной буквы, капительными символами. Строчные символы преобразуются в заглавные, но уменьшенного размера.

normal – вид шрифта по умолчанию

inherit – наследует стиль отображения шрифта у родительского элемента.

Вот пример использования данного свойства:

<div> <h3>Капительные символы в заголовке</h3> <h3>Стандартный заголовок h3</h3> </div>

<div>

<h3>Капительные символы в заголовке</h3>

<h3>Стандартный заголовок h3</h3>

</div>

CSS:

.kapitel{ font-variant:small-caps!important; }

.kapitel{

font-variant:small-caps!important;

}

Капительные символы в заголовке

Стандартный заголовок h3

Надеюсь, что теперь у вас не возникнет проблем с созданием заглавных букв! Если вам понравилась статья, обязательно поделитесь ею в социальных сетях, и подпишитесь на мою рассылку.

А на сегодня у меня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

Буквы верхнего и нижнего регистра CSS

  • HTML
  • CSS
  • CMS
  • CSS
  • Буквы верхнего и нижнего регистра

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


text-transform : uppercase;

uppercase – данная опция создаёт условия для вывода всех символов прописными (верхний регистр).


HTML

<h2>Прописные буквы</h2>



CSS

.box{
    width: 250px;
    display: inline-block;
    padding-top: 4px;
    padding-right: 40px;
    padding-bottom: 4px;
    padding-left: 40px;
    border: 3px solid #444;
    background-color: #FC0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 12px;	
}
h2{
    text-transform: uppercase;
}



text-transform : lowercase;

lowercase – данный параметр задаёт вывод строчных символов (нижний регистр).


HTML

<div>
  <div>
    ПЕРВАЯ БУКВА В ВЕРХНЕМ РЕГИСТРЕ, ПОСЛЕДУЮЩИЕ СИМВОЛЫ В НИЖНЕМ РЕГИСТРЕ
  </div>
</div>



CSS

.block{
    font-size: 20px;
    font-weight: bold;
    text-transform: lowercase;
}
.block:first-letter{
    text-transform: uppercase;
}



text-transform : capitalize;

capitalize – параметр устанавливает отображение всех слов в предложении с заглавной буквы.


HTML

<div>
  <p>Каждое слово начинается с заглавной буквы</p>
</div>



CSS

p{
    font-size: 19px;
    font-weight: bold;
    text-transform: capitalize;	
}



text-transform : none;

none – регистр символов остаётся неизменным.


HTML

<div>
  <div>
    <span>П</span>ЕРВАЯ БУКВА БЕЗ ИЗМЕНЕНИЙ, ОСТАЛЬНЫЕ СТРОЧНЫЕ
  </div>
</div>



CSS

.block{  
    font-size: 20px;
    font-weight: bold;
    text-transform: lowercase;
}
.no-changes{ 
    text-transform: none; 
}

© 2012 – 2023

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-документ с нашим текстом и правилом преобразования текста:

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

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

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