2. Задание
Используя HTML-страницу из предыдущей практической работы, необходимо оформить её с помощью CSS.
Создать файл: ```id="hjg6sc" style.css
И подключить его к HTML-документу.
---
# Подключение CSS
В разделе `<head>` добавить:
```html
<link rel="stylesheet" href="style.css">
Требования к оформлению
1 Фон страницы
Изменить цвет фона страницы.
Пример:
body {
background-color: #f2f2f2;
}
2 Заголовок
Оформить заголовок страницы.
Требования: - изменить цвет - выровнять по центру - изменить размер текста
3 Абзацы
Для всех абзацев: - изменить размер текста - добавить отступы - изменить шрифт
4 Список
Оформить список: - изменить цвет текста - добавить отступ слева
5 Таблица
Оформить таблицу.
Требования: - добавить границы - добавить отступы внутри ячеек - изменить цвет заголовков таблицы
6 Форма
Оформить форму.
Требования: - добавить отступы между полями - задать ширину полей - оформить кнопку отправки
7 Карточка блока
Создать блок с классом:
<div class="card">
Текст блока
</div>
Для блока применить: - границу - внутренние отступы - внешний отступ
8 Flexbox
Создать контейнер:
<div class="menu">
<div>Главная</div>
<div>О нас</div>
<div>Контакты</div>
</div>
Использовать Flexbox, чтобы: - расположить элементы в строку - сделать равные промежутки между элементами
Пример CSS
body {
background-color: #f2f2f2;
font-family: Arial;
}
h1 {
text-align: center;
color: blue;
}
p {
font-size: 18px;
margin-bottom: 20px;
}
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
}
.menu {
display: flex;
justify-content: space-between;
padding: 20px;
}
.card {
border: 1px solid gray;
padding: 20px;
margin: 20px;
}
Требования к выполнению
При выполнении работы необходимо: - использовать внешний CSS-файл; - использовать классы; - соблюдать структуру кода; - использовать отступы.
Критерии оценки
| Элемент | Баллы |
|---|---|
| Подключение CSS | 2 |
| Оформление текста | 2 |
| Оформление списка | 2 |
| Таблица | 2 |
| Форма | 2 |
| Flexbox | 3 |
| Общий вид страницы | 2 |
Максимум: 15 баллов
| Баллы | Оценка |
|---|---|
| 0–6 | 2 |
| 7–9 | 3 |
| 10–12 | 4 |
| 13–15 | 5 |
Дополнительное задание (+3 балла)
Добавить:
- изменение цвета кнопки при наведении (hover);
- дополнительный блок с классом;
- оформление ссылок.