Практичне використання css регістр символів

Практичне використання CSS: регістр символів

Часто так буває - вчимо щось тільки тоді, коли виникає необхідність застосування його на практиці. У підсумку ми добре засвоюємо тільки ту частину, яку відразу ж застосовуємо. Решта забувається, а часто і не вивчається. Так в стороні залишилося безліч цікавих можливостей CSS. Починаючи з цієї статті, ми будемо робити акцент саме на не дуже поширених, але від того не менш корисних прімемах застосування CSS.

Практичне використання CSS: регістр символів

Досить рідкісний прийом використання CSS - вплив на регістр відображуваних символів. Для тих, хто не в курсі, регістр символів характеризує їх заголовної властивість. Говорячи простіше, символи в верхньому регістрі - це ВЕЛИКІ, тобто великі символи, а символи в нижньому регістрі - це малі, тобто маленькі букви.

Далеко не всі знають про таке цікаве властивість в CCS, як text-transform. З його допомогою і можна здійснювати маніпуляції з наведених текстом, без безпосереднього втручання в самі символи тексту. Властивість text-transform може приймати 5 різних значень: inherit, capitalize, uppercase, lowercase і none. Детальніше про них:

capitalize - перша буква тексту з таким значенням властивості CSS text-transform завжди буде рядкової;

uppercase - це властивість змусить браузер відображати текст тільки великими літерами;

lowercase - як багато хто вже здогадалися, повна протилежність попередньому випадку - весь текст відображається тільки малими літерами;

inherit - вказує, що має використовуватися значення батьківського елемента;

none - висновок тексту таким, яким він є, для text-transform це значення за замовчуванням; І наочний приклад: Ось так це буде виглядати:

ЦЕ просто тест

У деяких читачів зараз, напевно, виникне питання: "Ну і навіщо. Все це потрібно? Чи не простіше відразу написати таким шрифтом, яким потрібно відображати.". Хм. почасти справедливо. А тепер спробуйте уявити ситуацію: вам доручили в доробку і адміністрування величезний відвідуваний портал, з величезною кількістю сторінок, які, як правило, генеруються за шаблоном і виводяться нормальними символами. І ось, як це буває, замовнику щось стукнуло в голову / встав не з тієї ноги / побачив таке у конкурентів / свій варіант /. І сказав, що хоче, щоб усі заголовки виводилися тільки великими, великими символами. Ваші дії: запанікувати і звільнитися / найняти сотню людей і почати вручну передруковувати заголовки / написати скрипт, який переворушити всю базу даних (заодно пару раз перевантаживши сервер і грюкнувши саму базу :)) і змінити регістр символів /. / Використовувати в потрібному місці шаблону CSS властивість text-transform і вирішити задачу за пару хвилин. А коли на наступний день замовник попросить повернути назад, вам не захочеться шукати мотузку з милом, адже досить буде лише змінити одну властивість в шаблоні генератора. Прикладів можна наводити ще багато. Одним словом - штука корисна, не забувайте про це властивість.

На цей раз все, до швидких зустрічей.