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