поиск по сайту

Заглавные и строчные буквы в CSS

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

Все заглавные

Иногда бывает удобно преобразовать все буквы, независимо от их исходного регистра или положения в слове к верхнему регистру. Для этого необходимо использовать свойство text-transform. со значением «uppercase». В следующем примере приведено правило, преобразующее текст всех заголовков первого уровня (тег h1) к верхнему регистру:

h1 {text-transform:uppercase;}

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

Первая заглавная буква

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

.term {text-transform:capitalize;}

Так же как при преобразовании всего текста к верхнему регистру, здесь так же необходимо соблюдать меру. Одно слово, начинающееся с заглавной буквы, дает ощущение хорошего вкуса, несколько таких слов идущих подряд - только ощущение сарказма автора.

Капитель

Капитель - достаточно простой в использовании метод, использовавшийся еще в докомпьютерной типографике. Достаточно установить свойство font-variant в значение «small-caps». После этого браузер заменит строчные буквы на уменьшенные копии заглавных. Следующий пример, используя псевдоэлемент :first-line, оформляет первую строку каждого параграфа капителью:

p:first-line {font-variant:small-caps;}

Такой текст читается гораздо лучше текста, состоящего из одних заглавных букв. Тем не менее, не рекомендуется оформлять капителью большие объемы текста.

Свойство text-transformПозволяет преобразовывать заглавные и строчные буквы
Свойство font-variantОпределяет будет ли использоваться шрифт с капителью или нет
Псевдоэлемент :first-lineСоответствует первой строке текста в строчном элементе
КапительНачертание шрифта, в котором строчные буквы заменены на буквы, сходные с...