Підкреслення у html: способи. Підкреслення посилань та тексту через CSS, властивість text-decoration Підкреслення код

Залишіть коментар 6,950

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

Існує безліч способів, як стилізувати підкреслення. Можливо, ви пам'ятаєте статтю «створюємо підкреслення посилань на Medium». Medium не намагалися робити щось з рамок, що виходить, вони хотіли просто створити привабливі підкреслення в тексті.

Тонкі, чорні підкреслення з пробілами навколо літер з нижніми виносками – робота Марсін Вітчері зі статті створюємо підкреслення посилань на Medium.

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

Цілі

Чому просто не використовувати text-decoration: underline? Якщо ми говоримо про ідеальний сценарій, наголошення повинні:

розташовуватись нижче базової лінії;

пропускати нижні виносні частини літер;

змінювати колір, товщину та стилі;

переходити на новий рядок;

працювати з будь-якими фонами.

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

Підходи

То які способи є у нашому розпорядженні для підкреслення тексту? Я згадав такі:

text-decoration;

background-image;

фільтри SVG;

Underline.js (canvas);

text-decoration-*

Пройдемося по всьому списку та розглянемо всі плюси та мінуси кожного підходу.

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

Властивість text-decoration – найпростіший спосіб підкреслення тексту. Потрібно застосувати лише одну властивість. На маленькому тексті така лінія виглядатиме нормально, але варто збільшити розмір шрифту і вона вже виглядає незграбно.

Найбільша проблема із властивістю text-decoration – відсутність кастомізації. Лінія використовує колір і розмір шрифту того тексту, до якого застосовується, і немає кроссбраузерного способу зміни стилів. Трохи пізніше поговоримо докладніше з цієї властивості.

Плюси

просто використовувати;

розташовується нижче за базову лінію;

пропускає нижні виносні частини літер за замовчуванням у Safari та iOS;

перестрибує на новий рядок;

працює з будь-якими фонами.

Мінуси

не пропускає виносні нижні частини літер інших браузерах;

не можна змінювати колір, товщину та стилі.

Властивість border-bottom

Властивість border-bottom – гарний баланс швидкості та кастомізації. Цей підхід використовує перевірені CSS рамки, а значить, ви з легкістю можете змінювати колір, товщину та стилі. Так виглядає властивість border-bottom на елементах інлайнових:

Найбільший мінус - те, наскільки далеко підкреслення розташоване від тексту. Підкреслення розташоване нижче за нижні виносні частини літер. Ця проблема вирішується, якщо зробити елемент inline-block і зменшити line-height, але втрачається можливість перестрибувати на нові рядки. Добре підходить для одиночних рядків, але не більше.

Крім того, за допомогою text-shadow можна приховати частини лінії навколо нижніх виносок. У такому разі вам доведеться імітувати колір фону, що означає, що метод працює лише на однорідних фонах. Градієнти та зображення не підійдуть.

На даний момент існує 4 властивості для стилізації підкреслення. Набагато краще ніж просто text-decoration.

Плюси

можна використовувати властивість transition та анімувати колір та товщину;

перестрибує на нові рядки за замовчуванням, якщо елемент не є inline-block;

Мінуси

лінія розташована дуже далеко і її складно пересунути;

занадто багато зайвих властивостей потрібно задіяти, щоб підкреслення добре виглядало;

погане виділення тексту під час використання text-shadow.

Властивість box-shadow

Властивість box-shadow малює підкреслення за допомогою двох внутрішніх тіней: одна створює прямокутник, а друга ховає його. Це означає, що для правильної роботи методу необхідне однорідне тло.

Такий самий трюк із text-shadow можна використовувати для імітації пропуску навколо нижніх виносок літер. Якщо колір лінії відрізняється від тексту, або він досить тонкий, то проблем виникнути не повинно, як це буває з text-decoration.

Плюси

можна розташувати під базовою лінією;

можна пропускати виноски за допомогою text-shadow;

можна змінювати колір та товщину;

перестрибує на нові рядки.

Мінуси

не можна змінювати стилі;

не працює з усіма фонами.

Властивість background-image

Властивість background-image найкраще вирішує наші завдання, і в нього дуже мало мінусів. Ідея полягає в тому, що ви створюєте зображення за допомогою linear-gradient і background-position, яке повторюється горизонтальною віссю вздовж рядків тексту. Елемент повинен бути display: inline;

Демо нижче не використовує linear-gradient. Для створення крутого ефекту можна використовувати своє зображення.

Плюси

можна розташувати нижче базової лінії;

можна пропускати нижні виноски за допомогою text-shadow;

можна змінювати колір, товщину (навіть на півпікселі) та стилі;

працює з зображеннями користувача;

перестрибує на нові рядки;

працює з будь-яким фоном, якщо не використовувати text-shadow.

Мінуси

розмір зображення може по-різному змінюватися під різні дозволи, браузери та рівні збільшення.

SVG фільтри

