Оформляючи сторінку сайту, нам не рідко доводиться виділяти заголовки або якісь фрагменти тексту великими літерами. Звичайно, в разі якщо це потрібно зробити один раз, то найпростіше не морочитися і набрати потрібний текст за допомогою клавіші Caps Lock. А що якщо ми робимо якусь типову сторінку, і всі наступні будуть на неї схожі, і текст потрібно буде виділяти в одних і тих же блоках на сторінці?
У разі якщо у нас є блоки, в яких текст обов'язково повинен бути виділений, ми можемо для них задати відображення тексту, за допомогою властивості CSS, великими літерами.
Навігація по статті:
Як зробити в CSS заголовні букви?
Щоб зробити в CSS заголовні букви можна скористатися властивості text-transform, використовуючи одне з його значень uppercase. наприклад:
Робимо блок з заголовком в html:
Задаємо в CSS заголовні букви
Крім uppercase дане CSS властивість може приймати і інші значення:
capitalize -Кожному нове слово буде йти з великої літери
lowercase - всі букви стають малими (маленькими)
none - значення за замовчуванням
inherit - значення успадковується
Звичайно ж, ви можете застосувати дане властивість і для вже існуючих елементів на сайті. Наприклад, ви вирішили змінити відображення заголовків статей, але перебирати всі статті на сайті і виправляти всі вручну займе багато часу.
В цьому випадку набагато зручніше буде перетворити вже існуючий текст за допомогою властивості CSS в заголовні букви.
Для цього всього лише потрібно обчислити клас, який відповідає за відображення заголовка статті, і задати йому потрібне властивість.
Цікава властивість font-variant
Для виділення тексту в CSS великими літерами існує ще одна властивість font-variant. яке дає досить незвичайний і цікавий ефект.
font-variant може приймати три значення:
small-caps - відображає всі символи слова, які слідують після великої літери, капітельного символами. Рядкові символи перетворюються в заголовні, але зменшеного розміру.
normal - вид шрифта
inherit - успадковує стиль відображення шрифту у батьківського елементу.
Ось приклад використання даного властивості: