Оформление внешних ссылок с помощью CSS

25.10.2008 23:22 Александров Вячеслав

Большинство из нас слышал о таком проекте, как Википедия. Обращали внимание, что внешние ссылки выделяются по-особому? Сегодня, в этой статейке, я бы хотел рассказать, как сделать то же самое, но у себя на сайте или блоге. Для этого мы воспользуемся средствами CSS. Итак, к делу!!!

CSS код:

a[class^="externallinks"]
{
 background: url(http://www.alexandrovblog.ru/images/external.gif) no-repeat right center;
 padding-right: 10px;
}

Разберем по пунктам a[class^="externallinks"].

а - селектор указывает на то, что это ссылка;
[ ] - в квадратных скобках задаются необходимые параметры;
[class^="externallinks"] - представляет собой элемент с параметром class , значение которого начинается с префикса "externallinks"; т. е., ко всем ссылкам, которые будут обозначены такими параметрами, будет применен шаблон оформления.

HTML код:

<a class="externallinks" href="http://#">Ваша ссылка</a>

Результат:

Ваша ссылка

Другие шаблоны, для оформления ссылок средствами CSS:

[class$="externallinks"] - представляет собой элемент с параметром class , значение которого заканчивается с префикса "externallinks";
[class*="externallinks"] - представляет собой элемент с параметром class , в значение которого, содержится по крайне мере хотя бы один префикс "externallinks";
a[href^="http:"] - этот код означает, что все ссылки, начинающиеся с http: будут иметь стили присвоенные вами в css;
a[href^="http://www.адрес_сайта"], a[href^="http://адрес_сайта"], a[href^="/"] - используя это выражение, ваши ссылки буду иметь стили, только тогда, когда ссылки будут в пределах указанного домена и начинаться с обратного слеша "/", во всех других случаях они будут иметь стандартный вид.

Если после прочтения у вас появились вопросы, прошу в комментарии ...

Постовой

МАСТЕР-WEB. Блог, рассказывающий о том, как облегчить нелегкий путь того, кто стал на тернистую тропу вебмастера, а также тех, кто выбросил подальше свой офисный галстук и белый воротничок - фрилансерам.

Set as favorite

Закладка

Email This

Trackback(0)

TrackBack URI for this entry

Комментарии (3)

Полезная категория

Спасибо. Хорошо сделано!
Категория "Как это делается" очень пригодится для начинающих веб-мастеров, да и для всех.
Желаю побольше материала!

Николай1 , Октябрь 27, 2008 | url

+6

прошу помощи

Здравствуйте! не могли бы вы подсказать мне или дать ссылку на решение следующей проблемы: нужно чтобы при наведении у ссылки появлялся фон в виде картинки. Не в виде background-color, а именно в виде background: url('imgs/a-active.png') no-repeat 0 0. Это свойство использую в навигации в хедере. Но вся сложность в том, что ширина этой картинки должна меняться. Н-р, для ссылки ФОТО и ссылки КАТАЛОГ ПРОДУКЦИИ, картинка то сужается, то расширяется. Как это организовать?
заранее благодарю :-) и с нетерпением жду ответа!

Tanya , Апрель 16, 2009