Все вивчене в попередніх уроках ви можете застосовувати і для посилань / links (наприклад змінювати шрифт, колір, підкреслення і т. Д). Новим є те, що в CSS ці властивості можна визначати по-різному, в залежності від того, відвідали вже посилання, активна чи вона, чи знаходиться покажчик миші над посиланням. Це дозволяє додати цікаві ефекти на ваш web-сайт. Для цього використовуються так звані псевдокласи.
Що таке псевдоклас?
Псевдоклас дозволяє враховувати різні умови або події при визначенні властивостей HTM-тега.
Розглянемо приклад. Як ви знаєте, посилання специфицируются в HTML тегом . В CSS ми також можемо використовувати a як селектор:
Використовуйте | a: link | і | a: visited | для невідвіданих і відвіданих посилань, відповідно. Активні посилання мають псевдоклас a: active. і a: hover. коли покажчик - над посиланням.
Ми розглянемо кожен з цих чотирьох псевдокласів на прикладах і з поясненнями.
Псевдоклас: link
Псевдоклас: link використовується для посилань на сторінки, які користувач ще не відвідував.
У прикладі коду невідвіданих посилання - сині.
Псевдоклас: visited
Псевдоклас: visited використовується для посилань на сторінки, які користувач відвідав. У прикладі коду відвідані посилання - фіолетові.
Псевдоклас: active
Псевдоклас: active використовується для активних посилань.
У прикладі активні посилання мають жовтий фон.
Псевдоклас: hover
Псевдоклас: hover використовується для посилань, над якими знаходиться вказівник.
Це можна використовувати для створення цікавих ефектів. Наприклад, якщо ми хочемо, щоб посилання ставали помаранчевими і курсивними при проходженні покажчика над ними, то наш CSS повинен виглядати так:
Приклад 1: Ефект при знаходженні покажчика над посиланням
Ефекти для положення покажчика миші над посиланням стали вже загальним місцем. Ми розглянемо кілька додаткових прикладів для псевдокласу: hover.
Приклад 1a: Відстань між буквами
Як ви пам'ятаєте з Уроку 5. відстань між символами можна встановити властивістю letter-spacing. Це можна застосувати для посилання:
Приклад 1b: UPPERCASE і lowercase
В Уроці 5 ми розглянули властивість text-transform. яке може перемикати символи з верхнього на нижній регістр. Це також можна використовувати для створення ефектів на засланні:
Ці два приклади показують майже безмежні можливості комбінування різних властивостей. Ви можете створювати свої власні ефекти - спробуйте!
Приклад 2: Видалення підкреслення посилань
Звичайне питання - як видалити підкреслення посилань?
Ви повинні точно визначити, чи потрібно прибрати підкреслення посилань, так як це може значно знизити використання вашого web-сайту. Люди звикли бачити на web-сторінках сині підкреслені посилання і знають, що за ними потрібно клацати. Навіть моя мама знає це! Якщо ви приберете підкреслення і змініть колір посилань, досить імовірно, що це збентежить користувачів і вони не отримають доступу до всього вмісту вашого сайту web-сайт.
Взагалі-то видалити підкреслення посилань дуже просто. Як ви, можливо, пам'ятаєте з Уроку 5. властивість text-decoration можна використовувати для визначення підкреслення тексту. Для видалення підкреслення просто встановіть в text-decoration значення none.
Альтернативно можна також встановити text-decoration. поряд з іншими властивостями, для всіх чотирьох псевдокласів.
У цьому уроці ви дізналися про те, що таке псевдокласи, використовуючи деякі властивості з попередніх уроків. Це повинно показати вам, які можливості закладені в CSS.
У наступному уроці ми навчимо вас визначати властивості конкретних елементів і груп елементів.