Ось уже кілька уроків ми викриваємося з форматуванням тексту за допомогою 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 був для вас корисним. Якщо це так:

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

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

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

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

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

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

Підтримка Браузерами

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

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

Стандартні атрибути

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

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

Атрибут	Значення	Опис	DTD
class	ім'я_класу	Вказує ім'я класу елемента	STF
dir	rtl ltr	Вказує напрямок тексту вмісту в елементі	STF
id	ідентифікатор	Вказує унікальний ідентифікатор елемента	STF
lang	код_мови	Вказує код мови вмісту елемента	STF
style	визначення_стилю	Вказує вбудований стиль елемента	STF
title	текст	Вказує додаткову інформацію про елемент	STF
xml:lang	код_мови	Визначає код мови для вмісту елемента в документах XHTML	STF

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

Атрибути подій

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

Атрибут	Значення	Опис	DTD
onclick	скрипт	Скрипт, що запускається при натисканні мишею	STF
ondblclick	скрипт	Скрипт, що запускається при подвійному клацанні мишею	STF
onmousedown	скрипт	Скрипт, який запускається при натисканні кнопки миші	STF
onmousemove	скрипт	Скрипт, який запускається при переміщенні покажчика миші	STF
onmouseout	скрипт	Скрипт, який запускається, коли вказівник миші йде за межі елемента	STF
onmouseover	скрипт	Скрипт, який запускається, коли вказівник миші переміщається над елементом	STF
onmouseup	скрипт	Скрипт, що запускається під час відпускання кнопки миші	STF
onkeydown	скрипт	Скрипт, який запускається при натисканні клавіші	STF
onkeypress	скрипт	Скрипт, який запускається, коли клавіша натиснута, а потім відпущена	STF
onkeyup	скрипт	Скрипт, який запускається, коли клавіша відпущена	STF

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

У минулому відео уроці ми навчилися видаляти та додавати нову інформаціюв нову версію HTML-документа, при цьому повідомляючи про це пошуковим системамта виділяючи візуально, щоб відвідувачі також могли бачити зміни. Для цього, ми використовували теги del і ins .

У цьому відео уроці ми продовжуємо тему форматування тексту HTML-документі. Ми познайомимося з двома HTML-тегами, які вказують верхній та нижній індекс тексту.

HTML-тег sup — верхній індекс тексту HTML.

