6 Практична 2

Урок 9.
Практична робота 2
Стильове оформлення сторінок з використанням 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. Порівняйте оновлену сторінку зі скріншотом, зробленим на початку уроку.
11. Надішліть архів з роботою вчителю.

6 Практична 2

Uploaded by

Copyright:

Available Formats

You might also like

6 Практична 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

6 Практична 2

Uploaded by

Copyright:

Available Formats

Урок 9.

You might also like