Створення

веб-сторінок
10 За навчальною програмою 2018 року

(11)

Урок 13
 Розділ 2
Створення веб-сторінок
§ 13
10
(11)
У цьому матеріалі ми розберемо одну з можливостей
CSS, яка дозволяє додати інтерактиву до сторінки. Всі
звикли, що пункти меню та кнопки змінюють вигляд,
якщо навести на них курсор.
Наприклад, такий
ефект можна побачити на
сторінці пошуку Google.
 Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Також підчас роботи з посиланнями ми згадували, що
лінки на вже відвідані сайти браузер відображає іншим
кольором.
Виявляється, такими
ефектами ми
можемо керувати за
допомогою
механізму псевдо-
класів (англ.
pseudo-class), який є
частиною CSS.
 Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Псевдо-класи – це спеціальні слова, які можна
додавати до селектору CSS. Такий селектор буде
обирати елементи не лише на основі тегів та
атрибутів, а й на основі поточного стану
елемента.
Наприклад, можна обрати елемент:
на який наведено посилання,
курсор в даний або яке ми вже
момент відвідали
Назви псевдо-класів та стани, яким вони
відповідають, описані в стандарті CSS.
Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Псевдо-клас додається до селектора у вигляді:

:назва псевдо-класу
Наприклад,
згадане нами CSS правило
задати стилі вже
для посилання, на яке
відвіданим посиланням
навели курсор, можна
допоможе псевдо-клас
реалізувати селектором

a:hover :visited
Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Використаємо псевдо-класи, щоб додати
інтерактив-
ності
заготовці
меню, яку ми
створили в
минулому
відео.
 Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Більшість стилів пунктів
меню в нас задають правила з
селекторами:

.main-menu li (для
верхнього меню)

.category-menu li (для
меню категорій).
 Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Додамо правила,
які будуть
змінювати стиль
пунктів меню
при наведенні.
Для цього
використаємо
псевдо-
клас :hover. CSS
правила
матимуть
вигляд:
 Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Тепер, якщо навести курсор на пункти головного
меню, з’являється тінь.
А пункти меню
категорій –
підкреслюються. І
на всіх пунктах
меню курсор
перетворюється на
руку, як при
наведенні на
посилання.
 Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Спробуємо ще один псевдо-клас – first-child (перша
дитина). Він пов’язаний не з діями користувача, а з
розташуванням елемента відносно своїх сусідів.
Точніше, цей селектор дозволяє обрати перший серед
елементів одного рівня. Ось таким правилом ми можемо
задати першому пункту меню категорій відступ зліва:
 Розділ 2
Створення веб-сторінок
§ 13
10
(11)
Псевдо-класів досить багато. Деякі з них усталені і їх
підтримують майже усі браузери. Наприклад, псевдо-
класи:

:link :active :visited :hover

Для стилізації різних станів посилань. Інші –

експерементальні, або нещодавно включені в стандарт
псевдо-класи, можуть працювати не завжди. Тому
перед їхнім використанням варто перевірити, які
браузери їх підтримують.
 Дякую за увагу!

10 За навчальною програмою 2018 року

(11)

Урок 13