Ось із цим методом я грав. Ви можете створити інлайновий SVG елемент filter, який малюватиме лінію, і розширити текст, щоб замаскувати ті частини лінії, які мають бути прозорими. Фільтр можна присвоїти id і посилатися на нього в CSS за допомогою filter: url('#svg-underline').

У чому тут плюс – фільтр додає прозорість, не покладаючись на text-shadow. Тобто ви можете пропускати нижні виноски букв на будь-якому фоні, у тому числі градієнти та зображення! Приклад нижче працює тільки з одним рядком тексту, тому обережніше.

А ось так це виглядає в Chrome та Firefox:

У IE, Edge та Safari з підтримкою виникають проблеми. У CSS важко тестувати підтримку SVG фільтрів. Можна використовувати правило @supports на filter, але так ви перевірите тільки роботу самого посилання, а не те, чи фільтр застосований чи ні. Мій спосіб досить грубо працює з браузерами, так що будьте вдвічі обережнішими.

Плюси

розташований нижче базової лінії;

пропускає нижні виноски;

можна змінювати колір, товщину та стилі;

працює на будь-якому фоні.

Мінуси

не перестрибує на нові рядки;

не працює в IE, Edge і Safari, але можна як фолбек вказати text-decoration. Підкреслення в Safari самі собою виглядають чудово.

Underline.js (Canvas)

Underline.js – дивовижна бібліотека. Мене вражає, що Wenting Zhang змогли зробити з JS та увагою до деталей. Якщо ви ще не бачили технічне демо Underline.js, зупиніться на хвилинку і подивіться. У мережі є чудовий 9-хвилинний виступ на тему принципів роботи, я вам зараз швидко його перекажу. Підкреслення малюються за допомогою canvas. Абсолютно новий підхід, який напрочуд добре працює.

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

Цю бібліотеку варто згадати лише як доказ концепції. Canvas має потенціал для створення красивих, інтерактивних підкреслень, але для правильної роботи вам доведеться написати додатковий JS код.

Властивості text-decoration-*

Пам'ятаєте, я сказав, що трохи пізніше ми докладніше розберемо щось? Нині цим і займемося. Властивість text-decoration працює добре сама по собі, але ми можемо додати пару експериментальних властивостей для кращого вигляду:

text-decoration-color

text-decoration-skip

text-decoration-style

Не радійте заздалегідь, ви ж знаєте про підтримку в браузерах.

Властивість text-decoration-color

Властивість text-decoration-color дозволяє змінювати колір підкреслення окремо від кольору тексту. Властивості навіть непогана підтримка у браузерах. Воно працює у Firefox і з префіксом у Safari. Є свій мінус – якщо ви не очищаєте лінію навколо виносок, у Safari вона лягає поверх тексту. Firefox:

Властивість text-decoration-skip

Властивість text-decoration-skip відповідає за пропуск нижніх виносок у тексті, що підкреслюється.

Властивість нестандартна і зараз працює тільки в Safari. Для роботи в інших браузерах потрібно використовувати префікс-webkit-. У Safari ця властивість включена за умовчанням, тому підкреслення пропускають нижні виноски навіть на сайтах, де ця властивість не вказана.

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

Властивість text-decoration-style

Властивість text-decoration-style пропонує той самий набір підкреслень, що й властивість border-style, але також додає нового вигляду – wavy. Можливі значення:

Прямо зараз властивість text-decoration-style працює тільки у Firefox, нижче показаний скріншот:

Набір однотонних підкреслень Схоже, виглядає?

Що не так?

Властивості text-decoration-* інтуїтивніші в порівнянні з іншими властивостями для стилізації підкреслень. Однак якщо по-іншому поглянути на вимоги, які ми висунули раніше, то можна помітити, що за допомогою цих властивостей не можна змінювати товщину та позицію. Після невеликого вивчення я знайшов ці дві властивості:

text-underline-width

text-underline-position

Схоже, ці властивості були викинуті з ранньої версії CSS через відсутність інтересу до них. Вони так і не застосовувалися. Гей, я в цьому не винний.

Висновки

То як же найкраще підкреслювати текст? Все залежить від різних факторів.

Для маленького тексту я рекомендую використовувати text-decoration та експериментальну властивість text-decoration-skip, сподіваючись, що воно працюватиме. У більшості браузерів це виглядає так собі, але так було завжди, і люди не звертали на це увагу. Якщо ви досить терплячі, є шанс, що незабаром усі ваші підкреслення добре виглядатимуть, і вам нічого не доведеться змінювати.

Для основного тексту використовуйте background-image. Метод працює, виглядає красиво, і для нього є міксини Sass. Якщо підкреслення тонке або колір відрізняється від тексту, швидше за все, ви можете пропустити метод з text-shadow. Для тексту на одному рядку використовуйте border-bottom та будь-які інші властивості.

А для пропуску винесення літер на градієнтних фонах або зображеннях спробуйте використовувати фільтр SVG. Або просто не змішуйте такі фони з підкресленнями. У майбутньому, коли покращиться підтримка у браузерах, можна буде використовувати властивості text-decoration-*.

