Сегодня я расскажу о том, как можно сделать через css все заглавные буквы. Конечно, для этого можно включить Caps Lock и писать нужный текст, но это достаточно примитивный метод. А что, если вам надо выделить отдельный абзац в уже готовой статье?
Делаем в css все буквы заглавными
Для этого есть свойство text-transform , которое, как вы уже догадались, трансформирует текст. У него есть такие значения:
- lowercase – весь текст выводится строчными буквами
- uppercase – все слова выводятся заглавными (то, что нам и нужно)
- capitalize – первая буква каждого слова выводится заглавной
Вот, собственно, и все, что вам нужно знать. Остается только понять, как обратиться к нужному элементу. Давайте представим такой пример: вам нужно пятому абзацу в статье сделать все заглавные буквы. И как это можно реализовать?
Как дотянуться до нужного элемента?
Как вы знаете, параграф создается с помощью парного html-тега , все содержимое которого и становится абзацем. Остается всего лишь задать новый стилевой класс для него:
Теперь мы имеем возможность обратиться через язык css к этому конкретному абзацу, не затронув остальных. Сделать это можно так:
Uppercase-letter{ text-transform: uppercase; }
Этот способ подойдет, когда вам нужно в какой-то отдельной статье выделить фрагмент. А что, если на всех страницах должен быть определенный текст заглавными буквами. В таком случае лучше поместить блок в файл шаблона, чтобы не писать его каждый раз.
А возможно вам нужно в каждой статье второй абзац выделить с помощью css заглавными буквами. Тогда вам подойдет другой вариант. Найдите блок, в котором выводится статья и обратитесь ко второму абзацу с помощью псевдокласса nth-child. В данном примере у нас блок со статьей имеет класс article .
Article p:nth-child(2){ text-transform: uppercase }
Как видите, для каждого конкретного случая подходит свое решение. Самое важное, это помнить о свойстве text-transform , которое и меняет регистр букв.
В целом, использовать выводить текст так не рекомендуется, потому что это сильно ухудшает его восприятие, но отдельные особенно важные фрагменты выделить можно.
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: (от англ. superscript) - верхний индекс и (от англ. subscript) - нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.
Пример 1. Создание верхнего и нижнего индекса
Характеристическое уравнение поверхности второй степени
λ3 - I1λ2 + I2λ - I3 = 0
В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).
Рис. 1. Вид индексов после применения стилей
Можно вообще отказаться от использования и в пользу стилей. Аналогом этих элементов служит свойство vertical-align , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em - это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.
Пример 2. Использование стилей для управления индексами
Многочлен степени n
f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn
В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние - синим (рис. 2).
CSS позволяет производить гибкую настройку текста, который представлен с помощью языка HMTL. Сегодня мы рассмотрим действие свойства «text-transform», дающего возможность менять регистр шрифта. Данная опция поддерживается всеми современными браузерами и входит в спецификацию всех версий CSS.
Назначение
Свойство «text-transform» может принимать три основных значения и два добавочных. К примеру, можно назначить верхний регистр ко всему выделенному тексту. Либо можно дать команду противоположному предыдущему свойству, где все символы становятся строчными. Производить назначение можно с помощью любого удобного для вас метода. Например, с использованием встроенных стилей. Или вы можете создать
Отдельный файл с описанием всех свойств. Какой использовать способ присвоения, решать только вам. «Text-transform» может принимать следующие значения:
- Uppercase. Делает все выделенные символы заглавными. В CSS uppercase встречается часто, так как это значение помогает решить многие сложные задачи, связанные с текстом.
- Lowercase. Данное свойство полностью противоположно команде uppercase.
- Capitalize. Меняет регистр первой буквы на верхний. Остальные символы не будут изменяться.
- None. Позволяет отменить все назначенные значения (необходимо для предопределения свойства). Как правило, данное значение устанавливается по умолчанию.
- Inherit. Наследует все свойства у родительского элемента. Следует заметить, что IE не поддерживает этой свойство.
Применение
С использованием CSS верхний регистр (или подобные эффекты) устанавливается с помощью одной простой команды. Поэтому нет необходимости изменять или переписывать весь текст. Если речь идет об одностраничном сайте, то данное свойство, возможно, и не пригодится. Но когда под вашим управлением находится огромный портал, где нужно исправить регистр букв в определенных фрагментах, то «text-transform» становится единственным эффективным средством. Например, нужно исправить шрифт в заголовочных тегах «h2». Для этого нужно добавить запись: «h2 { text-transform: uppercase; }», и тогда все заголовки второго уровня будут иметь верхний регистр.
Особенности
Некоторые, возможно, считают, что ручная обработка текста и изменение шрифта с помощью свойства «text-transform» не имеет никаких различий. Но это не так. Если вы поменяете вручную на прописные (верхний регистр), то при копировании этой информации с вашего сайта символы так и останутся без изменений. Если использовать язык CSS, то все происходит по-другому. Свойство «text-transform» лишь зрительно для пользователей меняет шрифт. Но в действительности символы остаются неизменными. Это происходит со всеми значениями данного свойства. Скопированная информация (текст) будет иметь первоначальный регистр, какой используется в исходном коде страницы. В этом и заключается единственное различие между ручной обработкой и использованием CSS-команд.
Неважно, какой вы хотите использовать - нижний или верхний регистр, главное, не забывать предназначение. Например, если изменения нужны вам только с декоративной целью, то можете спокойно применять свойство «text-transform». Ну а если вы знаете, что ваши пользователи наверняка будут копировать выложенную вами информацию, то лучше всего вручную изменять регистр всего текста. Ведь иногда читатели не замечают такой подмены шрифта. Это особенно критично, когда речь идет о важных документах и подобной информации.
