Практическая работа: CSS для сайта школьного клуба

1. Изучите исходные страницы · 4 минуты

1. Откройте student/index.html в браузере и редакторе.
2. Перейдите по ссылкам Home → Events → Projects. Все страницы пока используют стандартное оформление браузера.
3. Найдите в коде семь элементов из таблицы. Покажите, какие блоки вложены в другие.

Вопрос: обязательно ли aside должен находиться справа? Запишите предположение. Его смысл — дополнительное содержание; расположение задаётся CSS.

2. Внешний CSS · 7 минут

1. В каждом из трёх HTML-файлов внутри head вместо комментария STEP 2 вставьте:

<link rel="stylesheet" href="styles.css">

Откройте styles.css в той же папке. Добавьте следующий код, сохраните все файлы и обновите страницы.

/* 1. Page */
body {
 margin: 0;
 font-family: Arial, sans-serif;
 line-height: 1.5;
 background-color: #f2f6f5;
 color: #243b35;
}
header {
 padding: 24px;
 background-color: #286d60;
 color: white;
 text-align: center;
}
nav {
 padding: 12px;
 background-color: #194b42;
 text-align: center;
}
nav a {
 display: inline-block;
 margin: 4px;
 padding: 8px 12px;
 color: white;
 border: 1px solid white;
 border-radius: 6px;
 text-decoration: none;
}
nav a:hover, nav a:focus-visible {
 background-color: #347c6e;
}

Сделайте самостоятельно: замените background-color у header на #304f85. Обновите все три страницы и убедитесь, что изменились все шапки. Затем верните #286d60.

Запишите: сколько CSS-файлов пришлось изменить? Почему этот способ удобен для нескольких страниц?

3. Оформите блоки · 9 минут

В конец styles.css добавьте код. Он показывает границы вложенных блоков.

/* 2. Boxes */
main {
 max-width: 900px;
 margin: 20px auto;
 padding: 16px;
 border: 2px solid #286d60;
 background-color: #e3eeeb;
}
section {
 margin: 0 0 16px;
 padding: 16px;
 border: 2px solid #729e93;
 background-color: white;
}
article {
 margin: 12px 0;
 padding: 12px;
 border: 2px solid #c7dcd6;
 background-color: #f4f8f7;
}
aside {
 margin: 16px 0 0;
 padding: 16px;
 border: 2px dashed #aa7415;
 background-color: #fff5d9;
}
footer {
 margin-top: 24px;
 padding: 16px;
 border-top: 3px solid #286d60;
 background-color: #dce9e5;
 text-align: center;
}

Сделайте самостоятельно на странице Home:

1. У article временно измените padding: 12px на padding: 24px. Где увеличилось расстояние?
2. Верните padding. Измените margin: 12px 0 на margin: 24px 0. Что изменилось теперь? Верните исходное значение.
3. У aside измените границу с dashed на solid, сравните и верните dashed.

В записи margin: 12px 0 первое значение относится к верху и низу, второе — к левому и правому краям. Вертикальные margin соседних обычных блоков могут схлопываться: зазор не всегда равен их сумме.

Заполните: padding — расстояние между ______ и ______; margin — отступ ______ границы; border — ______.

Проверка: видны внешняя рамка main, рамка section, две карточки article и отдельное объявление aside. Header, nav и footer тоже имеют внутренние отступы. Не каждому блоку обязательно задавать все четыре свойства.

4. Внутренний CSS · 4 минуты

Только в events.html замените комментарий STEP 4 внутри head следующим кодом. Разместите его после подключения внешнего файла.

<style>
 .event-highlight {
 background-color: #fff0c2;
 border: 2px solid #a76c10;
 }
</style>

У первой карточки уже указан class="event-highlight". Обновите страницу: её фон и граница изменились, а другие карточки сохранили общее оформление.

Сделайте самостоятельно: измените цвет фона этой карточки на #ffe3c2, проверьте и верните исходный цвет.

Объясните: почему этот стиль не применяется на Home и Projects? Здесь класс .event-highlight специфичнее селектора article. Внутренний CSS не имеет безусловного приоритета над внешним только из-за способа подключения.

5. Inline CSS · 3 минуты

В events.html найдите абзац Registration closes on Friday. внутри aside. Замените его:

<p style="color: #9b241c; font-weight: bold;">
 Registration closes on Friday.
</p>

Проверка: выделился только этот абзац. Заголовок Club notice не изменился.

Объясните: почему неудобно таким способом оформлять 20 одинаковых объявлений? Inline CSS здесь применяется для учебного сравнения. Для повторяющегося оформления используйте класс во внешнем файле.

6. Исследуйте Box Model · 8 минут

На странице projects.html вторая карточка имеет class="box-lab". Добавьте в конец внешнего CSS:

/* 3. Box Model experiment */
.box-lab {
 box-sizing: content-box;
 width: 240px;
 padding: 20px;
 border: 4px solid #286d60;
 margin: 16px;
}

1. При content-box ширина 240 px относится только к содержимому. Вычислите ширину от внешнего края левой границы до внешнего края правой: 240 + 20 + 20 + 4 + 4 = ____ px.
2. Добавьте левый и правый margin: ____ + 16 + 16 = ____ px. Это суммарная заданная ширина содержимого, padding, border и горизонтальных margin в данном опыте.
3. Нажмите F12, выберите инструмент выбора элемента и щёлкните по карточке Reading Journal. Найдите схему Box Model в панели стилей или вычисленных свойств. Сверьте content, padding, border и margin со своими числами.
4. Замените только box-sizing: content-box на box-sizing: border-box. Теперь 240 px включают содержимое, padding и border. Вычислите ширину содержимого: 240 − 20 − 20 − 4 − 4 = ____ px. Общая заданная ширина с margin: 240 + 16 + 16 = ____ px.
5. Сохраните border-box. Временно увеличьте padding до 30 px. Изменилась ли ширина по внешним краям границы? Что произошло с областью содержимого? Верните padding 20 px.

Поясните партнёру: content → padding → border → margin. Фон элемента окрашивает область padding; margin остаётся снаружи его границы.

Упражнение выполняйте в обычном окне настольного браузера: фиксированная ширина этой карточки выбрана для расчёта. Здесь не требуется создавать адаптивную раскладку.

7. Проверьте результат · 5 минут

Проверьте работу в паре. На каждое утверждение покажите подтверждение в браузере или коде.

• Все три страницы открываются через меню.
• Один styles.css подключён к трём страницам и оформляет их одинаково.
• Внутренний CSS выделяет первую карточку Events.
• Inline CSS выделяет только текст объявления Events.
• Используются все семь элементов: header, nav, main, section, article, aside, footer.
• Я могу показать content, padding, border и margin карточки.
• Я могу объяснить оба расчёта ширины.

Сдайте: папку student с тремя HTML-файлами и styles.css; короткие ответы на вопросы шагов 2, 3, 4, 5 и расчёты шага 6 — в тетради или отдельном текстовом файле.

Выходной вопрос: необходимо поменять шрифт на всех страницах, фон одной карточки Events и цвет одного абзаца. Покажите, где в вашей работе находится каждое из этих правил.