практична стилі

Практична робота
Стильове оформлення сторінок з використанням CSS

Увага! Під час роботи з комп'ютером
дотримуйтеся правил безпеки та санітарно-
гігієнічних норм.
Завдання. Використовуючи каскадні таблиці
стилів відформатувати сторінки сайту,
створеного у попередній практичній роботі.
Хід виконання
На початку роботи створіть сторінку з трьома
абзацами тексту та списком, збережіть та відкрийте її браузером, зробіть скріншот сторінки.
1. Відкрийте редактор коду. Створіть файл з назвою style.css, збережіть його у тій же
папці.
2. Відкрийте браузер. Оберіть будь-який генератор кольорових палітр. наприклад
https://coolors.co. Згенеруйте палітру.(див. рис. Палітра)
Примітка. В наданому вам коді замість «з обраної палітри!» додавайте код кольору, не
забувайте про знак # на початку шестизначного коду!
Радимо для кольору тла та тексту обирати контрастні відтінки.
3. Формуємо стилі для кожного елемента наших сторінок

4. Почнемо з головних елементів
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;
С Обираємо стилі для абзаців

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;
}
5. Зберігаємо файл style. css
6. Відкриваємо всі файли html, створені на попередній практичній роботі.
7. В кожному файлі в <head> додаємо наступний рядок, прописуючи посилання на
створений нами файл зі стилями
<link rel="stylesheet" type="text/css" href="css/style.css">
8. Зберігаємо і закриваємо файли, оновлюємо у браузері нашу головну сторінку.
9. Надішліть архів з роботою вчителю та 3 однокласникам.
Аналіз отриманих результатів.

Як змінився сайт після додавання таблиць стилів? Порівняйте зі скріншотом отримані
результати. Сформулюйте і запишіть різницю, яку ви помітили.
Порівняйте роботи і зробіть висновок.
Домашнє завдання
Базуючись на знаннях, отриманих під час виконання практичної роботи додайте стильове
оформлення веб-сторінкам вашого сайту, розробленого у попередньому домашньому
завданні.

практична стилі

Uploaded by

Document Information

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

практична стилі

Uploaded by

Copyright:

Available Formats

Практична робота

Стильове оформлення сторінок з використанням CSS

3. Формуємо стилі для кожного елемента наших сторінок

С Обираємо стилі для абзаців

Аналіз отриманих результатів.

You might also like