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.

К началу


 

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

50953. Представление информации в цифровых автоматах 136 KB
  Любая предназначенная для практического применения система счисления должна обеспечивать: возможность представления любого числа в рассматриваемом диапазоне величин; единственность представления каждой комбинации символов должна соответствовать одна и только одна величина; простоту оперирования числами. Для изображения какогото числа в этой системе нужно записать количество палочек равное данному числу. Эта система неэффективна так как запись числа получается длинной.
50954. Информационные ресурсы и информационные технологии 99 KB
  Создание WebстраницHTML Создание Web документов Применение языка HTML Публикация Web документов Обработка числовых данных в электронных таблицах общие сведения об электронных таблицах EXEL. Создание Web страниц HTML Размещение собственных материалов в Интернете включает два этапа: подготовку материалов и их публикацию. Подготовка материалов состоит в создании документов имеющих формат принятый в Интернете то есть Webстраниц написанных на языке HTML Публикация материалов то есть открытие к ним доступа осуществляется...
50955. Введение в дисциплину. Понятие информатики. Место информатики в ряду других фундаментальных наук 59 KB
  Направления для практических приложений: архитектура вычислительных систем приемы и методы построения систем предназначенных для автоматической обработки данных; интерфейсы вычислительных систем приемы и методы управления аппаратным и программным обеспечением; программирование приемы методы и средства разработки компьютерных программ; Преобразование данных приемы и методы преобразования структур данных; защита информации обобщение приемов разработка методов и средств защиты данных; автоматизация функционирование...
50956. Информационные процессы и информационные технологии. Информационный ресурс и его составляющие 96.5 KB
  Создание Web страниц – HTML Размещение собственных материалов в Интернете включает два этапа: подготовку материалов и их публикацию. Подготовка материалов состоит в создании документов имеющих формат принятый в Интернете то есть Webстраниц написанных на языке HTML Публикация материалов то есть открытие к ним доступа осуществляется после решения организационных вопросов связанных с получением дискового пространства на Webсервере для их размещения. Создание Webдокументов Автономные Webдокументы используют язык HTML...
50957. Обработка данных. Основные виды обработки данных 87 KB
  Для реализации распределенной обработки данных были созданы многомашинные ассоциации структура которых разрабатывается по одному из следующих направлений: многомашинные вычислительные комплексы МВК; компьютерные вычислительные сети. Обобщенная структура компьютерной сети Компьютерные сети являются высшей формой многомашинных ассоциаций. Основные отличия компьютерной сети от многомашинного вычислительного комплекса: Размерность. Необходимость решения в сети задачи маршрутизации сообщений.
50958. Функциональная и структурная организации компьютера 63.5 KB
  Алгоритм решения задач имеет ряд своих обязательных свойств; дискретность – разбиение процесса обработки информации на более простые этапы шаги выполнения выполнение которых компьютером или человеком не вызывает затруднений; определенность алгоритма – однозначность выполнения каждого отдельного шага преобразования информации; выполнимость – конечность действий алгоритма решения задач позволяющая получить желаемый результат при допустимых исходных данных за конечное число шагов; массовость – пригодность алгоритма для решения...
50959. Информационные основы контроля работы цифрового автомата 165 KB
  При возникновении какоголибо нарушения нормального функционирования результат будет неверным однако пользователь об этом не узнает если не будут предусмотрены меты для создания системы обнаружения возможной ошибки а с другой стороны должны быть проработаны меры позволяющие исправить ошибки. Система контроля совокупность методов и средств обеспечивающих определение правильности работы автомата в целом или его отдельных узлов а также автоматическое исправление ошибки. Ошибки в работе цифрового автомата могут быть вызваны либо выходом...
50960. Каналы передачи данных 104 KB
  Рассматривают три основных параметра сигнала существенных для передачи информации по каналу. Первый важный параметр это время передачи сигнала Tс. Следовательно общее условие согласования сигнала с каналом передачи информации определяется соотношением Однако соотношение выражает необходимое но недостаточное условие согласования сигнала с каналом.
50961. Сигналы и их характеристики 367.5 KB
  Например при выборе прибора для контроля технологического процесса может потребоваться знание дисперсии сигнала; если сигнал используется для управления существенным является его мощность и так далее. Рассматривают три основных параметра сигнала существенных для передачи информации по каналу. Первый важный параметр это время передачи сигнала Tx . Второй характеристикой которую приходится учитывать является мощность Px сигнала передаваемого по каналу с определенным уровнем помех Pz .