У минулому відео уроці ми навчилися видаляти і додавати нову інформацію в нову версію 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 (не застосовується форматування). На перший погляд вам все це може здатися дуже складним.

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

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

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

Body (text-transform: uppercase;)

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

Нижній регістр - застосувати для всіх

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

Body (text-transform: lowercase;)

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

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

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

Body (text-transform: capitalize;)

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

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

P (text-transform: none;)

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

Добрий день. Іноді при створенні веб-сторінок необхідно деяким словами задати з допомогою 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.

HTML Теги _{і ^{- Дослівний і Надрядковий Текст}}

Визначення та Використання

тег _{визначає підрядковий текст. Підрядковий текст має висоту в два рази менше і з'являється під базовою лінією. Підрядковий текст може використовуватися при написанні хімічних формул, наприклад H 2 O.}

тег ^{визначає надрядковий текст. Надрядковий текст має висоту в два рази менше і з'являється над базовою лінією. Надрядковий текст може використовуватися при написанні виносок, наприклад WWW.}

підтримка браузера

Теги _{і ^{підтримуються всіма основними браузерами.}}

Відмінності Між HTML і XHTML

стандартні Атрибути

стовпець DTDвказує, в якому типі документа HTML 4.01 / XHTML 1.0 DTD атрибут дозволений. S = Strict, T = Transitional і F = Frameset.

Теги _{і ^{підтримують такі стандартні атрибути:}}

Додаткова інформація про Стандартних атрибутах.

атрибути Подій

Теги _{і ^{підтримують такі атрибути подій:}}

Додаткова інформація про