Оформление веб-страницы средствами CSS

Оформление веб-страницы средствами CSS

Стилизуй мини-сайт из двух страниц общим файлом CSS так, чтобы текст читался уверенно, а оформление совпадало.

HTML задаёт структуру. CSS задаёт внешний вид: цвет и шрифт текста, фон, отступы и рамки блоков. Один файл стилей может обслуживать несколько страниц.

Результат урока

Объяснишь, какие свойства CSS отвечают за оформление текста, фона и блоков; создашь папку StyleSite_10 с двумя HTML-страницами и общим style.css; задашь читаемый цвет текста, шрифт и межстрочный интервал; настроишь фон и хотя бы один блок с padding и border; проверишь, что обе страницы выглядят единообразно и текст читается (достаточный контраст). Flex, grid и анимации — резерв. Звук и видео — следующие уроки.

Перед началом

Работай в своей папке и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор и браузер. Интернет для практики не нужен.

На учебной странице размещай только учебный текст: без домашнего адреса, телефона и личных фотографий.

Вспомни: каркас HTML, ссылки между страницами (уроки 9–12), размещение изображений (урок 13), подключение CSS и запись правила «селектор { свойство: значение; }» (урок 14). Сегодня — оформление текста, фона и блоков для читаемого единого вида.

Основа — § 8 учебника (продолжение). Flex/grid/анимации и мультимедиа сегодня не обязательны.

Оформление текста

Для текста чаще всего задают цвет, семейство шрифта и межстрочный интервал.

body {
  color: #1b2430;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Слишком мелкий шрифт и «сжатые» строки утомляют. Для учебного текста удобны 16–18 px и line-height около 1.5–1.6.

Фон страницы

Фон задаёт background-color. На уроке достаточно однотонного светлого фона.

body {
  background-color: #eef4f8;
}

Сложные фоновые рисунки и градиенты можно попробовать позже; сегодня важнее читаемость.

Блоки: margin, padding, border

Блок (например, main, nav или div.note) можно отодвинуть от соседей, добавить «воздух» внутри и обвести рамкой.

margin — внешний отступ: расстояние снаружи рамки до соседних элементов.

padding — внутренний отступ: расстояние от рамки до содержимого.

main {
  margin: 24px auto;
  padding: 20px;
  border: 1px solid #b8c9d9;
  background-color: #ffffff;
}

nav {
  padding: 12px 20px;
  border-bottom: 3px solid #071a33;
}

Частая путаница: margin «отодвигает» блок от соседей, padding «раздвигает» содержимое внутри блока.

Контраст и читаемость

Текст должен уверенно отличаться от фона. Тёмный текст на светлом фоне обычно читается лучше, чем бледно-серый на бледно-голубом.

Проверка: открой страницу и прочитай абзац с обычного расстояния. Если приходится щуриться — усиль контраст.

Один стиль — две страницы

Общий файл style.css подключают на каждой странице:

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

Тогда меню, цвет текста и фон совпадают без копирования одних и тех же правил. Изменение в одном месте обновляет вид обеих страниц после сохранения и F5.

Сохранение файлов

Все файлы мини-сайта сохраняй в одну папку StyleSite_10 (10 — номер места): index.html, about.html, style.css. Для HTML — тип «Все файлы», UTF-8, расширение .html. Для CSS — расширение .css.

Просмотр в браузере

Открой index.html, перейди на about.html и обратно. Сравни оформление. После правки CSS сохрани файл и обнови обе страницы (F5). Интернет не нужен.

Чек-лист оформления

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти и проверь посадку. Затем переходи к своей папке.

Практика: StyleSite_10

Создай папку StyleSite_10 в своей рабочей папке.

Лист проверки

Критерии готовности

Шесть диагностических баллов: два .html и один style.css в одной папке; на обеих страницах подключён общий CSS; заданы цвет текста, шрифт и line-height; задан фон; есть хотя бы один блок с padding и border; ученик объясняет, почему контраст важен, и показывает одинаковый вид двух страниц. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: класс у заголовка; лёгкий background-image (без перекрытия текста); кратко объяснить, чем margin отличается от padding на своём примере.

Если результат отличается

Объясни самостоятельно

1. Какие свойства CSS отвечают за цвет текста, шрифт и межстрочный интервал?
2. Чем margin отличается от padding? Зачем нужна рамка (border) у меню или блока?
3. Почему общий style.css удобнее для двух страниц? Что проверить, если текст плохо читается?

Показать ответ после выполнения

Домашнее задание

§ 8, фрагмент об оформлении текста, фона и блоков. Письменно: 1) три свойства для оформления текста; 2) чем margin отличается от padding; 3) зачем проверять контраст. По желанию — донастроить StyleSite. Flex/grid, анимации, звук и видео не задаются. Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2, § 8 «Понятие о каскадных таблицах стилей» (оформление текста, фона, блоков). Содержание главы. Электронное приложение.

MDN Web Docs: color, font-family, line-height, background-color, margin, padding, border.

StyleSite, лист и критерии — авторская адаптация; одиннадцать иллюстраций условные и не являются снимками браузера или редактора.