12785

Ссылки. Что такое псевдокласс

Практическая работа

Информатика, кибернетика и программирование

Ссылки Всё изученное в предыдущих уроках вы можете применять и для ссылок/links например изменять шрифт цвет подчёркивание и т. д. Новым будет то что в CSS эти свойства можно определять поразному в зависимости от того посетили уже ссылку активна ли она находится ли указ...

Русский

2013-05-03

15.12 KB

2 чел.

Ссылки

Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.

Что такое псевдокласс?

Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.

Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>.  В CSS мы также можем использовать a в качестве селектора:

a {

color: blue;

}

Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.

a:link {

color: blue;

}

a:visited {

color: red;

}

Используйте a:link и a:visited для посещённых и непосещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.

Теперь рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.

Псевдокласс: link

Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.

В примере кода непосещённые ссылки - синие.

a:link {

color: #6699CC;

}

  •  Показать пример 

Псевдокласс: visited

Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.

a:visited {

color: #660099;

}

  •  Показать пример 

Псевдокласс: active

Псевдокласс :active используется для активных ссылок.

В примере активные ссылки имеют жёлтый фон.

a:active {

background-color: #FFFF00;

}

  •  Показать пример 

Псевдокласс: hover

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

Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:

a:hover {

color: orange;

font-style: italic;

}

  •  Показать пример 

Пример 1: Эффект при нахождении указателя над ссылкой

Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.

Пример 1a: Расстояние между буквами

Как вы помните из 3 Лабораторной, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:

a:hover {

letter-spacing: 10px;

font-weight:bold;

color:red;

}

  •  Показать пример 

Пример 1b: UPPERCASE и lowercase

В прошлой лабораторной мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:

a:hover {

text-transform: uppercase;

font-weight:bold;

color:blue; 

background-color:yellow;

}

  •  Показать пример 

Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте!

Пример 2: Удаление подчёркивания ссылок

Обычный вопрос - как удалить подчёркивание ссылок?

Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта.

Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.

a {

text-decoration:none;

}

Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.

a:link {

color: blue;

text-decoration:none;

}

a:visited {

color: purple;

text-decoration:none;

}

a:active {

background-color: yellow;

text-decoration:none;

}

a:hover {

color:red;

text-decoration:none;

}

Задание: сделайте рассмотренный выше пример самостоятельно

Резюме

Сегодня вы узнали о том, что такое псевдоклассы, используя некоторые свойства из предыдущих уроков. Это должно показать вам, какие возможности заложены в CSS.

К началу


 

А также другие работы, которые могут Вас заинтересовать

1118. Биполярные транзисторы 125.5 KB
  Принцип работы биполярного транзистора. Токи в транзисторе. Вольт–Амперные характеристики транзистора. Входные характеристики транзистора ОЭ. Эффект модуляции ширины базы. Выходные характеристики транзистора. Эквивалентная схема транзистора в h параметрах. Схема замещения транзистора в физических параметрах.
1119. Проблема температурной стабилизации транзисторов 348 KB
  Энергетическая диаграмма n полупроводника. Температурный дрейф выходной характеристики. Эмиттерная стабилизация режима. Коллекторная стабилизация режима. Характеристика терморезистора и его графическое обозначение. Термостабилизация режима терморезистором. Динамический режим работы транзисторов.
1120. Принципы использование тиристоров 108 KB
  Принцип действия тиристора. Полупроводниковые источники света. Светоизлучающие диоды. Механические колебания диодов кристаллической решетки. Характеристики СИД. Полупроводниковый лазер. Система зеркал – оптический резистор.
1121. Понятие микросхем. Основные сведение микроэлектроники 244.5 KB
  Микросхема в корпусе ДИП. Полупроводниковые интегральные микросхемы. Структура интегрального биполярного транзистора. Интегральные полевые транзисторы. Интегральные конденсаторы.
1122. Архитектура вычислительных систем 2.32 MB
  Ознакомление с принципом действия, машинными циклами и тактами микропроцессора КР580: изучение правил записи машинных программ(в машинных кодах и мнемокодах), исследование выполнения команд пересылки байта.
1123. Стальной каркас одноэтажного производственного здания 756 KB
  Расстояние от головки кранового рельса до низа несущих конструкций покрытия. Горизонтальные размеры поперечной рамы. Постоянная нагрузка от веса продольной стены и остекления. Постоянные нагрузки от подкрановой конструкции. Величина продольного усилия от постоянной нагрузки в отдельных сечениях колонны. Расчет на вертикальную нагрузку от мостовых кранов.
1124. Залізничний вагонний рухомий склад 311.5 KB
  Основні види та технічні параметри залізничного вагонного рухомого складу. Технічна характеристика платформи моделі 13-2114. Перевезення важковагових, довгомірних, громіздких вантажів.
1125. Основы лабораторных исследований по информатике 1.04 MB
  Составление, ввод, трансляция и выполнение программ линейной и разветвляющейся структуры. Составление, ввод, отладка и выполнение программ, использующих одномерные массивы. Программирование алгоритмов сортировки и поиска.
1126. Корреляционный и регрессионный анализ 955 KB
  Корреляционный анализ. Множественный коэффициент корреляции. Классификатор на основе ядерных оценок. Регрессионный анализ. Коэффициент ошибок (на обучающей выборке). Применение QDA.