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

⇐ Предыдущая 1 2 3 456 7 8 9 10 Следующая ⇒

Записываем для начала элемент А, к которому мы будем применять псевдокласс, затем ставим двоеточие и указываем имя псевдокласса, а уже потом в фигурных скобках указываем нужный стиль.

А: ИМЯ ПСЕВДОКЛАССА {...стиль...}

Ну вот для ссылок например бывает четыре псевдокласса:

A: link {... стиль оформления обычной ссылки... }
A: active {... стиль оформления ссылки в момент нажатия... }
A: visited {... стиль оформления посещенной ссылки... }
А: hover {... стиль оформления ссылки, на которую наведен указатель мыши... }

Ну, теперь давайте я приведу вам некоторые примеры для лучшего понимания. Для начала, посмотрите, как выглядят ссылки по умолчанию:

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

a: link {
color: blue;
}
a: visited {
color: gray;
}
a: hover {
color: red;
text-decoration: none;
}
a: active {
color: green;
text-decoration: none;
}

· Смотреть пример ssilki_primer1.htm

В примере выше ссылка ведет сама на себя, и поэтому чтобы увидеть класс уже посещенной ссылки, нужно обновить страницу.

Вообще вариантов оформления ссылки может быть множество, и каждый делает под конкретный дизайн что-то свое. Вот еще примерчик:

a: link {
color: blue;
}
a: visited {
color: gray;
}
a: hover {
color: red
text-decoration: none;
font-weight: bold;
}
a: active {
color: green;
text-decoration: none;
text-transform: uppercase;
}

· Смотреть пример ssilki_primer2.htm

Бывают случаи, когда мы не хотим вообще чтобы ссылка визуально выделялась на фоне текста. Решение опять же в CSS:

a: link {
color: black;
text-decoration: none;
}
a: visited{
color: black;
text-decoration: none;
}
a: hover {
color: black;
text-decoration: none;
}
a: active {
color: black;
text-decoration: none;
}

· Смотреть пример ssilki_primer3.htm

Если для всех псевдоклассов стиль одинаковый, как в примере выше, то это можно записать и короче:

a: link, a: visited, a: hover, a: active {

color: black; text-decoration: none;

}

А можно и вовсе без использования псевдоклассов:

a {

color: black; text-decoration: none;

}

Ну вот и все по ссылкам в CSS. Следующий урок будет очень нужным и интересным, там мы рассмотрим очень важный момент, который я советую Вам хорошенько выучить, без него дела не будет:)

⇐ Предыдущая 1 2 3 456 7 8 9 10 Следующая ⇒

Дата добавления: 2014-12-06; просмотров: 623. Нарушение авторских прав; Мы поможем в написании вашей работы!

Композиция из абстрактных геометрических фигур Данная композиция состоит из линий, штриховки, абстрактных геометрических форм...

Важнейшие способы обработки и анализа рядов динамики Не во всех случаях эмпирические данные рядов динамики позволяют определить тенденцию изменения явления во времени...

ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при которых тело находится под действием заданной системы сил...

Теория усилителей. Схема Основная масса современных аналоговых и аналого-цифровых электронных устройств выполняется на специализированных микросхемах...

Ваготомия. Дренирующие операции Ваготомия – денервация зон желудка, секретирующих соляную кислоту, путем пересечения блуждающих нервов или их ветвей...

Билиодигестивные анастомозы Показания для наложения билиодигестивных анастомозов: 1. нарушения проходимости терминального отдела холедоха при доброкачественной патологии (стенозы и стриктуры холедоха) 2. опухоли большого дуоденального сосочка...

Сосудистый шов (ручной Карреля, механический шов). Операции при ранениях крупных сосудов 1912 г., Каррель – впервые предложил методику сосудистого шва. Сосудистый шов применяется для восстановления магистрального кровотока при лечении...

Алгоритм выполнения манипуляции Приемы наружного акушерского исследования. Приемы Леопольда – Левицкого. Цель...

ИГРЫ НА ТАКТИЛЬНОЕ ВЗАИМОДЕЙСТВИЕ Методические рекомендации по проведению игр на тактильное взаимодействие...

Реформы П.А.Столыпина Сегодня уже никто не сомневается в том, что экономическая политика П...

Studopedia.info - Студопедия - 2014-2025 год . (0.013 сек.) русская версия | украинская версия