 Меню сайту |
|
| Підручники |
|
| Форма входу |
|
| Статистика |
Онлайн всього: 1 Гостей: 1 Користувачів: 0 |
| Пошук |
|
|
| Вітаю Вас, Гість · RSS |
23.12.2024, 20:15 |
|
На головну » Підручники » Підручник CSS » Урок 6: Посилання - Підручник CSS
|
|
|
Все вивчене в попередніх уроках ви можете застосовувати і для посилань / links (наприклад змінювати шрифт, колір, підкреслення і т. д). Новим буде те, що в CSS ці властивості можна визначати по-різному, в залежності від того, відвідали вже посилання, чи воно активне, чи знаходиться покажчик миші над посиланням. Це дозволяє додати цікаві ефекти на ваш web-сайт. Для цього використовуються так звані псевдокласи.
Що таке псевдоклас?
Псевдоклас дозволяє враховувати різні умови або події при визначенні властивостей HTM-тега.
Розглянемо приклад. Як ви знаєте, посилання специфікуєтся в HTML тегом <a>. У CSS ми також можемо використовувати a в якості селектора:
Посилання може мати різні стани. Наприклад, її вже відвідали / 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: Відстань між літерами
Як ви пам'ятаєте з Уроку 5, відстань між символами можна встановити властивістю letter-spacing. Це можна застосувати для посилання:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
|
Показати приклад
Приклад 1b: UPPERCASE і lowercase
У Уроці 5 ми розглянули властивість text-transform, яке може перемикати символи з верхнього на нижній регістр. Це також можна використовувати для створення ефектів на посиланні:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
|
Показати приклад
Ці два приклади показують майже безмежні можливості комбінування різних властивостей. Ви можете створювати свої власні ефекти - спробуйте!
Приклад 2: Видалення підкреслення посилань
Звичайне питання - як видалити підкреслення посилань?
Ви повинні точно визначити, чи потрібно прибрати підкреслення посилань, так як це може значно знизити використання вашого web-сайту. Люди звикли бачити на web-сторінках сині підкреслені посилання і знають, що за ним потрібно клацати. Навіть моя мама знає це! Якщо ви приберете підкреслення і зміните колір посилань, досить імовірно, що це збентежить користувачів і вони не отримають доступу до всього вмісту вашого сайту.
Взагалі-то видалити підкреслення посилань дуже просто. Як ви, можливо, пам'ятаєте з Уроку 5, властивість 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.
У наступному уроці ми навчимо вас визначати властивості конкретних елементів і груп елементів.
|
|
<< Урок 5: Текст
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
