CSS урок 11. Регистр букв
Вот уже несколько уроков мы вовсю изощряемся с форматированием текста посредством CSS, а в этот раз мы учимся менять регистр текста. В этом плане каскадные таблицы стилей открывают перед нами очень широкие возможности, а если быть точнее, мы можем:
- Отобразить весь текст заглавными буквами;
- Выделить весь текст строчными буквами;
- Сделать так, чтобы первая буква каждого слова началась с верхнего регистра.
"Это все, конечно, хорошо, но когда это может понадобиться?" - спросите вы. Представим себе такую ситуацию, когда вам нужно отобразить все пункты меню заглавными буквами. Для этого не обязательно набирать их, включая клавишу CapsLock, или держа нажатым кнопку Shift. Будет достаточно задать всем пунктам списка отображение в верхнем регистре, создав соответствующее правило в CSS файле. И это лишь одна из многих возможных ситуаций.
Видеоверсия:
Свойство text-transform
Управлять регистром текста мы будем при помощи свойства text-transform. У нее есть 4 основных значения - uppercase (заглавные буквы), lowercase (строчные буквы), capitalize (верхний регистр у каждой первой буквы слова, остальные значения не меняются), none (не применяется форматирование). На первый взгляд вам все это может показаться очень сложным.
Но на практике все довольно просто, в чем вы сейчас и убедитесь. Главное - это подобрать правильный селектор, ведь значения свойства text-transform наследуются.
Выделяем заглавными буквами
Первым делом я предлагаю задать всему тексту заглавные буквы, для чего мы создаем следующее CSS правило:
body { text-transform: uppercase; }
В принципе, ничего сложного, мы лишь использовали значение uppercase. Как говорится, все интуитивно понятно. Вот как это выглядит в жизни:
Нижний регистр - применить для всех
Следующим шагом давайте повсеместно применим строчные буквы, для чего пишем следующее:
body { text-transform: lowercase; }
Как вы уже наверное догадались, два значения, с которыми мы только что познакомились являются в какой-то мере антонимами. А на иллюстрации ниже вы можете видеть результат только что созданного свойства.
Выделяем первую букву каждого слова верхним регистром
Для этого нам достаточно воспользоваться соответствующим значением:
body { text-transform: capitalize; }
Не знаю насколько часто вы будете использовать такое CSS правило, однако знать о подобной возможности вам не помешает, особенно при решении нетривиальных задач. Результат виден на изображении ниже.
И наконец, давайте вкратце остановимся на последнем значении - none. Как я уже говорил, он может применяться для отмены наследования от родителя. Например, представим что у нас действуют все предыдущие правила, а для абзацев нам стоит их отменить, для этого мы пишем следующее:
p { text-transform: none; }
Смею предположить что вам все понятно, если нет - задавайте свои вопросы в комментариях. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- [popup_trigger id="3874" tag="span"]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
