Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?

🕛 20.01.2009, 22:42

Универсальный способ, работающий во всех браузерах, состоит в создании нового класса и его добавлении к определенным ссылкам. Например, вводим класс blank и с помощью параметра class применяем его к желаемым тегам

<A>

(пример 1)
Пример 1. Использование классов

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Использование классов</title> <style type="text/css"> A.blank { font-weight: bold; /* Жирное начертание */ } </style> </head> <body> <p><a href="link1.html">Обычная ссылка</a></p> <p><a href="http://htmlbook.ru" class="blank">Ссылка на сайт htmlbook.ru</a></p> </body>
</html>

Результат примера показан ни рис. 1.

Рис. 1. Вид ссылок, заданных с помощью стилей

В данном примере нижняя ссылка выделена с помощью жирного начертания, которое задается через стили для класса blank.

Более продвинутый способ состоит в использовании селектора атрибутов. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение параметра href начинается на http://. Это делается с помощью конструкции A[href^="http://"] {...}, как показано в примере 2.

Пример 2. Селекторы атрибутов

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы атрибутов</title> <style type="text/css"> A[href^="http://"] { font-weight: bold; /* Жирное начертание */ color: maroon; /* Цвет ссылок */ } </style> </head> <body> <p><a href="link1.html">Обычная ссылка</a></p> <p><a href="http://htmlbook.ru">Ссылка на сайт htmlbook.ru</a></p> </body>
</html>