Створення веб-сторінок
За навчальною програмою 2018 року
Урок 13
10
(11)
Створення веб-сторінок
Розділ 2 § 13
Виконайте завдання описанні в відео:
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
У цьому матеріалі ми розберемо одну з можливостей CSS, яка дозволяє додати інтерактиву до сторінки. Всі звикли, що пункти меню та кнопки змінюють вигляд, якщо навести на них курсор.
Наприклад, такий ефект можна побачити на сторінці пошуку Google.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Також підчас роботи з посиланнями ми згадували, що лінки на вже відвідані сайти браузер відображає іншим кольором.
Виявляється, такими ефектами ми можемо керувати за допомогою механізму псевдо-класів (англ. pseudo-class), який є частиною CSS.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Наприклад, можна обрати елемент:
Псевдо-класи – це спеціальні слова, які можна додавати до селектору CSS. Такий селектор буде обирати елементи не лише на основі тегів та атрибутів, а й на основі поточного стану елемента.
на який наведено курсор в даний момент
посилання,
яке ми вже відвідали
або
Назви псевдо-класів та стани, яким вони відповідають, описані в стандарті CSS.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Псевдо-клас додається до селектора у вигляді:
:назва псевдо-класу
Наприклад,
згадане нами CSS правило для посилання, на яке навели курсор, можна реалізувати селектором
задати стилі вже відвіданим посиланням допоможе псевдо-клас
a:hover
:visited
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Використаємо псевдо-класи, щоб додати
інтерактив-ності заготовці меню, яку ми створили в минулому відео.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Більшість стилів пунктів меню в нас задають правила з селекторами:
.main-menu li (для верхнього меню)
.category-menu li (для меню категорій).
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Додамо правила, які будуть змінювати стиль пунктів меню при наведенні. Для цього використаємо псевдо-клас :hover. CSS правила матимуть вигляд:
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Тепер, якщо навести курсор на пункти головного меню, з’являється тінь.
А пункти меню категорій – підкреслюються. І на всіх пунктах меню курсор перетворюється на руку, як при наведенні на посилання.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Спробуємо ще один псевдо-клас – first-child (перша дитина). Він пов’язаний не з діями користувача, а з розташуванням елемента відносно своїх сусідів. Точніше, цей селектор дозволяє обрати перший серед елементів одного рівня. Ось таким правилом ми можемо задати першому пункту меню категорій відступ зліва:
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Створення веб-сторінок
Розділ 2 § 13
Псевдо-класів досить багато. Деякі з них усталені і їх підтримують майже усі браузери. Наприклад, псевдо-класи:
:link
:active
:visited
:hover
Для стилізації різних станів посилань. Інші – експерементальні, або нещодавно включені в стандарт псевдо-класи, можуть працювати не завжди. Тому перед їхнім використанням варто перевірити, які браузери їх підтримують.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Домашнє завдання
Розділ 2 § 13
Поділитися у соціальних мережах з друзями враженнями від створення веб-сторінок.
Запропонувати друзям навчити їх створювати
веб-сторінки
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Працюємо за комп’ютером
Розділ 2 § 13
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Дякую за увагу!
За навчальною програмою 2018 року
Урок 13
10
(11)