На многих сайтах ссылки не имеют подчеркивания, хотя по умолчанию браузер придает им подобный стиль. Для реализации данной возможности необходимо отдельно для ссылок отменить подчеркивание через CSS, чем мы и займемся в этом уроке. Но прежде чем приступать к решению, давайте сначала познакомимся со стилем, который позволяет подчеркивать, надчеркивать и даже перечеркивать текст.

Видеоверсия:
CSS text-transform

Свойство text-decoration

При помощи свойства text-decoration мы можем сделать обводку текста любых элементов веб-страницы. У нее есть 4 значения, с помощью которых мы можем не только более гибко управлять внешним видом текста, но и отменить подчеркивание у ссылок.

Значение underline

Используя этот параметр, мы подчеркиваем текст. Название говорит само за себя, так как under переводится как "под", а line - "линия". Например, давайте применим ее для всей веб-страницы.

body { text-decoration: underline; }

Теперь весь текстовый контент довольно сильно акцентирован.

Overline

Как вы наверное догадываетесь, при помощи overline мы выделяем текст сверху. Предлагаю сделать это для заголовков двух уровней.

h1, h2 { text-decoration: overline; }

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

Line-through

Это значение нужно для перечеркивания текста. Попробуем применить ее для первого абзаца.

h1+p { text-decoration: line-through; }

А теперь, на иллюстрации ниже вы можете увидеть результат применения всех трех значений свойства text-decoration.

свойство text-decoration в действии
Результат форматирования налицо

Убираем подчеркивание у ссылок

Для этого мы воспользуемся четвертым значением - none. Чтобы решить поставленную задачу нам необходимо прописать следующее CSS правило:

a { text-decoration: none; }

Все довольно просто - при помощи записи выше мы отменили декорирование ссылок. Теперь они ничем не отличаются от обычного текста, кроме цвета и вида курсора при наведении. Еще стоит отметить, что для одного и того же элемента мы можем использовать несколько вариантов декорирования. Самый простой пример:

h1, h2 { text-decoration: underline overline; }

Таким образом, мы провели линии сверху и снизу заголовков просто перечислив параметры в блоке объявлений через пробел. Смею предположить что вам все понятно, если нет - задавайте свои вопросы в комментариях. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  • Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  • Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

два × четыре =

Закрыть