Псевдоклассы и ссылки.
Рассмотрим сразу три псевдокласса созданных для работы со ссылками.
- active - Стиль активной ссылки.
- visited - Стиль для недавно посещённой ссылки.
- link - Стиль для нечасто посещаемой ссылки.
Сначала покажу пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдоклассы и ссылки</title>
<style type="text/css">
a:link {color:#0000ff}
a:active {color:#ff0000}
a:visited {color:#008000}
</style>
</head>
<body>
<a href="#1">Ссылка на первый якорь</a>
<a href="#2">Ссылка на второй якорь</a>
<a href="#3">Ссылка на третий якорь</a>
<hr>
<a name="1"><h4>Первый якорь</h4></a>
<p>Псевдокласс link, в этом примере, указывает, что все не посещенные ссылки должны отображаться синим цветом.</p>
<a name="2"><h4>Второй якорь</h4></a>
<p>Попробуйте нажить и удерживать на одну из не посещенных ссылок, чтобы увидеть для работу псевдокласса active.</p>
<a name="3"><h4>Третий якорь</h4></a>
<p>visited - псевдокласс который, в этом примере, говорит о том, что все посещенные ссылки должны отображаться зеленым цветом.</p>
</body>
</html>
Смотреть пример
Теперь расскажу более подробно.
Псевдокласс active присваивает ссылке определённый стиль в тот момент когда эта ссылка активна, то есть в тот момент когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Короче active - это стиль ссылки в момент клика по ней.
Браузеры некоторое время помнят, на какие ссылки нажимал пользователь в последнее время, так вот, псевдокласс visitedуказывает стиль ссылки которая недавно посещалась пользователем.
Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a {...} и a:link {...} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.
Все три вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу - работать будет везде, кроме браузера Internet Explorer 6 и ниже.
Псевдокласс focus.
Данный псевдокласс определяет стиль элемента, если тот находится в фокусе. Теперь собственно о том, что такое фокус?.. как в случае с оптикой и иллюзией, слово фокус в CSS обозначат, что некий объект, а точнее элемент, находится в центре внимания наблюдателя - пользователя. Такими элементами могут быть теги <a> <input> <select> и <textarea>.
Посмотрите на пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдокласс focus</title>
<style type="text/css">
input:focus {color: red}
</style>
</head>
<body>
<form>
<input type="text" value="Введите текст в эту форму" size="30">
</form>
<p>Ввели? а теперь щелкните по пустому месту на экране чтобы форма потеряла фокус.</p>
</body>
</html>
Смотреть пример
В примере текст в текстовом поле <input> изначально чёрный, но как только элемент получает фокус - то есть тогда когда пользователь кликнет по данному полю и начнет набирать текст, он окрасится красным.
Вот и весь фокус-покус..
Дата добавления: 2016-02-16; просмотров: 549;