Вітаю всіх, хто жадає нових знань і читає мій блог. Публікацію сьогоднішнього дня я хочу присвятити досить легкою темі, яка тим не менш регулярно викликає ряд питань у новачків: «Як прибрати або додати нижнє підкреслення html».

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

А давай-ка ось цим підкреслимо!

В існують спеціальний парний тег для підкреслення тексту: слово.

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

Для підкреслення текстового контенту в основному використовуються такі властивості: border і text-decoration.

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

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

1. border-right (Праворуч)
2. border-top (Зверху)
3. border-left (зліва)
4. border-bottom (Знизу)

• точкове ( dotted)
• пунктирне ( dashed)
• лінійне ( solid)
• подвійне ( double)
• об'ємне обрамлення блокам ( groove,inset,ridge іoutset)

Не забувайте, що завжди можна повторити стильові настройки блоку-батька за допомогою ключового слова inherit.

Тепер обговоримо властивість мови css text-decoration. Даний елемент відповідає за додаткові прикраси тексту.

До них відносяться:

1. миготіння ( blink)
2. лінія над текстом ( overline)
3. закреслені об'єкти ( line-through)
4. успадкування стилізації ( inherit)
5. скасування всіх додаткових декорацій ( none)
6. необхідне нам підкреслення ( underline)

Настав час практики

Тепер я хочу, щоб ви закріпили отримані знання і практично випробували наведений мною приклад програмного коду. Для тих, хто знайомий з цією темою, це також буде корисно. Як ми всі знаємо: «Повторення - мати навчання!».

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

Озаглавим текст підкресленим назвою

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

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

З повагою, Роман Чуєшов

Підкреслений текст в HTML виділяється за допомогою тега u HTML (від слова underline). Застосовується він у такий спосіб (необхідної частини тексту міститься між тегами ):

Конструктор сайтів "Нубекс"

Але даний код вважається невалідним, тому значно ефективніше і правильніше використовувати CSS-стилі для декорації тексту.

Підкреслити текст - CSS

Як ми вже говорили в статті, декорації тексту задаються за допомогою властивості text-decoration. Підкреслений текст задається параметром underline:

Конструктор сайтів Нубекс "

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

• Підкреслити текст пунктиром CSS:

  Конструктор сайтів Нубекс "

  
  
  
• Підкреслення точками:

  Конструктор сайтів Нубекс "

  
  
  
• Подвійна риса:

  Конструктор сайтів Нубекс "

  
  
  

Як видно з наведених прикладів, управляти стилем підкреслення можна за допомогою властивості border-bottom (Нижня границя). За допомогою цього параметра можна задати тип підкреслення, колір, товщину.

Дозволяє зробити різний підкреслення в HTML нижнє (underline), верхнє (overline), перекреслений текст (line-through) і т.п. Сумісний цю фішку з попередньої і вийде:

У другому рядку показано як все записується в один ряд з text-decoration.

text-decoration-style - стиль підкреслення тексту

Опція задає зовнішній вигляд декоративної лінії для / посилання. У нових рекомендаціях CSS були додані значення wavy і double, тепер їх всього 5:

• solid - суцільна лінія;
• double - подвійна (з першого прикладу вище);
• dotted - складається з послідовності точок;
• dashed - дозволяє зробити пунктирне підкреслення CSS;
• wavy - ефектна хвиляста лінія.

text-underline-position - позиціонування CSS підкреслення

З допомогу цього властивості можна керувати позицією лінії щодо гліфа шрифту.
Всього доступні 4 варіанти:

• auto - розташовується в максимальному наближенні базової лінії тексту;
• under - під самою нижньою межею шрифту;
• left і right - зліва / справа для записів, що відображаються вертикально.

Ось наочне відміну нижнього підкреслення тексту за допомогою under і auto:

Різниця, думаю, цілком очевидна.

text-decoration-skip - прибираємо підкреслення для елементів

За допомогою опції можна скасувати (пропустити) декорування деяких елементів в HTML рядку. Щоб краще зрозуміти допустимі значення spaces, objects, box-decoration, edges, ink продублюють картинку з минулого замітки:

Тобто, наприклад, за допомогою ink ви можете зробити нижнє підкреслення в CSS, яке б не зустрічалося з символами. Значення objects дозволяє пропускати інлайновие елементи (inline-block) - вставляєте span, і суцільна лінія перерветься у відповідному місці:

Параметри box-decoration, spaces, edges набагато гірше підтримуються браузерами, тому їх результат іноді відрізняється від очікуваного. Ось стан по сумісності / підтримки text-decoration на момент написання статті:

Додаткові фішки для підкреслення посилань

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

Як прибрати підкреслення посилання

a: hover (text-decoration: underline;)

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

Якщо будуть ще якісь питання по темі, задавайте їх у коментарях. Постараємося розглянути пізніше або підказати у відповідях. Головне в цій справі практика - спробуйте додати різні властивості для опції text-decoration безпосередньо в прикладах або створіть свій тестовий файл. Сподіваємося по темі підкреслення тексту і посилань в CSS / HTML все стало ясно.

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

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

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

Щоб створити лінію під текстом, слід додати до елементу стильова властивість 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 лінія жорстко прив'язана до тексту, тому визначити її положення і стиль не вдасться.