ЗАВДАННЯ: відформатувати сторінки сайта, створеного
в практичному завданні 3, використовуючи каскадні таблиці стилів.
1. У теці site створіть теку CSS.
2. Відкрийте редактор коду. Створіть
файл з іменем style.css і збережіть у теці CSS.
3. Відкрийте браузер. Виберіть
будь-який генератор кольорових палітр, наприклад https://coolors.co/ . Згенеруйте палітру.
Приклад
палітри:
Примітка.
У наданому
вам коді замість «з обраної палітри!» додавайте код кольору. Не забувайте про
знак «#» на початку шестицифрового коду. Для кольору тла й тексту варто
вибирати контрастні відтінки.
4.
Сформуйте
стилі для кожного елемента сторінок сайта.
5.
Почніть
виконувати дії з головних елементів:
а) пропишіть
стилі для body;
Стилі
для body:
body{
font-family: Arial,
San-Serif;
font-size: 100%;
background-color: з обраної палітри;
}
б) зробіть
список-меню горизонтальним і зніміть значок маркера.
Горизонтальний
список-меню
ul{
margin: 0;
padding: 0;
}
ul li{
list-style-type: none;
}
а{
text-decoration:
none;
}
в) виберіть стилі для всіх елементів хедера;
Елементи хедера
header{
padding: 50рх 0;
background-color: з обраної палітри;
}
h1,h2{
color: з обраної палітри — контрастно до
кольору тла;
text-align: center;
}
г) виберіть стилі для блоку навігації;
Блок навігації:
nav{
background-color: з обраної палітри;
border-color: з обраної палітри;
min-height:
64px;
}
nav li{
float: left;
width: 100рх;
}
nav a{
display: block;
color: з обраної палітри — контрастно до
кольору тла;
line-height: 4em;
font-weight: bold;
text-align: center;
}
nav li a:hover{
color: з обраної палітри — контрастно до
кольору зміненого тла;
background-color:
з обраної палітри — контрастно до
кольору активного елемента меню;
}
д)
виберіть стилі для абзаців (рис. 6);
Абзаци:
р{
font-size: 16рх;
line-height: 1.3;
margin-top: 0.1em;
margin-bottom: 0;
color: з обраної палітри — контрастно до
кольору тла;
}
Примітка. Якщо потрібно, щоб між абзацами були відступи, зі стилів слід
вилучити рядки з використанням margin.
є) виберіть стилі для футера.
Футер:
footer{
background-color: з обраної палітр;
color: з обраної палітри — контрастно до
кольору тла;
padding: 26рх 0;
margin-top: Збрх;
}
6.
Збережіть
файл style.css.
7.
Відкрийте
всі файли HTML, створені
в практичному завданні 3.
8.
У
кожному файлі в <head> додайте наведений далі рядок,
прописуючи посилання на створений файл зі стилями:
<link
rel="stylesheet" type="text/css"
href="css/style.css">
9.
Збережіть
і закрийте файли, оновіть у браузері головну сторінку вашого сайта.
Зробіть висновок: як змінився сайт після додавання таблиць стилів; порівняйте отримані результати зі скріншотом; сформулюйте і запишіть зміни, які ви помітили