Css надрядковий. Робимо в 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
який повинен добре працювати для або
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». Ну а якщо ви знаєте, що ваші користувачі напевно будуть копіювати викладену вами інформацію, то краще за все вручну змінювати регістр всього тексту. Адже іноді читачі не помічають такої підміни шрифту. Це особливо критично, коли мова йде про важливі документи і подібної інформації.
У минулому відео уроці ми навчилися видаляти і додавати нову інформацію в нову версію HTML-документа, при цьому повідомляючи про це пошуковим системам і виділяючи візуально, щоб відвідувачі також могли бачити зміни. Для цього, Ми використовували теги del і ins.
У цьому відео уроці ми продовжуємо тему форматування тексту в HTML-документі. Ми познайомимося з двома HTML-тегами, які вказують верхній і нижній індекс тексту.
HTML-тег sup - верхній індекс тексту в HTML.
HTML-тег призначений для вказівки верхнього індексу тексту в HTML. У деяких тематиках сайтів цей тег буде просто незамінний. Наприклад, якщо у Вас є, або планується, сайт пов'язаний з будь-якими формулами, математичними або хімічними. Або, їли є сайт будівельної тематики, то тег буде дуже корисний і допоможе при оформленні статей, при написанні формул або будь-яких величин, наприклад, квадратних метрів в будівельну тематику.
Але якщо Ваш сайт не відноситься до перерахованих темах, це не означає, що тег не знадобиться. Досить проявити фантазію і кмітливість і знайти застосування цьому елементу.
HTML-тег sub - нижній індекс тексту в HTML.
Що стосується HTML-тега , То він є протилежністю тегу , І відповідає за вказівку нижнього індексу тексту. Нижній індекс тексту може бути використаний, при написанні формул або математичних рівнянь. Але крім цього, можливо Ви зможете знайти й інше застосування тегу .
Наступний Відео Урок присвячений ще двом тегам, які в деяких ситуаціях можуть бути просто незамінні. При чому вони здатні не тільки форматувати текст, наприклад, в статті, але і при вказівці різної інформації на сайті під час верстки сторінок. Один з тегів здійснює перенесення в HTML , А другий малює горизонтальну лінію.
Ось уже кілька уроків ми щосили вправлялися з форматуванням тексту за допомогою CSS, а в цей раз ми вчимося міняти регістр тексту. В цьому плані каскадні таблиці стилів відкривають перед нами дуже широкі можливості, а якщо бути точніше, ми можемо:
- Відобразити весь текст великими літерами;
- Виділити весь текст малими літерами;
- Зробити так, щоб перша буква кожного слова почалася з великих літер.
"Це все, звичайно, добре, але коли це може знадобитися?" - запитаєте ви. Уявімо собі таку ситуацію, коли вам потрібно відобразити всі пункти меню великими літерами. Для цього не обов'язково набирати їх, включаючи клавішу CapsLock, або тримаючи натиснутим кнопку Shift. Буде досить задати всім пунктам списку відображення в верхньому регістрі, створивши відповідну правило в CSS файлі. І це лише одна з багатьох можливих ситуацій.
Властивість text-transform
Керувати регістром тексту ми будемо за допомогою властивості text-transform. У неї є 4 основних значення - uppercase (великі літери), lowercase (малі літери), capitalize (верхній регістр у кожної першої літери слова, інші значення не змінюються), none (не застосовується форматування). На перший погляд вам все це може здатися дуже складним.
![](https://i0.wp.com/site4business.net/wp-content/uploads/2015/11/neznakomoe-CSS-svojstvo.jpg)
Але на практиці все досить просто, в чому ви зараз і переконайтеся. Головне - це підібрати правильний селектор, адже значення властивості text-transform успадковуються.
Виділяємо великими літерами
Насамперед я пропоную поставити всьому тексту заголовні букви, для чого ми створюємо наступне CSS правило:
Body (text-transform: uppercase;)
В принципі, нічого складного, ми лише використовували значення uppercase. Як то кажуть, все інтуїтивно зрозуміло. Ось як це виглядає в житті:
![](https://i2.wp.com/site4business.net/wp-content/uploads/2015/11/uppercase.jpg)
Нижній регістр - застосувати для всіх
Наступним кроком давайте повсюдно застосовується малі літери, для чого пишемо наступне:
Body (text-transform: lowercase;)
Як ви вже напевно здогадалися, два значення, з якими ми тільки що познайомилися є в якійсь мірі антонімами. А на ілюстрації нижче ви можете бачити результат щойно створеного властивості.
![](https://i0.wp.com/site4business.net/wp-content/uploads/2015/11/lowercase.jpg)
Виділяємо першу букву кожного слова верхнім регістром
Для цього нам достатньо скористатися відповідним значенням:
Body (text-transform: capitalize;)
Не знаю наскільки часто ви будете використовувати таке CSS правило, однак знати про подібну можливість вам не завадить, особливо при вирішенні нетривіальних завдань. Результат видно на зображенні нижче.
![](https://i2.wp.com/site4business.net/wp-content/uploads/2015/11/capitalize.jpg)
І нарешті, давайте коротко зупинимося на останньому значенні - none. Як я вже говорив, він може застосовуватися для скасування спадкування від батька. Наприклад, уявімо що у нас діють всі попередні правила, а для абзаців нам варто їх скасувати, для цього ми пишемо наступне:
P (text-transform: none;)
Смію припустити що Ви зрозуміли, якщо немає - задавайте свої питання в коментарях. А на цьому у мене все. Сподіваюся, цей урок по CSS був для вас корисний. Якщо це так:
- Зробіть репост даної статті в соціальних мережах, щоб більше людей отримали від неї користь;
- Підписуйтесь на мою розсилку, щоб не пропустити корисні і цікаві публікації на блозі.
На цьому я з вами не прощаюсь. Дякую за увагу і до зустрічі в наступних публікаціях!