Справочник по CSS (ЦСС) и ШТМЛ
Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?
Универсальный способ, работающий во всех браузерах, состоит в создании нового класса и его добавлении к определенным ссылкам. Например, вводим класс blank и с помощью параметра class применяем его к желаемым тегам <A>.
Пример
<!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=utf-8">
<title>Использование классов</title>
<style type="text/CSS (ЦСС)">
A.blank {
font-weight: bold; /* Жирное начертание */
}
</style>
</head>
<body>
<p><a href="link1.ШТМЛ">Обычная ссылка</a></p>
<p><a href="http://www-html.ru" class="blank">Ссылка на сайт www-html.ru</a></p>
</body>
</html>
Результат примера показан ни рис. 1.
Рис. 1. Вид ссылок, заданных с помощью стилей
В данном примере нижняя ссылка выделена с помощью жирного начертания, которое задается через стили для класса blank.
Более продвинутый способ состоит в использовании селектора атрибутов. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то дастаткова задать стиль для тех ссылок, у которых значение параметра href начинается на http:// Это делается с помощью конструкции A[href^="http://"] {...}, как показано в примере.
Пример
<!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=utf-8">
<title>Селекторы атрибутов</title>
<style type="text/CSS (ЦСС)">
A[href^="http://"] {
font-weight: bold; /* Жирное начертание */
color: maroon; /* Цвет ссылок */
}
</style>
</head>
<body>
<p><a href="link1.ШТМЛ">Обычная ссылка</a></p>
<p><a href="http://www-html.ru">Ссылка на сайт www-html.ru</a></p>
</body>
</html>
Замечание
Приведенный способ с использованием селекторов атрибутов не действует в браузерах Internet Эксплорер 6, Опера 8.5 и ниже. Работает в Файер фох.