Урок 5
Псевдокласи CSS
Розглянемо такі псеадокласи, які дозволяють реагувати на події:
Псевдоклас
:link - використовується для посилань на сторінки, які користувач ще не відвідував.
Псевдоклас
:visited використовується для посилань на сторінки, які користувач відвідав.
Псевдоклас
:active використовується для активних посилань.
Псевдоклас
:hover використовується для посилань, над якими знаходиться покажчик миші.
Це можна використовувати для створення цікавих ефектів.
Завдання 1 Створимо вебсторінку psevdo.html:
<html>
<Head>
<link rel="stylesheet" href="psevdo.css">
</Head>
<body>
<h4>
<a href="http://vpu14.ho.ua" target="_blank"> Посилання на сайт де працює Любомир Михайлович </a><br>
<a href="http://weblm.ho.ua" target="_blank" > Посилання на сайт нашого підручника </a>
<h4>
</body>
</html>
Опишемо правила для тегу <a>, як селектора та псевдокласи в файлі psevdo.css
a { color: blue; }
a:hover {
color: orange;
font - style: italic;
}
a:link {
color: red;
font - style: oblique
font-size:24px;
}
a:active {
color: green;
font - style: normal;
}
a:hover {
color: gray;
font - style: italic;
}
Результат
Завдання 2 Створіть правило, яке збільшить зображення вдвічі коли підведемо курсор миші.:
Результат
