Ось уже кілька уроків ми викриваємося з форматуванням тексту за допомогою CSS, а цього разу ми вчимося змінювати регістр тексту. У цьому плані каскадні таблиці стилів відкривають маємо дуже широкі можливості, і якщо бути точніше, ми можемо:

• Відобразити весь текст великими літерами;
• Виділити весь текст малими літерами;
• Зробити те щоб перша літера кожного слова почалася з верхнього регістру.

"Це все, звичайно, добре, але коли це може знадобитися?" - Запитайте ви. Уявімо таку ситуацію, коли вам потрібно відобразити всі пункти меню великими літерами. Для цього не обов'язково набирати їх, включаючи клавішу CapsLock, або тримаючи кнопку Shift. Достатньо задати всім пунктам списку відображення у верхньому регістрі, створивши відповідне правило у файлі CSS. І це лише одна з багатьох можливих ситуацій.

Властивість text-transform

Керувати регістром тексту ми за допомогою якості text-transform. У неї є 4 основні значення - uppercase (великі літери), lowercase (малі літери), capitalize (верхній регістр у кожної першої літери слова, інші значення не змінюються), none (не застосовується форматування). На перший погляд, вам все це може здатися дуже складним.

Головне - не панікувати.

Але на практиці все досить просто, у чому ви зараз і переконаєтесь. Головне - це підібрати правильний селектор, адже значення якості text-transform успадковуються.

Виділяємо великими літерами

Насамперед я пропоную задати всьому тексту великі літери, для чого ми створюємо наступне CSS правило:

Body (text-transform: uppercase; )

У принципі нічого складного, ми лише використовували значення uppercase. Як то кажуть, все інтуїтивно зрозуміло. Ось як це виглядає у житті:

Все з великої літери... Нижній регістр – застосувати для всіх

Наступним кроком давайте повсюдно застосуємо малі літери, для чого пишемо наступне:

Body (text-transform: lowercase; )

Як ви вже напевно здогадалися, два значення, з якими ми щойно познайомилися, є певною мірою антонімами. А на ілюстрації нижче ви можете бачити результат щойно створеної властивості.

Веб-сторінка при включеному lowercase Виділяємо першу літеру кожного слова верхнім регістром

Для цього нам достатньо скористатися відповідним значенням:

Body (text-transform: capitalize; )

Не знаю, наскільки часто ви будете використовувати таке CSS правило, проте знати про таку можливість вам не завадить, особливо при вирішенні нетривіальних завдань. Результат видно на зображенні нижче.

Текст після застосування capitalize

І нарешті, давайте коротко зупинимося на останньому значенні - none. Як я вже казав, він може застосовуватися для скасування наслідування батьків. Наприклад, уявимо, що у нас діють усі попередні правила, а для абзаців нам варто їх скасувати, для цього ми пишемо наступне:

P (text-transform: none;)

Смію припустити, що вам все зрозуміло, якщо ні - ставте свої питання в коментарях. А на цьому маю все. Сподіваюся, цей урок CSS був для вас корисним. Якщо це так:

• Зробіть репост цієї статті у соціальних мережах, щоб більше людей отримали від неї користь;
• Підписуйтесь на мою розсилку, щоб не пропустити корисні та цікаві публікації на блозі.

На цьому я з вами не прощаюсь. Дякуємо за увагу і до зустрічі у наступних публікаціях!

Перетворення малої літери на нижній регістр і перший верхній регістр за допомогою CSS (8)

У CSS немає опції кеп-пропозицій. Інші відповіді, що пропонують text-transform: capitalize , неправильні, оскільки цей параметр використовує кожне слово для кожного слова .

Ось грубийспосіб зробити це, якщо ви хочете, щоб перша літера кожного елемента була у верхньому регістрі, але це безумовно ніде поряд з фактичними обмеженнями:

P ( text-transform: lowercase; ) p:first-letter ( text-transform: uppercase; )

THIS IS AN EXAMPLE SENTENCE.

THIS IS ANOTHER EXAMPLE SENTENCE. AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE.

Як перетворити букву UPPERCASE на нижній регістр і першу букву Uppercase для кожної пропозиції, як показано нижче, лише за допомогою CSS?

Від: ЦЕ ПРИКЛАД ДОДАТКИ.

To: Це зразкова пропозиція.

Оновлення: коли використовую text-transform: capize; Результат все той же.

Ви не можете це зробити виключно за допомогою CSS. Існує атрибут text-transform , але він приймає тільки none , capitalize uppercase , uppercase , lowercase та inherit .

Можливо, вам захочеться заглянути в рішення JS або серверне рішення.

Якщо ви можете зробити всі символи малими літерами на сервері, ніж ви можете застосувати:

Text-transform: capitalize

Я не думаю, що текстове перетворення буде працювати з великими літерами як введення.

Якщо ви хочете використовувати для цього не спрацює, для або текстової області вам потрібно використовувати Javascript

function capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )

який повинен добре працювати для або