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