Делаем заглавные буквы с помощью CSS свойства text-transform.

Количество просмотров: 2055

Для того чтобы в каком то html элементе сделать все буквы заглавными нам потребуется CSS, т.к. в HTML нет подходящего тега или атрибута для решения данной задачи.

Начнем с разметки допустим у нас имеется следующий код


<p class="big">Этот текст должен быть большим</p>
//или
<p>этот маленький а этот <span>большой</span></p>

Для того чтобы преобразовать символы из маленьких в большие нам поможет CSS свойство text-transform

Синтаксис свойства и описание значений

text-transform: capitalize | lowercase | uppercase | none | inherit

  • capitalize - первый символ каждого слова в предложении будет заглавным.
  • lowercase - символы становятся строчными (нижний регистр).
  • uppercase - символы становятся прописными (верхний регистр).
  • none - не меняет регистр символов.
  • inherit - наследует значение родителя.

Как вы догадались нам потребуется text-transform:uppercase; Давайте применем его на практике и посмотрим что выйдет.

Стили для кода описанного выше


span{
	text-transform:uppercase; 
	/*Любой текст обернутый в тег span будет написан прописными буквами*/
}

.big{
	text-transform:uppercase;
	/*Любой текст обернутый в элемент с классом big так же станет прописным*/
}

И вот что у нас получилось на примере использования класса big.

Этот текст маленький, а этот большой

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх