Оформляя страницу сайта, нам не редко приходится выделять заголовки или какие-то фрагменты текста заглавными буквами. Конечно, в случае если это нужно сделать один раз, то проще всего не заморачиваться и набрать нужный текст с помощью клавиши Caps Lock. А что если мы делаем какую-то типовую страницу, и все последующие будут на нее похожи, и текст нужно будет выделять в одних и тех же блоках на странице?
В случае если у нас есть блоки, в которых текст обязательно должен быть выделен, мы можем для них задать отображение текста, с помощью свойства CSS, заглавными буквами.
Навигация по статье:
Как сделать в CSS заглавные буквы?
Чтобы сделать в CSS заглавные буквы можно воспользоваться свойства text-transform, используя одно из его значений uppercase. Например:
Делаем блок с заголовком в html:
|
1 2 3 |
<div class="text-transformation"> <h3>Задаём в CSS заглавные буквы</h3> </div> |
Задаем свойство text-transform: uppercase; для тега h3:
|
1 2 3 |
.text-transformation h3{ text-transform: uppercase; } |
Задаём в CSS заглавные буквы
Текст блока
Кроме uppercase данное CSS свойство может принимать и другие значения:
capitalize -каждое новое слово будет идти с заглавной буквы
lowercase — все буквы становятся строчными (маленькими)
none — значение по умолчанию
inherit — значение наследуется
Конечно же, вы можете применить данное свойство и для уже существующих элементов на сайте. Например, вы решили изменить отображение заголовков статей, но перебирать все статьи на сайте и исправлять все вручную займет много времени.
В этом случае намного удобнее будет преобразовать уже существующий текст с помощью свойства CSS в заглавные буквы.
Для этого всего лишь нужно вычислить класс, который отвечает за отображения заголовка статьи, и задать ему нужное свойство.
Как определить ID и класс элемента на странице?
Интересное свойство font-variant
Для выделения текста в CSS заглавными буквами существует еще одно свойство font-variant, которое дает достаточно необычный и интересный эффект.
font-variant может принимать три значения:
small-caps – отображает все символы слова, которые следуют после заглавной буквы, капительными символами. Строчные символы преобразуются в заглавные, но уменьшенного размера.
normal – вид шрифта по умолчанию
inherit – наследует стиль отображения шрифта у родительского элемента.
Вот пример использования данного свойства:
|
1 2 3 4 |
<div class="text-kapitel"> <h2 class="kapitel">Капительные символы в заголовке</h2> <h2>Стандартный заголовок H2</h2> </div> |
CSS:
|
1 2 3 |
.kapitel{ font-variant:small-caps!important; } |
Капительные символы в заголовке
Стандартный заголовок H2
Надеюсь, что теперь у вас не возникнет проблем с созданием заглавных букв! Если вам понравилась статья, обязательно поделитесь ею в социальных сетях, и подпишитесь на мою рассылку.
А на сегодня у меня все. До встречи в следующих статьях!
С уважением Юлия Гусарь
