Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Введение в Веб программирование.doc
Скачиваний:
81
Добавлен:
07.11.2018
Размер:
4.42 Mб
Скачать

Псевдоклассы

Для управления цветом ссылок с помощью стилей предлагается использовать псевдоклассы. Псевдоклассы применяются в CSS, чтобы определять стиль элемента при изменении его состояния. Общий синтаксис для ссылок будет такой:

А: псевдокласс { параметр: значение }

Свойство

Описание

:active

Применяется к активным гиперссылкам, т.е. гиперссылкам, на которых находится фокус ввода пользователя (аналогичен атрибуту alink тега <BODY>):

{Задание стиля гиперссылки}:active {Определение стиля};

Пример: a:active {color: lime;}

:first-child

Применяет стилевое оформление к первому дочернему элементу своего родителя.

элемент:first-child { ... }

:focus

Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.

элемент:focus { ... }

:hover

Применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши:

{Задание стиля гиперссылки}:hover {Определение стиля};

Пример:a:hover {color: lime; text-decoration: none;}

Гиперссылка, при наведении на нее мыши, будет ярко-зеленой и неподчеркнутой.

:lang

Определяет язык, который используется в документе или его фрагменте.

элемент:lang(<язык>) { ... }

В качестве языка могут выступать следующие значения: ru – русский; en – английский ; de – немецкий; fr – французский; it – итальянский и др.

:link

Применяется к не посещенным еще пользователем гиперссылкам (аналогичен атрибуту link тега <BODY>):

{Задание стиля гиперссылки}:link {Определение стиля};

Пример:a:link {color: black;}

:visited

Применяется к уже посещенным пользователем гиперссылкам (аналогичен атрибуту vlink тега <BODY>)

{Задание стиля гиперссылки}:visited {Определение стиля};

Пример:a:link {color: indigo;}

Различают следующие псевдоклассы, имеющие отношение к ссылкам:

active – применяется к активным гиперссылкам, т.е. гиперссылкам, на которых находится фокус ввода пользователя (аналогичен атрибуту alink тега <body>):

{Задание стиля гиперссылки}:active {Определение стиля};

hover - применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши:

{Задание стиля гиперссылки}:hover {Определение стиля};

link - применяется к не посещенным еще пользователем гиперссылкам (аналогичен атрибуту link тега <body>):

{Задание стиля гиперссылки}:link {Определение стиля};

visited - применяется к уже посещенным пользователем гиперссылкам (аналогичен атрибуту vlink тега <body>)

{Задание стиля гиперссылки}:visited {Определение стиля};

Пример:

<html>

<head>

<title> Псевдоклассы для ссылок</title>

<style type="text/css">

a:link {color : lime}

a:visited {color: indigo }

a:hover {color: red }

a:active {color : #fe0 }

</style>

</head>

<body>

<a href=linkl.html>Ссылка 1</a>

<a href=link2.html>Ссылка 2</a>

<a href=link3.html> Ссылка 3</a>

</body>

</html>