Стильове оформлення сторінок з використанням 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.
Зберігаємо і
закриваємо файли, оновлюємо у браузері нашу головну сторінку.
10.
Надішліть архів з роботою вчителю та 3 однокласникам.
Аналіз отриманих
результатів.
Як змінився сайт
після додавання таблиць стилів? Порівняйте зі скріншотом отримані результати. Сформулюйте і
запишіть різницю, яку ви помітили.
Перегляньте сайти, створені вашими однокласниками.
Порівняйте роботи і зробіть висновок.
Домашнє завдання
Базуючись на знаннях, отриманих під час виконання
практичної роботи додайте стильове
оформлення веб-сторінкам вашого сайту. Архів з сайтом надішліть на електронну скриньку вчителю.
Комментариев нет:
Отправить комментарий