Перейти к содержанию

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); - дополнительный блок с классом; - оформление ссылок.