Разное оформление внутренних и внешних ссылок с помощью CSS

Рубрика: Рецепты для сайта

14 июля 2015

Приветствую всех! Иногда может понадобиться, чтобы на сайте ссылки ведущие на другие порталы отличались от ссылок ведущих на внутренние страницы сайта. Либо рядом с ссылками на документы отображались иконки типа документа. Такое различное оформление внешних и внутренних ссылок можно встретить на многих крупных интернет-порталах. Например, на известном всем сайте Википедии, рядом с внешними ссылками располагаются особые значки.

Такое различное оформление легко реализовать с помощь правил CSS, в частности c помощью псевдоклассов и специальных селекторов.

Для примера, уберем подчеркивание у всех внутренних ссылок, а для внешних ссылок это самое подчеркивание добавим.

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

a{
text-decoration: none;
}

Далее с помощью селекторов атрибута укажем, что для всех ссылок, у которых в атрибуте href отсутствует название домена, добавить подчеркивание. Кроме того можно поменять цвет внешних ссылок. Для этого с помощью селектора атрибута [href^="http://"] отберем все ссылки, у которых значение атрибута href начинается с http:// (за это отвечает оператор ^=). А с помощью псевдокласса not исключим из этого списка все ссылки у которых в значениях атрибута href встречается название текущего сайта (оператор *=), в моем случае это webcodius.ru. В результате получится такой код:

a[href^="http://"]:not ([href*="webcodius.ru"]),
a[href^="https://"]:not ([href*="webcodius.ru"]),
a[href^="ftp://"]:not ([href*="webcodius.ru"]) {
text-decoration: underline;
color: green;
}

Чтобы код работал на вашем сайте вместо названия моего сайта webcodius.ru добавляете название своего.

Полный код примера:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Оформление внешних ссылок</title>
    <style>
      a{
        text-decoration: none; /* Отменяем все эффекты для ссылок */
      }
      a[href^="http://"]:not ([href*="webcodius.ru"]),
      a[href^="https://"]:not ([href*="webcodius.ru"]),
      a[href^="ftp://"]:not ([href*="webcodius.ru"]) {
        text-decoration: underline; /* добавляем подчеркивание для внешних ссылок */
        color: green; /* делаем внешние ссылки зеленого цвета */
      }
    </style>
  </head>
  <body>
    <p><a href="https://ru.wikipedia.org">Ссылка на внешний сайт</a></p>
    <p><a href="http://webcodius.ru/spravochnik-css/psevdoklassy-i-psevdoelemety-v-css-hover-before-first-child-i-drugie.html">Ссылка на страницу текущего сайта</a></p>
  </body>
</html>

Посмотреть пример

Как вставить иконки к ссылкам

Бывает нужно к ссылкам на различные типы документов добавить соответствующие им иконки. Например, чтоб рядом ссылкой на вордовский документ отображалась иконка word-а, а рядом с ссылкой на pdf-документ размещалась иконка Adobe Reader-а и так далее. Для этого подготавливаем иконки документов:

Документы Word: , таблицы Excel , Документы pdf , zip-архив

И далее с помощью все тех же селекторов атрибутов добавляем правила CSS. Например, для ссылок на вордовские документы правило CSS будет таким:

a[href$='.doc'], a[href$='.docx'] {
background: url (icons/doc.png) no-repeat 100%;
padding-right: 18px;
}

В селекторе [href$='.doc'] оператор $= означает, что правило будет выполняться для всех ссылок у которых значение атрибута href заканчивается на .doc (расширение документов Word). А само правило добавляет к ссылкам в виде фона иконку word-а. Для в свойстве backgroundуказываем путь к иконке url(icons/doc.png).

И так добавляем правила для всех нужных типов документов.

Полностью код примера:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Иконки рядом с ссылками на документы</title>
    <style>
      a[href$='.doc'], a[href$='.docx'] {
        background: url (icons/doc.png) no-repeat 100%; /* вставка иконки */
        padding-right: 18px; /* вставка иконки */
      }
      a[href$='.xls'], a[href$='.xlsx'] {
        background: url (icons/xls.png) no-repeat 100%;
        padding-right: 18px;
      }
      a[href$='.zip'] {
        background: url (icons/zip.png) no-repeat 100%;
        padding-right: 18px;
      }
      a[href$='.pdf'] {
        background: url (icons/pdf.png) no-repeat 100%;
        padding-right: 18px;
      }
    </style>
  </head>
  <body>
    <p><a href="document.doc">Ссылка на Word</a></p>
    <p><a href="document.xls">Ссылка на Excel</a></p>
    <p><a href="file.zip">Ссылка на zip-архив</a></p>
    <p><a href="document.pdf">Ссылка на pdf</a></p>
  </body>
</html>