Разное оформление внутренних и внешних ссылок с помощью 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: иконка word, таблицы Excel иконка excel, Документы pdf иконка adobe reader, zip-архив иконка 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>

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

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

(2 оценок, среднее: 5,00 из 5)
Loading...

Получай статьи почтой:


Комментарии
  1. МО

    Жаль что ссылка на пример уже не работает. Мне хотелось бы знать, как можно сделать на сайте так, чтобы я из корневой папки указывал ссылки на рисунок и как будет выглядеть код в CSS ? Навожу мышь — меняет цвет, а при нажатии (переходе по ней), снова меняет цвет или положение, не важно. Что бы состояла картинка из трех рисунков. Фуууххх, вроде получилось спросить, хотя и неуклюже))

    9 марта 2016 01:56
  2. МО

    Да! И что бы открывалась страница в новой вкладке и в новом окне. Можно два варианта? Оба кода

    9 марта 2016 01:59
  3. alex

    Ссылка на пример вроде работает. По первому вопросу не совсем понятно, что требуется. Чтобы ссылка при наведении меняла цвет используйте псевдоклассы и css-код будет примерно такой: a:hover{color:нужный цвет}

    Тоже самое касается посещенных и активных ссылок.

    Что же касается второго вопроса, то для открытия ссылок в новой вкладке и в новом окне достаточно в html-коде ссылкам добавить атрибут target="_blank".

    10 марта 2016 01:12
  4. 4APK.RU

    Каким образом через CSS можно задать разное стилистическое оформление внешних и внутренних ссылок на сайте?

    24 августа 2017 00:41
  5. alex

    читайте выше

    21 сентября 2017 00:33

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




Subscribe without commenting