Оформление внешних ссылок с помощью CSS
Этот урок, наверное, многим из вас будет хорошо знаком, но вот используете ли вы его на практике? Задача состоит в том, чтобы выделить в тексте страницы внешние ссылки с помощью CSS кода, чтобы они отличались от внутренних ссылок сайта. Для этого мы будем использовать регулярное выражение, с помощью которого напишем шаблон для ссылок. В CSS это выглядит так:
a[href^="http:"] {...}
Этот код означает, что все ссылки начинающиеся с http: будут иметь стили присвоенные в данном правиле.
Теперь, чтобы отличить внешние ссылки от внутренних, пропишем правило, используя регулярное выражение включающее домен. Например:
a[href^="http://www.getincss.ru"], a[href^="http://getincss.ru"], a[href^="/"] {...}
Советую почитать:
Маленькие хитрости Google – найдем наших конкурентов в AdSense.
Пробуем арбитраж с CPA на CPA.
Простая техника для настройки MFA сайтов и для улучшения QS на лендинг страницах.
Здесь мы отметили 3 возможных варианта того, как может быть указана ссылка на внутренние страницы сайта. Соответсвенно, для всех остальных ссылок, т.е. для внешних, будет учитываться первое правило: a[href^="http:"].
Оформление внешней ссылки – уже ваша фантазия, но чаще всего можно увидеть такой стиль:
CSS код для этого примера:
a[href^="http:"]
{
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
Картинку можно скачать по указанной ссылке. Ну и, конечно, оговорочка – для IE6 данный метод работать не будет, но если вы его будете использовать, хуже никому не станет :)
Dmoz
А это CSS 2 или CSS3? Кто это поддерживает?
Роман НастенкоЦитировать
это , что касается поддержки: среди наиболее распространенных браузеров (FF, Opera, IE, Safari) – поддерживают все кроме IE6.
АвторЦитировать
Вообще прикольно. Спасибо, не знал :)
Я вообще до какого-то момента на CSS 3 не смотрел, ввиду популярность ИЕ 6, но сейчас уже видимо пора :)
Роман НастенкоЦитировать
Мне кажется, пока не будет стабильной поддержки цсс3, о таких способах можно говорить только в мелких проектах в которых не так важна идеальное соответствие в разных браузерах. Спасибо за обзор.
ZodiosЦитировать
кстати, действтительно че-то я стормозил, терь буду тоже различать на сайте внешние ссылки от внутренних :)))
PipokЦитировать
Вообще статейка занимательная. Насчет поддержки/неподдержки: может тогда еще и на 640х480 разрешение экрана будем равняться? и чтоб хорошо гляделось в монохромном телевизоре? ИМХО нужно глядеть вперед, а не держаться за старое. IE6 отживает свое – не нужно продлять ему жизнь, подстраиваясь под него.
vatЦитировать
А я что то непонял, где пример рабочий? покажите пожалуйста! А то везде кусками написано!
vvktrЦитировать
test external link, gde blin?
vvktrЦитировать
здесь это не будет работать, в моем файле стилей это не предусмотрено.
Для того чтобы код заработал, нужно прописать стиль для ссылок, указанный мною в статье:
a[href^="http:"] { background: url(externalLink.gif) no-repeat right top; padding-right: 10px;}Проверьте, просто создав страницу с таким кодом (только картинку не забудьте скачать http://www.getincss.ru/wp-content/uploads/2008/10/externallink.gif)
АвторЦитировать
Данный селектор еще в css2 был
Yuriy DrozdovЦитировать
А вы смотрели статистику по браузерам на liveinternet ?Думаю еще долго будет ie6 активно использоваться
Dr.OЦитировать
Без дополнительных блоков в данном случае не обойтись, посмотрите пример для меню в этой статье ролловер меню
Здесь фон ссылки меняется в зависимости от ширины текста. Вам просто нужно взять код, касающийся того как сделать ссылки с “резиновым” фоном, например так:
<ul> <li><a href="#" rel="nofollow"><b>Ссылка 1</b></a></li> <li><a href="#" rel="nofollow"><b>Ссылка 2</b></a></li> </ul> ul li a {display:block; height:15px; padding:0 15px 0 15px; background:url(menu_item.gif) no-repeat left top; position:relative; } ul li a b { position:absolute; right:0; top:0; display: -moz-inline-stack; /* для FF<3*/ display:inline-block; background:url(menu_item.gif) no-repeat right top; width:15px; height:15px; }АвторЦитировать
Здравствуйте! не могли бы вы помочь мне: нужно чтобы при наведении у ссылки появлялся фон в виде картинки. Не в виде background-color, а именно в виде background: url(‘imgs/a-active.png’) no-repeat 0 0. Это свойство использую в навигации в хедере. Но вся сложность в том, что ширина этой картинки должна меняться. Н-р, для ссылки ФОТО и ссылки КАТАЛОГ ПРОДУКЦИИ, картинка то сужается, то расширяется. Как это организовать?
заранее благодарю :-) и с нетерпением жду ответа!
Tane4kaЦитировать
хмм.. я не знал, что можно так делать. Спасибо за статью.
redЦитировать
Интересно, что писать, если ссылка вообще ни с чего не начинается – то бишь, она относительная, а файл лежит в той же папке (напр. abcd,html)?
Я как раз на этом месте застопорилась… А для меня критично ссылки внешние от внутренних отделить…
vovse_neЦитировать
Спасибо за статью, попробую на своем сайте.
2webЦитировать