Студопедия — Как применить псевдокласс к ссылкам?
Студопедия Главная Случайная страница Обратная связь

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

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






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

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

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

 

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. Следующий урок будет очень нужным и интересным, там мы рассмотрим очень важный момент, который я советую Вам хорошенько выучить, без него дела не будет:)

 







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



Расчетные и графические задания Равновесный объем - это объем, определяемый равенством спроса и предложения...

Кардиналистский и ординалистский подходы Кардиналистский (количественный подход) к анализу полезности основан на представлении о возможности измерения различных благ в условных единицах полезности...

Обзор компонентов Multisim Компоненты – это основа любой схемы, это все элементы, из которых она состоит. Multisim оперирует с двумя категориями...

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

ФАКТОРЫ, ВЛИЯЮЩИЕ НА ИЗНОС ДЕТАЛЕЙ, И МЕТОДЫ СНИЖЕНИИ СКОРОСТИ ИЗНАШИВАНИЯ Кроме названных причин разрушений и износов, знание которых можно использовать в системе технического обслуживания и ремонта машин для повышения их долговечности, немаловажное значение имеют знания о причинах разрушения деталей в результате старения...

Различие эмпиризма и рационализма Родоначальником эмпиризма стал английский философ Ф. Бэкон. Основной тезис эмпиризма гласит: в разуме нет ничего такого...

Индекс гингивита (PMA) (Schour, Massler, 1948) Для оценки тяжести гингивита (а в последующем и ре­гистрации динамики процесса) используют папиллярно-маргинально-альвеолярный индекс (РМА)...

Образование соседних чисел Фрагмент: Программная задача: показать образование числа 4 и числа 3 друг из друга...

Шрифт зодчего Шрифт зодчего состоит из прописных (заглавных), строчных букв и цифр...

Краткая психологическая характеристика возрастных периодов.Первый критический период развития ребенка — период новорожденности Психоаналитики говорят, что это первая травма, которую переживает ребенок, и она настолько сильна, что вся последую­щая жизнь проходит под знаком этой травмы...

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