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 пропонує два елементи до створення індексу: (від англ. superscript) - верхній індекс і (від англ. subscript) - нижній індекс. Текст, поміщений в один із цих контейнерів, позначається меншим розміром, ніж базовий текст, і зміщується щодо нього вгору або вниз. У прикладі 1 наведено спільне використання зазначених елементів та стилів для зміни вигляду тексту.
Приклад 1. Створення верхнього та нижнього індексу
Верхній та нижній індекс .formula ( font-size: 1.4em; /* Розмір тексту формули */ ) sup, sub ( font-style: italic; /* Курсивне зображення */ color: red; sub (color: blue; /* Синій колір символів */ )
Характеристичне рівняння поверхні другого ступеня
λ3 - I1λ2 + I2λ - I3 = 0
У прикладі одночасно зустрічається як нижній, і верхній індекс. Для зміни зображення шрифту індексу застосовуються стилі, які задають єдине оформлення (рис. 1).
Мал. 1. Вигляд індексів після застосування стилів
Можна взагалі відмовитися від використання та на користь стилів. Аналогом цих елементів є властивість vertical-align , що змушує текст зміщуватися по вертикалі на задану відстань. Зокрема, у прикладі 2 як значення застосовується 0.8em для верхнього індексу та -0.5em для нижнього. Em - це відносна одиниця, що дорівнює розміру поточного шрифту. Наприклад, 0.5em свідчить, що текст треба зрушити на половину розміру шрифту.
Приклад 2. Використання стилів для керування індексами
Верхній і нижній індекс. / font-size: 0.6em;/* Розмір індексу */ color: red; /* Колір верхнього індексу */ vertical-align: 0.8em; нижнього індексу */ vertical-align: -0.5em;/* Зрушуємо текст вниз */ )
Багаточлен ступеня n
f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn
У прикладі сама формула виводиться збільшеним розміром, символи верхнього індексу встановлюються червоним, а нижні - синім (рис. 2).
Вітаю. Іноді при створенні веб-сторінок необхідно деяким словам встановити за допомогою css верхній регістр або надрядкове положення. Погляньмо, як це робиться.
Верхній та нижній регістр за допомогою cssВзагалі і сьогодні можна потрібний текст укласти в теги та отримати потрібне відображення, але давайте також подивимося, як це можна зробити за допомогою CSS, тому що техніка трохи відрізняється.
Наприклад, треба написати формулу H 2 O у html-документі. Це робиться так:
- Пишеться сама формула
- Ті слова та цифри, які потрібно вивести у верхньому або нижньому індексі укладають у тег span, якому потрібно прописати якийсь клас. Наприклад: символи, які потрібно вивести
- У css потрібно задати цей елемент:
Top-index(
Vertical-align: super;
}
Ця властивість відповідає за вертикальне вирівнювання тексту. Його значення super визначає, що текст виведеться у верхньому індексі. Але розмір шрифту залишився таким самим, як і у звичайного тексту. Щоб все виглядало красивіше, потрібно також встановити розмір шрифту трохи менше за допомогою властивості font-size.
Ось так просто працює властивість. Відповідно, для виведення в нижньому індексі потрібно написати так:
Top-index(
Vertical-align: sub;
}
На відміну від аналогічних html-тегів у тому, що ці правила не змінюють розміру шрифту, тому якщо вам потрібно це зробити, то доведеться прописати новий розмір у таблиці стилів.
Це все, що вам потрібно знати про верхній та нижній індекс у 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
function capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )
який повинен добре працювати для або
