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

CSS text-transform

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


text-transform : uppercase;

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

Большие буквы CSS 

HTML

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



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;	
}
h1{
    text-transform: uppercase;
}



text-transform : lowercase;

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

CSS строчные буквы 

HTML

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



CSS

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



text-transform : capitalize;

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

CSS верхний регистр 

HTML

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



CSS

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



text-transform : none;

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

CSS регистр 

HTML

<div class="box">
  <div class="block">
    <span class="no-changes">П</span>ЕРВАЯ БУКВА БЕЗ ИЗМЕНЕНИЙ, ОСТАЛЬНЫЕ СТРОЧНЫЕ
  </div>
</div>



CSS

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