Лабораторна робота №7 Тема: «Каскадні таблицістилів»
Контрольнізапитання
1.Що називають таблицею стилів?
2.Чомутаблицістилів називають каскадними?
3.Як записується правило CSS?
4.Назвіть спопоби зв’язування CSS із документом.
5.За яким пріоритетом використовуються CSS у документі?
6.Яке призначення селектору class?
7.Наведіть приклади використання параметру id.
8.У яких випадках потрібно використовувати контейнер <span>?
9.Яківи знаєте псевдокласи тега <a> ідля чого вони використовуються?
10.Яківластивості у CSS використовуються для визначення виглядушрифта?
11.Яківластивості у CSS використовуються для роботи з кольором?
12.Яківластивості у CSS використовуються для встановлення значень полів?
13.Назвіть властивості, що використовуються у CSS для форматування списків.
14.Назвіть властивості, що використовуються у CSS для форматування границь.
Індивідуальні завдання
Варіант №1
Для “Web-магазину”
1.Створити впроваджену CSS, яка бмістила значення таких властивостей:
колір фону, колір символів;
пріоритетність використання шрифтів;
розмір та колір заголовків 1-го рівня;
відображення курсивом заголовків 2-го рівня;
вид маркерів усписках;
відображення певним кольором гіперпосилань та зміну кольору гіперпосилання при наведенніна нього вказівника миші.
2.Створити зв’язану CSS, яка б містила значення таких властивостей:
значення полів;
відступи від зображень.
Передбачити уцій таблицістилів для значень полів використання селектору class. 3. Використати наодній із сторінок сайтувбудований утег <h2> стиль.
Варіант №2
Для “Туристичноїагенції”
1.Створити впроваджену CSS, яка бмістила значення таких властивостей:
колір фону, колір символів;
пріоритетність використання шрифтів;
розмір та колір заголовків 1-го та 2-го рівня;
відображення курсивом заголовків 3-го рівня;
вид маркерів у списках;
товщинурамки зображень;
відображення певним кольором гіперпосилань та зміну кольору гіперпосилання при наведенніна нього вказівника миші.
2.Створити зв’язану CSS, яка б містила значення таких властивостей:
фоновезображення;
відступи від зображень.
Передбачити уцій таблицістилів для фонового зображення використання селектору class. 3. Використати наодній із сторінок сайтувбудований утег <h1> стиль.
Варіант №3
Для “Web-сторінки факультету”
1.Створити впроваджену CSS, яка бмістила значення таких властивостей:
колір фону, колір символів;
пріоритетність використання шрифтів;
колір та тип підкреслення заголовків 1-го та 2-го рівня;
відображення курсивом заголовків 3-го рівня;
вид маркерів усписках;
товщинурамки зображень;
відображення певним кольором гіперпосилань та зміну кольору гіперпосилання при наведенніна нього вказівника миші.
2.Створити зв’язану CSS, яка б містила значення таких властивостей:
фоновезображення;
колір рамки узображеннях.
Передбачити у цій таблиці стилів для кольору рамки у зображеннях використання селектору
class.
3. Використати наодній із сторінок сайтувбудований утег <p> стиль.
Варіант №4
Для “Інформаційного сайту”
1.Створити впроваджену CSS, яка бмістила значення таких властивостей:
колір фону, колір та розмір символів;
пріоритетність використання шрифтів;
відображення курсивом заголовків 1-го рівня;
відступи від зображень;
товщинурамки зображень;
відображення певним кольором гіперпосилань та зміну кольору гіперпосилання при наведенніна нього вказівника миші.
2.Створити зв’язану CSS, яка б містила значення таких властивостей:
фоновезображення;
вид маркерів усписках.
Передбачити у цій таблиці стилів для зображення маркерів у списках використання селектору
class.
3. Використати наодній із сторінок сайтувбудований утег <h3> стиль.
Варіант №5
Для сайту “Навчальні курси”
1.Створити впроваджену CSS, яка бмістила значення таких властивостей:
колір фону, колір та розмір символів;
пріоритетність використання шрифтів;
відступи від зображень;
вид маркерів усписках;
товщинурамки зображень.
2.Створити зв’язану CSS, яка б містила значення таких властивостей:
фоновезображення;
відображення певним кольором гіперпосилань та зміну кольору гіперпосилання при
наведенніна нього вказівника миші.
Передбачити уцій таблицістилів фонового зображення використання селектору class. 3. Використати наодній із сторінок сайтувбудований утег <b> стиль.