Ссылки могут быть стилизованы по-разному.
Стилизованные ссылки
Ссылки могут быть стилизованы с любыми свойствами CSS (например color, font-family, background, и так далее).
Специально для ссылок: они могут быть стилизованы поразному в зависимости от их состояния.
Четыре состояния ссылок:
- a:link - нормальная, непосещенная ссылка
- a:visited - ссылка посещенная пользователем
- a:hover - ссылка при наведении указателя мыши над ней
- a:active - ссылка в момент нажатия
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link { color:#FF0000; } /* unvisited link */
a:visited { color:#00FF00; } /* visited link */
a:hover { color:#FF00FF; } /* mouse over link */
a:active { color:#0000FF; } /* selected link */
</style>
</head>
<body>
<p><b><a href="/ru/" target="_blank">Это линк</a></b></p>
<p><b>Примечание:</b> a:hover ДОЛЖЕН указываться после a:link и a:visited в определении CSS для того, чтобы иметь эффект.</p>
<p><b>Примечание:</b> a:active ДОЛЖЕН указываться после a:hover в определении CSS для того, чтобы иметь эффект.</p>
</body>
</html>
При установке стиля для нескольких состояний ссылок, существует определенный порядок:
a:hoverДОЛЖЕН указываться послеa:linkиa:visiteda:activeДОЛЖЕН указываться послеa:hover
Общие стили ссылок
В приведенном выше примере цвет ссылки меняется в зависимости от ее состояния.
Рассмотрим некоторые другие распространенные способы стилизации ссылок:
Оформление текста
Свойство text-decoration в основном используется для удаления подчеркивания из ссылки:
Пример 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link { text-decoration:none; } /* unvisited link */
a:visited { text-decoration:none; } /* visited link */
a:hover { text-decoration:underline; } /* mouse over link */
a:active { text-decoration:underline; } /* selected link */
</style>
</head>
<body>
<p><b><a href="/ru/" target="_blank">Это линк</a></b></p>
<p><b>Примечание:</b> a:hover ДОЛЖЕН указываться после a:link и a:visited в определении CSS для того, чтобы иметь эффект.</p>
<p><b>Примечание:</b> a:active ДОЛЖЕН указываться после a:hover в определении CSS для того, чтобы иметь эффект.</p>
</body>
</html>
Цвет фона
Свойство background-color задает цвет фона для ссылок:
Пример 3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link { background-color:#B2FF99; } /* unvisited link */
a:visited { background-color:#FFFF85; } /* visited link */
a:hover { background-color:#FF704D; } /* mouse over link */
a:active { background-color:#FF704D; } /* selected link */
</style>
</head>
<body>
<p><b><a href="/ru/" target="_blank">Это линк</a></b></p>
<p><b>Примечание:</b> a:hover ДОЛЖЕН указываться после a:link и a:visited в определении CSS для того, чтобы иметь эффект.</p>
<p><b>Примечание:</b> a:active ДОЛЖЕН указываться после a:hover в определении CSS для того, чтобы иметь эффект.</p>
</body>
</html>
Еще примеры
Пример 4
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link { color:#ff0000; }
a.two:visited { color:#0000ff; }
a.two:hover { font-size:150%; }
a.three:link { color:#ff0000; }
a.three:visited { color:#0000ff; }
a.three:hover { background:#66ff66; }
a.four:link { color:#ff0000; }
a.four:visited { color:#0000ff; }
a.four:hover { font-family:monospace; }
a.five:link { color:#ff0000; text-decoration:none; }
a.five:visited { color:#0000ff; text-decoration:none; }
a.five:hover { text-decoration:underline; }
</style>
</head>
<body>
<p>Наведите курсор мыши на ссылку, чтобы увидеть как изменяется структура.</p>
<p><b><a class="one" href="/ru/" target="_blank">Этот линк меняет цвет</a></b></p>
<p><b><a class="two" href="/ru/" target="_blank">Этот линк меняет размер шрифта</a></b></p>
<p><b><a class="three" href="/ru/" target="_blank">Этот динк меняет цвет фона</a></b></p>
<p><b><a class="four" href="/ru/" target="_blank">Этот линк меняет семейство шрифта</a></b></p>
<p><b><a class="five" href="/ru/" target="_blank">Этот линк меняет украшение</a></b></p>
</body>
</html>
Пример 5
Этот пример демонстрирует более сложный пример, где мы объединили несколько свойств CSS для отображения ссылок.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link,a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active { background-color:#7A991A; }
</style>
</head>
<body>
<a href="/ru/" target="_blank">Это ссылка</a>
</body>
</html>
Была ли эта информация полезной?
