Як зробити верхній регістр в CSS?

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». Ну а якщо ви знаєте, що ваші користувачі напевно будуть копіювати викладену вами інформацію, то найкраще вручну змінювати регістр всього тексту. Адже іноді читачі не помічають такої підміни шрифту. Це особливо критично, коли мова йде про важливі документи і подібної інформації.