Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика

Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук


Вітаю Вас, Гість · RSS 25.06.2017, 00:30
На головну » Підручники » Підручник CSS » Урок 6: Посилання - Підручник CSS
Урок 6: Посилання

Все вивчене в попередніх уроках ви можете застосовувати і для посилань / 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: Відстань між літерами

Як ви пам'ятаєте з Уроку 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: Текст
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]