Підкреслення для блокових елементів на кшталт тега

можна проводити подвійно. Наприклад, лінію під текстом встановлюватиме на всю ширину блоку, незалежно від обсягу тексту. А також підкреслення робити лише у тексту. Далі розглянемо обидва варіанти.

Лінія під текстом на всю ширину блоку

Щоб створити лінію під текстом, слід додати до елементу стильову властивість border-bottom , його значенням є одночасно товщина лінії, її стиль і колір (приклад 1).

Приклад 1. Лінія всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Лінія під заголовком

Приклад тексту

Відстань від лінії до тексту можна регулювати властивістю padding-bottom, додаючи його до селектора H1. Результат цього прикладу показано на рис. 1.

Підкреслення тексту

Щоб підкреслити лише текст, необхідно скористатися властивістю text-decoration зі значенням underline, знову ж таки, додаючи його до селектора H1 (приклад 2).

Приклад 2. Лінія ширини тексту

HTML5 CSS 2.1 IE Cr Op Sa Fx

Підкреслення заголовка

Приклад тексту

Чорний заголовок привертає увагу, незважаючи на те, що він чорний, а не білий.

Результат цього прикладу показано на рис. 2.

У разі використання властивості text-decoration лінія жорстко прив'язана до тексту, тому визначити її положення та стиль не вдасться.

або вивчаємо теги, що форматують HTML текст

До вашої уваги представлений один із ключових і найпростіших уроків самовчителя.

HTML текстє основною складовою більшості сторінок Інтернету.
За ключовими фразами у тексті HTML-сторінкиКористувачі можуть знайти ваш сайт.
HTML текстможе бути будь-якого розміру і кольору, на вашу думку. Ви також можете визначити вид шрифту та його об'ємність.
HTML розмір шрифтузазвичай встановлюється у пікселях.
HTML форматування текстушироко поширене, застосовуються форматуючі теги.

Дивіться нижче теги, що форматують HTML текст:

Теги → жирний HTML текст(жирний шрифт).
Теги → жирний HTML текст(жирний шрифт).
Теги → моноширинний HTML текст(Моноширинний шрифт).
Теги → моноширинний HTML текст(Моноширинний шрифт).
Теги → моноширинний HTML текст(Моноширинний шрифт).
Теги → HTML текст, Розмір більше звичайного (великий шрифт).
Теги → HTML текст, Розмір менше звичайного (дрібний шрифт).
Теги → похилий HTML текст(похилий шрифт).
Теги → похилий HTML текст(похилий шрифт).
Теги → похилий HTML текст(похилий шрифт).
Теги → підкреслений HTML текст(підкреслений шрифт).
Теги → закреслений HTML текст(закреслений шрифт).
Теги → HTML текст(шрифт) у нижньому індексі.
Теги → HTML текст(шрифт) у верхньому індексі.

HTML форматування тексту: закреслений, підкреслений текст

Результат: ... моноширинний шрифт

Результат: ... розмір шрифту більше звичайного

Результат: ... похилий шрифт

Результат: закреслений текст (закреслений шрифт)

Результат: верхній індекс

З способів форматування, наведених вище, повинні застосовуватися тільки для невеликих ділянок тексту. Користуйтесь CSSякщо хочете встановити певний шрифт для всієї сторінки, або кількох рядків, наприклад.

Існує багато тегів для форматування тексту. Одні з них використовуються часто (і їх ви запам'ятаєте швидко), інші - рідко (їх і не треба запам'ятовувати).

Тут ми розглянемо ті, які часто використовуються.

Теги, які роблять текст заголовками

Ці теги виділяють текст як заголовків. Тобто. кожен заголовок починається з нового рядка, виділений напівжирним шрифтом і має свій розмір (заголовок першого рівня найбільший, шостого - найменший).

Ці теги можна використовувати з параметром горизонтального вирівнювання align. Можливі значення цього параметра:

left- зліва,
right- Праворуч,
center- по центру,
jastify- по ширині.

Приклад коду:

Теги поділу на абзаци та перенесення рядка

Тег
- Тег примусового переведення рядка. Текст, після цього тега починається з нового рядка.
Теги поділяють текст на абзаци. Перед початком кожного абзацу слід розмістити тег

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

У тега

є параметр align, який визначає спосіб вирівнювання тексту всередині параграфа. Можливі значення цього параметра:

left- зліва,
right- Праворуч,
center- по центру,
jastify- по ширині.

Приклад коду:

Форматування html

Це абзац, він відокремлений від усього тексту порожніми рядками зверху та знизу та вирівняний по лівому краю.

Це абзац, він відокремлений від усього тексту порожніми рядками зверху та знизу та вирівняний праворуч.

Це абзац, він відокремлений від усього тексту порожніми рядками зверху та знизу та вирівняний по центру.

Це просто текст.
Це текст з нового рядка.