| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Встановити стиль посилань, які посилаються на інші сайти.
Рішення
Універсальний спосіб, працює у всіх браузерах, полягає у створенні нового класу і його додавання до певних посиланнях. Наприклад, вводимо клас blank і з допомогою атрибута class застосовуємо його до бажаних тегами <a> (приклад 1).
Приклад 1. Використання класів
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Використання класів</title>
<style>
a.blank {
font-weight: bold; /* Жирне накреслення */
}
</style>
</head>
<body>
<p><a href="1.html">Звичайна посилання</a></p>
<p><a href="https://html-css.co.ua" class="blank">Посилання на сайт https://html-css.co.ua</a></p>
</body>
</html>
Результат приклад показаний на рис. 1.
Рис. 1. Вигляд посилань, заданих за допомогою стилів
В даному прикладі нижня посилання виділена з допомогою жирного накреслення, яке задається через стилі для класу blank.
Більш просунутий спосіб полягає у використанні селектора атрибутів. Оскільки всі посилання на інші сайти пишуться з зазначенням протоколу, наприклад http, то достатньо задати стиль для тих посилань, у яких значення атрибута href починається на http://. Це робиться з допомогою конструкції A[href^="http://"] {...}, як показано в прикладі 2.
Приклад 2. Селектори атрибутів
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селектори атрибутів</title>
<style>
a[href^="https://"] {
font-weight: bold; /* Жирне накреслення */
color: maroon; /* Колір посилань */
}
</style>
</head>
<body>
<p><a href="1.html">Звичайна посилання</a></p>
<p><a href="https://html-css.co.ua">Посилання на сайт https://html-css.co.ua</a></p>
</body>
</html>