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

  • Отобразить весь текст заглавными буквами;
  • Выделить весь текст строчными буквами;
  • Сделать так, чтобы первая буква каждого слова началась с верхнего регистра.

"Это все, конечно, хорошо, но когда это может понадобиться?" - спросите вы. Представим себе такую ситуацию, когда вам нужно отобразить все пункты меню заглавными буквами. Для этого не обязательно набирать их, включая клавишу CapsLock, или держа нажатым кнопку Shift. Будет достаточно задать всем пунктам списка отображение в верхнем регистре, создав соответствующее правило в CSS файле. И это лишь одна из многих возможных ситуаций.

Видеоверсия:
регистр букв CSS

Свойство text-transform

Управлять регистром текста мы будем при помощи свойства text-transform. У нее есть 4 основных значения - uppercase (заглавные буквы), lowercase (строчные буквы), capitalize (верхний регистр у каждой первой буквы слова, остальные значения не меняются), none (не применяется форматирование). На первый взгляд вам все это может показаться очень сложным.

незнакомое CSS свойство
Главное - не паниковать...

Но на практике все довольно просто, в чем вы сейчас и убедитесь. Главное - это подобрать правильный селектор, ведь значения свойства text-transform наследуются.

Выделяем заглавными буквами

Первым делом я предлагаю задать всему тексту заглавные буквы, для чего мы создаем следующее CSS правило:

body { text-transform: uppercase; }

В принципе, ничего сложного, мы лишь использовали значение uppercase. Как говорится, все интуитивно понятно. Вот как это выглядит в жизни:

uppercase
Все с большой буквы...

Нижний регистр - применить для всех

Следующим шагом давайте повсеместно применим строчные буквы, для чего пишем следующее:

body { text-transform: lowercase; }

Как вы уже наверное догадались, два значения, с которыми мы только что познакомились являются в какой-то мере антонимами. А на иллюстрации ниже вы можете видеть результат только что созданного свойства.

lowercase
Веб-страница при включенном lowercase

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

Для этого нам достаточно воспользоваться соответствующим значением:

body { text-transform: capitalize; }

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

capitalize
Текст после применения capitalize

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

p { text-transform: none; }

Смею предположить что вам все понятно, если нет - задавайте свои вопросы в комментариях. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  • Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  • [popup_trigger id="3874" tag="span"]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

тринадцать − 2 =

Закрыть