CSS. Урок 15 Псевдокласи

Псевдоклас? Що це?

Псевдокласи це доповнення до селектора, що дозволяють застосовувати різні стилі до окремих станів елементу.

Формат запису:

селектор:псевдоклас { css правила }

Розглянемо тег a який застосовують для створення посилання на ресурс

Формат запису:

<a href=”ресурс”> текст посилання </a>

Елемент а має псевдокласи, що відображають його стан:

Розглянемо приклад, в якому посилання спочатку матиме синій колір. При наведенні миші, колір зміниться на зелений. Після відвідування ресурсу, текст посилання перефарбується на червоний. Якщо утримувати ліву кнопку миші, тоді колір буде жовтий.

file css
a:link {
color:blue;
}
a:visited{
color:red;
}
a:hover {
color:green;
}
a:active {
color:yellow;
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<A href="example.html">Приклад </A>
</body>
</html>

В залежності від елементу на якому створюється навігація (текст, зображення, блок, кнопка) можна задіяти безліч всіляких ефектів для псевдокласів. Наприклад колір, розмір, нахил, прозорість, рамки, тінь, тощо. Звичайно, що існують поширені ефекти. Але, творчість дизайнера не може бути обмежена готовими шаблонами і потребує постійоного пошуку серед різних варіантів.

Наведемо приклад створення гіперпосилання на блок та зміни його тла при наведенні миші (псевдоклас hover)

file css
.button
{
/* inline-block змушує блок зменшитися до розміру тексту */
display:inline-block;
font-family:verdana;
background-color:AliceBlue;
font-size:2em;
padding:13px;
border:blue 1px solid;
}
.button:hover {
background-color:Aqua;
border:red 1px solid;
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h4>Приклад псевдокласу 2 </h4>
<A href="example.html"><div class = "button"> Click me </div></A>
</body>
</html>

Виконайте вправу в редакторі html

Збережіть зображення та вставте його в html документ. Стилями досягніть того, що при наведенні миші, зображення виділялося тінню навколо.