2020-09-24
93
Можно организовывать внутренние ссылки, которые будут переходить к определенным блокам внутри документа. Для этого необходимо указать знак (#), после которого одет id того элемента, к которому надо осуществить переход.
<!DOCTYPE HTML>
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<div id="go_top"><a href="#go_bottom">Вниз</a></div>
<div>
<p>Много - много текста...</p>
...
<p>Много - много текста...</p>
</div>
<div id="go_bottom"><a href="#go_top">Вверх</a></div>
</body>
</html>
Стилизация ссылок
По умолчанию ссылка уже имеет некоторый цвет (один из оттенков синего), кроме того, она имеет подчеркивание. Стилизация ссылок задается браузерами по умолчанию, но ее можно переопределить.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки</title>
<style>
a:link {color:blue; text-decoration:none}
a:visited {color:pink; text-decoration:none}
a:hover {color:red; text-decoration:underline}
a:active {color:yellow; text-decoration:underline}
|
|
|
</style>
</head>
<body>
<a href="index.html">Учебник по HTML5</a>
</body>
</html>
В примере определены стили ссылок в различных состояниях:
a:link – применяется для ссылок в обычном состоянии, когда он не нажаты и на них не наведен курсор;
a:visited – указывает на состояние ссылки, по которой был осуществлен переход;
a:hover – состояние ссылки, на которую навели указатель мыши;
a:active – указывает на ссылку в нажатом состоянии.
Стиль color – устанавливает цвет ссылки, а стиль text – decoration устанавливает подчеркивание (underline – подчеркнута, none – подчеркивание отсутствует).
Ссылки – изображения
Поместив внутрь элемента <a> элемент <img>, можно сделать ссылку – изображение.
Тема 1.4 Вставка объектов на веб – страницу
