Css все прописные: Свойство text-transform, регистр символов — Оформление текста — HTML Academy — Вебджем.рф

Содержание

Буквы верхнего и нижнего регистра 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; 
}

Регистр текста в CSS

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

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

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

Видеоверсия:

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

Главное — не паниковать…

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

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

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

body { text-transform: uppercase; }

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

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

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

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

body { text-transform: lowercase; }

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

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

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

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

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

body { text-transform: capitalize; }

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

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

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

p { text-transform: none; }

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

Если это так:

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

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

Закрыть

CSS: свойство преобразования текста

В этом учебном пособии по CSS объясняется, как использовать свойство CSS под названием преобразование текста с синтаксисом и примерами.

Описание

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

Синтаксис

Синтаксис свойства CSS преобразования текста:

 преобразование текста: значение;

Параметры или аргументы

значение

Капитализация шрифта. Это может быть одно из следующих значений:

Значение	Описание
верхний регистр	Все буквы преобразуются в верхний регистр p { text-transform: uppercase; }
нижний регистр	Все буквы преобразуются в нижний регистр p { text-transform: lowercase; }
с большой буквы	Первая буква каждого слова преобразуется в верхний регистр p { text-transform: capitalize; }
нет	Заглавные буквы не изменены p { text-transform: none; }
унаследовать	Элемент унаследует преобразование текста от своего родительского элемента p { text-transform: inherit; }

Примечание

Если в качестве преобразования текста выбрано прописная , первая буква каждого слова становится заглавной, а все остальные буквы не изменяются.
Свойство CSS text-transform — отличный способ перевести заголовки в верхний регистр без необходимости редактирования HTML-страниц.

Совместимость с браузерами

Свойство CSS text-transform имеет базовую поддержку в следующих браузерах:

Chrome
Андроид
Firefox (Геккон)
Firefox Mobile (Геккон)
Internet Explorer (IE)
Интернет-телефон
Опера
Опера Мобайл
Сафари (веб-кит)
Сафари Мобильный

Пример

Мы обсудим свойство text-transform ниже, исследуя примеры использования этого свойства в CSS.

Использование верхнего регистра

Давайте посмотрим на пример преобразования текста CSS, где мы установили преобразование текста на верхний регистр .

 h2 { преобразование текста: верхний регистр; }

В этом примере преобразования текста CSS мы использовали свойство преобразования текста CSS, чтобы изменить весь текст в теге

на

в верхнем регистре .

Это позволяет вам быстро изменить отображение тега

без необходимости редактирования ваших HTML-страниц.

Использование нижнего регистра

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

 span { преобразование текста: нижний регистр; }

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

Использование заглавных букв

Давайте посмотрим на пример преобразования текста в CSS, где мы установили преобразование текста на заглавные буквы .

 .author_name { преобразование текста: использовать заглавные буквы; }

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

имя_автора класс.

Поделись:

Рекламные объявления

Почему вы не должны писать свой контент в верхнем регистре, вместо этого используйте CSS.

| by Mandy Michael

Прописные буквы распространены в веб-дизайне, вы часто будете видеть их в навигации, на кнопках, в заголовках или подзаголовках. Недавно я менял текст в навигационной панели с верхнего на нижний и столкнулся с ситуацией, когда вместо того, чтобы полагаться на CSS, последний редактор этой навигационной панели написал текст в верхнем регистре. Это вызвало нытье в твиттере, потому что это действительно беспокоит меня. В результате моего твита я обратил внимание, что многие люди не знают, почему это проблема (легко забыть людей, извините за это). Я подумал, что это хорошая возможность обсудить причины, по которым вы не должны писать свой контент в верхнем регистре, а вместо этого вы должны полагаться на CSS.

Есть несколько замечательных твитов от Джен Симмонс в ветке этого твита, которую вы должны полностью прочитать, также следите за ней, она отличный источник знаний!

Во-первых, предостережение: если что-то должно быть в верхнем регистре, например, аббревиатура, это нормально писать в верхнем регистре, например, CSS. Если ваш текст имеет семантический смысл в верхнем регистре, то это не проблема. (Примечание: в HTML есть элемент аббревиатуры , который вы должны полностью использовать)

Имея это в виду, если ваш контент прописными буквами, только для целей дизайна или стиля, то это всегда должно быть сделано с помощью CSS. Это можно сделать с помощью CSS-свойства text-transform .

Преобразование текста позволит вам указать, как вы хотите использовать заглавные буквы в тексте вашего элемента. Он имеет ряд опций, например. все прописные, все строчные или вы можете выбрать заглавные буквы для каждого слова. Есть также некоторые варианты для работы с другими языками.

В нашем случае это будет:

 text-transform: uppercase;

Как и в моем исходном примере, изменить дизайн позже будет намного сложнее, если вы все написали прописными буквами. В моем случае это было небольшое исправление, потому что это был только один экземпляр. Однако представьте это на большом веб-сайте. Вы не могли бы легко изменить регистр, не редактируя весь контент сайта. CSS был буквально создан для того, чтобы упростить этот процесс, опирайтесь на него!
При копировании и вставке текста, написанного в верхнем регистре, он будет скопирован в верхнем регистре. В отличие от текста, стилизованного с помощью CSS, который будет копироваться так, как вы его написали. (Это постоянный источник разочарования для меня, особенно когда это слово, у меня проблемы с правописанием, я скопировал его по какой-то причине, и теперь вы собираетесь заставить меня перепечатать или использовать какой-то инструмент для его преобразования, да ладно. друзья, сделайте мою жизнь легкой, а не тяжелой 😭!).
Примечание. Было указано, что Chrome по-прежнему копирует и вставляет в верхнем регистре, если вы стилизуете с помощью CSS. Могу подтвердить, что Firefox этого не делает.
Для скринридеров не подходит — текст в верхнем регистре будет читаться как отдельные буквы (как аббревиатуры). Таким образом, CSS читается как CSS. Точно так же JELLO будет читаться как J.E.L.L.O, а не как слово Jello.
Примечание. Некоторые программы чтения с экрана, такие как Mac Voiceover, по-прежнему будут делать это с текстом, оформленным в верхнем регистре с помощью CSS — вы можете решить эту проблему с помощью ария-метка .
Режимы чтения тоже не работают. Меня особенно интересуют режимы чтения (ознакомьтесь с моим сообщением в блоге о создании веб-сайтов для режима чтения Safari). Режимы чтения и другие приложения для чтения обычно работают, беря содержимое с вашей страницы и применяя новые стили. Среди прочего, он опирается на правильное использование семантического HTML, но также предполагает, что вы написали контент таким, каким он должен быть. Если вы прописываете свой текст в содержимом, он будет восприниматься как прописной, поэтому любые попытки режима чтения стилей, которые пытаются применить для улучшения качества чтения, не сработают.

Css все прописные: Свойство text-transform, регистр символов — Оформление текста — HTML Academy