Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Пример 1. Изменение вида ссылки

Читайте также:
  1. CИТУАЦИОННЫЕ ЗАДАЧИ С ПРИМЕРАМИ РЕШЕНИЯ
  2. CИТУАЦИОННЫЕ ЗАДАЧИ С ПРИМЕРАМИ РЕШЕНИЯ
  3. CИТУАЦИОННЫЕ ЗАДАЧИ С ПРИМЕРАМИ РЕШЕНИЯ
  4. CИТУАЦИОННЫЕ ЗАДАЧИ С ПРИМЕРАМИ РЕШЕНИЯ
  5. Genesis eldercare», или изменение нашего взгляда на стариков
  6. Gt;§ 2. Действия, производимые изменением количества денег (M). Количественная теория в причинном смысле
  7. I. Изменение клубочковой фильтрации

Виды ссылок

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием.

Активная ссылка. Ссылка помечается как активная в момент ее открытия. Поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно. Активной ссылка становится также, при ее выделении с помощью клавиатуры. Цвет такой ссылки по умолчанию красный.

Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.

Как изменить вид ссылки при наведении на нее курсора мыши?

 

Псевдокласс hover, который добавляется к селектору A, как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A, потом через двоеточие hover (пример 1).

Пример 1. Изменение вида ссылки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> Цвет ссылок </title>

<style type="text/css" >

A {

color: #008000; /* Цвет обычной ссылки */

text-decoration: none; /* Убираем подчеркивание у ссылок */

}

A:visited {

color: #800080; /* Цвет посещенной ссылки */

}

A:hover {

color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */

text-decoration: underline; /* Добавляем подчеркивание */

}

</style>

</head>

<body>

<p><a href="rome.html" > Cras ingens iterabimus aequor </a> -

завтра снова мы выйдем в огромное море. </p>

</body>

</html>

В данном примере ссылка становится подчеркнутой и меняет свой цвет, когда на нее наводится указатель (рис. 1). Заметьте, что псевдокласс hover в таблице стилей идет после visited. Это имеет значение, иначе посещенные ссылки в данном случае не будут изменять свой цвет.

Рис. 1. Вид ссылки при наведении на нее курсора мыши

Аналогично можно изменить и цвет фона под ссылкой при ее наведении, добавив свойство background к селектору A:hover, как показано в примере 2.


Дата добавления: 2015-07-10; просмотров: 143 | Нарушение авторских прав


<== предыдущая страница | следующая страница ==>
ГИДРОГРАФИЯ| Введение

mybiblioteka.su - 2015-2024 год. (0.006 сек.)