Технологія таблиць стилів виконує дві функціїпри оформленні HTML-сторінок. По-перше, з її допомогою відбувається формування положення окремих елементів сайту. По-друге, вона робить блоки візуально привабливими для користувача. Реалізація другої функції відбувається різними способами. Один з них - підкреслення. CSS передбачає для цього атрибут text-decoration.
Специфікація записи атрибута
скористатися властивістю text-decoration просто. Досить прописати в коді файлу стилів наступний рядок для елемента:
text-decoration: значеніе_атрібута;
замість «значеніе_атрібута»Специфікація CSS пропонує ряд варіантів:
- underline - лінія розташовується строго під текстом;
- overline - лінія проходить зверху тексту;
- none - зняття всіх декоративних ефектів;
- inherit - переймає значення елемента-батька.
Вище наведені не всі можливі форми запису, оскільки даний атрибут задає не тільки підкреслення CSS, але і інші ефекти, наприклад «моргання» тексту або його перекреслення.
Приклади оформлення гіперпосилань
У новачків у веб-дизайні і програмуваннівиникає питання: навіщо робити нижню лінію у тексту? На зорі епохи інтернет-технологій такий спосіб виділення вказував користувачеві на те, що перед ним знаходиться гіперпосилання - текст, при натисканні на який буде здійснений перехід на нову сторінку.
За замовчуванням у гіперпосилань встановлено властивість underline. На практиці виникає завдання прибрати лінію у неактивних елементів і зробити її видимою при наведенні користувачем покажчика миші. Ось приклад коду, який відключає підкреслення посилань CSS:
a {text-decoration: none;}
Для активних посилань використовується наступний запис:
a: hover {text-decoration: underline;}
Декоративне підкреслення для просунутих
Стандартний атрибут text-decoration має кілька обмежень:
- колір лінії не відрізняється від кольору тексту посилання, можна розмежувати їх «розфарбовування»;
- тільки суцільна лінія використовується як підкреслення. CSS не передбачає застосування інших стилів накреслення.
Але спеціальні прийоми допомагають обійти класичне оформлення тексту. У першому випадку для завдання гіперпосилання використовується додатковий тег <span>.
наприклад:
<a href="#" style="text-decoration: underline; color: red">
<Span style = "color: blue"> гіперпосилання</ Span>
</a>. </p>
В результаті на сторінці слово гіперпосилання буде записано синім кольором, а колір лінії буде червоним.
Інший просунутий спосіб, який дозволяє реалізувати підкреслення CSS, - border-bottom. Приклад нижче пояснює його використання:
a {border-bottom: 1px solid red;}
Результат буде таким же, як і в прикладі раніше. Але даний спосіб має важливу перевагу. Крім зміни кольору лінії (зараз встановлений червоний колір - red), Можлива трансформація способу її накреслення:
- dotted - робить точкове підкреслення;
- dashed - лінія складається з штрихів;
- double - малює подвійну лінію.
Отже, атрибут border-bottom більш функціональний. Крім виведення на екран декоративної лінії під текстом, він дає можливість налаштувати її зовнішній вигляд.