HTML-тег ^{призначений для вказівки верхнього індексу тексту HTML. У деяких тематиках сайтів цей тег буде просто незамінним. Наприклад, якщо у Вас є або планується сайт пов'язаний з будь-якими формулами, математичними або хімічними. Або, якщо є сайт будівельної тематики, то тег буде дуже корисним і допоможе при оформленні статей, при написанні формул або будь-яких величин, наприклад, квадратних метрів у будівельній тематиці.}

Але якщо Ваш сайт не відноситься до перерахованих тем, це не означає, що тег ^{не знадобиться. Достатньо проявити фантазію та кмітливість і знайти застосування цього елементу.}

HTML-тег sub - нижній індекс тексту HTML.

Що стосується HTML-тегу _{, то він є протилежністю тегу ^{і відповідає за вказівку нижнього індексу тексту. Нижній індекс тексту може бути використаний при написанні формул або математичних рівнянь. Але окрім цього, можливо Ви зможете знайти й інше застосування тегу .}}

Наступний Відео Урок присвячений ще двом тегам, які в деяких ситуаціях можуть бути просто незамінними. Причому вони здатні не лише форматувати текст, наприклад, у статті, а й за вказівкою різної інформаціїна сайті під час верстки сторінок. Один з тегів здійснює перенесення в HTML, а другий малює горизонтальну лінію.

Перетворення малої літери на нижній регістр і перший верхній регістр за допомогою 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

який повинен добре працювати для або </p> <p>Індексом по відношенню до тексту називається зсув символів щодо базової лінії вгору або вниз. Залежно від позитивного чи негативного значення зміщення індекс називається, відповідно, верхнім або нижнім. Вони активно застосовуються в математиці, фізиці, хімії та для позначення одиниць виміру. HTML пропонує два елементи для створення індексу: <sup>(Від англ. Superscript) - верхній індекс та <sub>(Від англ. Subscript) - нижній індекс. Текст, поміщений в один із цих контейнерів, позначається меншим розміром, ніж базовий текст, і зміщується щодо нього вгору або вниз. У прикладі 1 наведено <a href="/how-to-correctly-synchronize-the-iphone-with-the-ipad-the-options-for-the-solution-and-the-order-of-actions-all-about-sharing-iphone-and-ipad.html">спільне використання</a>вказаних елементів та стилів для зміни вигляду тексту.</p><p>Приклад 1. Створення верхнього та нижнього індексу</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Верхній та нижній індекс</title> <style> .formula { font-size: 1.4em; /* Размер текста формулы */ } sup, sub { font-style: italic; /* Курсивное начертание */ color: red; /* Красный цвет символов */ } sub { color: blue; /* Синий цвет символов */ } </style> </head> <body> <p>Характеристичне рівняння поверхні другого ступеня</p> <p class="formula">λ ³- I ₁λ ²+ I ₂λ - I ₃ = 0</p> </body> </html> </p><p>У прикладі одночасно зустрічається як нижній, і верхній індекс. Для зміни зображення шрифту індексу застосовуються стилі, які задають єдине оформлення (рис. 1).</p><p>Мал. 1. Вигляд індексів після застосування стилів</p><p>Можна взагалі відмовитись від використання <sup>і <sub>на користь стилів. Аналогом цих елементів є властивість vertical-align , що змушує текст зміщуватися по вертикалі на задану відстань. Зокрема, у прикладі 2 як значення застосовується 0.8em для верхнього індексу та -0.5em для нижнього. Em - це відносна одиниця, що дорівнює розміру поточного шрифту. Наприклад, 0.5em свідчить, що текст треба зрушити на половину розміру шрифту.</p><p>Приклад 2. Використання стилів для керування індексами</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Верхній та нижній індекс</title> <style> .formula { font-size: 1.6em; /* Размер текста */ font-style: italic; /* Курсивное начертание */ } .sup, .sub { font-style: normal; /* Нормальное начертание */ font-size: 0.6em; /* Размер индекса */ color: red; /* Цвет верхнего индекса */ vertical-align: 0.8em; /* Сдвигаем текст вверх */ } .sub { color: blue; /* Цвет нижнего индекса */ vertical-align: -0.5em; /* Сдвигаем текст вниз */ } </style> </head> <body> <p>Багаточлен ступеня <em>n</em></p> <p class="formula">f(x) = a <span class="sub">0</span>+ a <span class="sub">1</span> x + ... + a <span class="sub">n-1</span> x <span class="sup">n-1</span>+ a <span class="sub">n</span> x <span class="sup">n</p> </body> </html> </p><p>У прикладі сама формула виводиться збільшеним розміром, символи верхнього індексу встановлюються червоним, а нижні - синім (рис. 2).</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="article-share clearfix"> <button class="article-share__print" type="button"> <span class="print-title">Роздрукувати</span> </button> <div class="article-share__btns"> <div class="article-share__title">Підтримайте проект - поділіться посиланням, дякую!</div> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div data-background-alpha="0.0" data-buttons-color="#ffffff" data-counter-background-color="#ffffff" data-share-counter-size="13" data-follow-button-text="Присоединяйтесь!" data-top-button="false" data-share-counter-type="separate" data-share-style="10" data-mode="share" data-like-text-enable="false" data-hover-effect="rotate-cw" data-mobile-view="false" data-icon-color="#ffffff" data-follow-text="Подпишитесь на нашу группу ВКонтакте! С нами интересно, полезно и весело!" data-orientation="horizontal" data-text-color="#ffffff" data-share-shape="round-rectangle" data-sn-ids="vk.ok.mr.fb.tw.gp.ps.ev." data-share-size="30" data-background-color="#ededed" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.tw.wh.ok.gp." data-pid="1251662" data-counter-background-alpha="1.0" data-follow-title="Актуальні мобільні технології" data-following-enable="false" data-exclude-show-more="false" data-selection-enable="true" class="uptolike-buttons"></div> </div> </div> <div class="article-similar"> <div class="h2">Читайте також</div> <div class="article-similar__container" data-summary="174"> <a data-level="0" href="/antivirusnaya-programma-avast-skachat-i-ustanovit-kak-ustanovit-besplatnyi.html" class="article-similar__item" role="link"> <span class="article-similar__prev"> <img src="/uploads/037aca252b8853bba2e888bc03e5e9c5.jpg" alt="Як встановити безкоштовний антивірус аваст" class="article-similar__image" loading=lazy loading=lazy> <span class="news__info"> <span class="news__info-panel"> <span class="news__info-views"> <svg class="svg-icon-eye"><use xlink:href="/wp-content/themes/kids2015/img/ui/svg/icons.svg#icon-eye"></use></svg> </span> <span class="news__info-comments"> <svg class="svg-icon-comment"><use xlink:href="/wp-content/themes/kids2015/img/ui/svg/icons.svg#icon-comment"></use></svg> </span> </span> </span> </span> <span class="article-similar__title">Як встановити безкоштовний антивірус аваст</span> </a> <a data-level="0" href="/chem-ochistit-komp-ot-virusov-kak-ochistit-kompyuter-ot-virusov-samostoyatelno-chto-nuzhno-delat-pos.html" class="article-similar__item" role="link"> <span class="article-similar__prev"> <img src="/uploads/6cbdbc6d105e6e15c880876962b56187.jpg" alt="Як очистити комп'ютер від вірусів самостійно" class="article-similar__image" loading=lazy loading=lazy> <span class="news__info"> <span class="news__info-panel"> <span class="news__info-views"> <svg class="svg-icon-eye"><use xlink:href="/wp-content/themes/kids2015/img/ui/svg/icons.svg#icon-eye"></use></svg> </span> <span class="news__info-comments"> <svg class="svg-icon-comment"><use xlink:href="/wp-content/themes/kids2015/img/ui/svg/icons.svg#icon-comment"></use></svg> </span> </span> </span> </span> <span class="article-similar__title">Як очистити комп'ютер від вірусів самостійно</span> </a> <a data-level="0" href="/kak-ochistit-komp-ot-virusov-bez-antivirusa-kak-polnostyu-ochistit.html" class="article-similar__item" role="link"> <span class="article-similar__prev"> <img src="/uploads/8b14d6f586ad0ccd4e2f67904fb70f7a.jpg" alt="Як повністю очистити комп'ютер від вірусів" class="article-similar__image" loading=lazy loading=lazy> <span class="news__info"> <span class="news__info-panel"> <span class="news__info-views"> <svg class="svg-icon-eye"><use xlink:href="/wp-content/themes/kids2015/img/ui/svg/icons.svg#icon-eye"></use></svg> </span> <span class="news__info-comments"> <svg class="svg-icon-comment"><use xlink:href="/wp-content/themes/kids2015/img/ui/svg/icons.svg#icon-comment"></use></svg> </span> </span> </span> </span> <span class="article-similar__title">Як повністю очистити комп'ютер від вірусів</span> </a> </div> </div> <style> #mc-container { padding: 10px; } </style> <div class="comments-area"> <div id="mc-container"> <div id="mc-content"> </div> </div> </div> <p> </p> <p> </p> <p> </p> </div> </div> </article> <aside class="main-sidebar"> <div id="custom_html-2"> <div class="textwidget custom-html-widget"> </div> </div> </aside> </main> <footer id="footer" class="page-padding clearfix" role="contentinfo"> <div class="footer-col"> <div class="footer-logo"> <img class="footer-logo__img" src="/logo.png" alt="technologyyoung.ru" loading=lazy loading=lazy> <span class="footer-logo__desc"></span> </div> <p class="footer-copyright">2021. Актуальні мобільні технології.</p> <div class="footer-counters"> <div class="footer-counters__item"> </div> </div> </div> <div class="footer-col"> <div class="footer-nav__header">Інформація</div> <ul class="footer-nav"> <li class="footer-nav__item"> <a href="" role="link">Про проект</a> </li> <li class="footer-nav__item"> <a href="/sitemap.xml" role="link">Карта сайту</a> </li> <li class="footer-nav__item"> <a href="" class="red-text" role="link">Розміщення реклами</a> </li> </ul> </div> <div class="footer-col"> <div class="footer-subscribe">Підписуйтесь на нас: <a href="" target="_blank" class="soc-vk" title="Перейти до нашої сторінки VK">У</a> </div> <div class="footer-recommend">Будь ласка, підтримайте проект — розкажіть про нас у соціальних мережах! <div class="footer-recommend__yandex"> <script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="big" data-yashareQuickServices="vkontakte,odnoklassniki,moimir,facebook,twitter,gplus" data-yashareTheme="counter" data-yashareLink="/" data-yashareTitle="Актуальні мобільні технології" data-yashareDescription="Актуальные мобильные технологии"> </div> </div> </div> </div> </footer> </section> <button id="scrollUp" type="button" title="Вгору"></button> <script type='text/javascript' src='https://technologyyoung.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://technologyyoung.ru/wp-content/plugins/advanced-ads-sticky-ads/public/assets/js/sticky.js?ver=1.7'></script> <script type='text/javascript'> /* <![CDATA[ */ var JQLBSettings = { "fitToScreen": "1", "resizeSpeed": "400", "displayDownloadLink": "0", "navbarOnTop": "0", "loopImages": "", "resizeCenter": "", "marginSize": "0", "linkTarget": "", "help": "", "prevLinkTitle": "previous image", "nextLinkTitle": "next image", "prevLinkText": "\u00ab Previous", "nextLinkText": "Next \u00bb", "closeTitle": "close image gallery", "image": "Image ", "of": " of ", "download": "Download", "jqlb_overlay_opacity": "60", "jqlb_overlay_color": "#000000", "jqlb_overlay_close": "1", "jqlb_border_width": "10", "jqlb_border_color": "#ffffff", "jqlb_border_radius": "0", "jqlb_image_info_background_transparency": "100", "jqlb_image_info_bg_color": "#ffffff", "jqlb_image_info_text_color": "#000000", "jqlb_image_info_text_fontsize": "10", "jqlb_show_text_for_image": "1", "jqlb_next_image_title": "next image", "jqlb_previous_image_title": "previous image", "jqlb_next_button_image": "http:\/\/technologyyoung.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/next.gif", "jqlb_previous_button_image": "http:\/\/technologyyoung.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/prev.gif", "jqlb_maximum_width": "", "jqlb_maximum_height": "", "jqlb_show_close_button": "1", "jqlb_close_image_title": "close image gallery", "jqlb_close_image_max_heght": "22", "jqlb_image_for_close_lightbox": "http:\/\/technologyyoung.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/closelabel.gif", "jqlb_keyboard_navigation": "1", "jqlb_popup_size_fix": "0" }; /* ]]> */ </script> <script type='text/javascript' src='https://technologyyoung.ru/wp-content/plugins/wp-lightbox-2/wp-lightbox-2.min.js?ver=1.3.4.1'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "right-sidebar", "margin_top": 50, "margin_bottom": 300, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['custom_html-2'] }; </script> <script type='text/javascript' src='https://technologyyoung.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> </html>