Декоративное подчеркивание CSS-элементов

Технология таблиц стилей выполняет две функции при оформлении 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), возможна трансформация способа её начертания:

Итак, атрибут border-bottom более функционален. Помимо вывода на экран декоративной линии под текстом, он даёт возможность настроить её внешний вид.

Комментарии