Разное оформление внутренних и внешних ссылок с помощью CSS
Приветствую всех! Иногда может понадобиться, чтобы на сайте ссылки ведущие на другие порталы отличались от ссылок ведущих на внутренние страницы сайта. Либо рядом с ссылками на документы отображались иконки типа документа. Такое различное оформление внешних и внутренних ссылок можно встретить на многих крупных интернет-порталах. Например, на известном всем сайте Википедии, рядом с внешними ссылками располагаются особые значки.
Такое различное оформление легко реализовать с помощь правил 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>
Таким образом можно добавить иконки для любого типа документа. На этом все. До новых встреч!
Похожие записи
Оставить комментарий
Жаль что ссылка на пример уже не работает. Мне хотелось бы знать, как можно сделать на сайте так, чтобы я из корневой папки указывал ссылки на рисунок и как будет выглядеть код в CSS ? Навожу мышь — меняет цвет, а при нажатии (переходе по ней), снова меняет цвет или положение, не важно. Что бы состояла картинка из трех рисунков. Фуууххх, вроде получилось спросить, хотя и неуклюже))
Да! И что бы открывалась страница в новой вкладке и в новом окне. Можно два варианта? Оба кода
Ссылка на пример вроде работает. По первому вопросу не совсем понятно, что требуется. Чтобы ссылка при наведении меняла цвет используйте псевдоклассы и css-код будет примерно такой: a:hover{color:нужный цвет}
Тоже самое касается посещенных и активных ссылок.
Что же касается второго вопроса, то для открытия ссылок в новой вкладке и в новом окне достаточно в html-коде ссылкам добавить атрибут target="_blank".
Каким образом через CSS можно задать разное стилистическое оформление внешних и внутренних ссылок на сайте?
читайте выше