Как сделать буквы заглавными css

Свойство text-transform, регистр символов

С помощью CSS можно также управлять регистром символов: делать буквы строчными (маленькими) или заглавными (большими). Делается это с помощью свойства text-transform . Его значения:

1. lowercase — все строчные;
2. uppercase — все заглавные;
3. capitalize — каждое слово начинается с большой буквы;
4. none — отменяет изменение регистра.

Без лишних слов — к практике!

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

На главную

Всё ещё день седьмой. Кекс выдал мне задание

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

Как говорится, для хорошего кота и в феврале март (народная мудрость).

Нашёл лирическое произведение для Кекса:

Мяу мяу мяу
мррр мяу мяяяу
мяу мяу
мяу

Собрание произведений М. Котидзе.

Text-transform и ко­пи­ро­ва­ние

Что происходит при копировании текста с text-transform .

В CSS есть свойство text-transform . С помощью него можно менять регистр текста: можно преобразовать текст в ПРОПИСНЫЕ, строчные или Капитализировать Только Первые Буквы Слов. Это делается значениями uppercase , lowercase и capitalize , соответственно. Помимо них есть значения full-width и full-size-kana , про которые мы в этот раз говорить не будем.

Пример текста с text-transform: uppercase

Пример текста с text-transform: lowercase

Пример текста с text-transform: capitalize

Выше приведен пример использования свойства text-transform . Попробуйте скопировать любой из них и вставить куда-нибудь. Результат будет отличаться в зависимости от вашего браузера:

• Если у вас браузер на WebKit или Blink (Chrome, Safari, Opera 15+, Яндекс.Браузер и вскоре даже Edge), то вставится измененный текст — тот, который вы видите в браузере.
• В остальных браузерах (Firefox, IE и пока Edge) вставится исходный текст — тот, который написан в HTML.

Стандарт до недавнего времени не определял, какое поведение является верным, поэтому оно стало предметом споров в баг-трекерах. Баг для Firefox завели еще в 2000 году, баг для WebKit с противоположным смыслом — в 2010. У сторонников обоих вариантов есть аргументы.

Главный аргумент за копирование измененного текста, как в WebKit — соответствие ожиданиям пользователя. Человек не может понять, в результате чего текст отображается заглавными буквами. Может быть, он прописан таким образом в исходном коде, а может быть, к нему применено text-trasform: uppercase . Если пользователь будет копировать текст в верхнем регистре, а потом вставлять его и иногда видеть что-то другое, ему будет казаться, что веб сломался и глючит.

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

В 2016 году за этот вопрос взялась Рабочая группа CSS (CSSWG). При обсуждении выделили основные сценарии использования text-transform :

• p::first-line < text-transform: uppercase >— первую строку набирают прописными буквами, как это иногда делают в англоязычной художественной литературе. В этом случае лучше копировать исходный текст, иначе он будет выглядеть странно.
• abbr < text-transform: lowercase; font-variant: small-caps >— аббревиатуры в тексте набирают капителью. Свойство font-variant: small-caps берёт специальное начертание для капители из шрифта или отображает строчные буквы как прописные, только уменьшенного размера, если их нет. В этом случае тоже лучше копировать исходный текст, иначе аббревиатуры будут набраны строчными буквами.
• h1 < text-transform: uppercase >— стилизуют заголовки с помощью прописных букв. Здесь применимы аргументы за оба варианта поведения.
• em < font-style: normal; text-transform: uppercase >— используют прописные буквы для выделения важных фрагментов. Здесь тоже применимы оба аргумента.

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

Сейчас баг в Firefox закрыт как «wontfix», баг в WebKit по-прежнему открыт. Но уже можно надеяться, что скоро его поправят, и копирование текста с text-transform начнет работать во всех браузерах одинаково.

text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного текста будет изменен.

Синтаксис

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

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-transform

Объектная модель

[window.]document.getElementById(» elementID «).style.textTransform

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Прописные и строчные буквы в CSS: свойство text-transform

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

Значение	Что делает
uppercase	Делает заглавными (прописными) все буквы в тексте
lowercase	Делает строчными все буквы в тексте
capitalize	Делает заглавной первую букву каждого слова в тексте
none	Не делает изменений
inherit	Наследует значение родителя

Пример записи стиля:

Используйте значение uppercase , если вам нужно сделать все буквы большими в заголовке или абзаце текста, словно текст набран в режиме Caps Lock. В случае, когда вам требуется убрать все заглавные буквы, оставив только строчные, воспользуйтесь значением lowercase . Значение capitalize может пригодиться, к примеру, в веб-форме для поля «ФИО», чтобы каждое новое слово автоматически начиналось с прописной буквы.

Обратите внимание: применение text-transform в CSS никак не влияет на исходное содержимое веб-страницы. Регистр букв изменяется лишь во время отображения страницы в окне браузера, а сам текст HTML-документа остается неизменным.

Примеры отображения стилей можно увидеть на скриншоте:

Далее в учебнике: подчеркивание и зачеркивание текста с помощью свойства CSS text-decoration.