Каскадные таблицы стилей. Правила CSS

Каскадные таблицы стилей. Правила CSS

Собери учебную страницу и задай её оформление во внешнем файле стилей.

HTML описывает структуру и текст. CSS задаёт внешний вид. Когда оформление вынесено в отдельный файл, страницу проще читать и править.

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

Объяснишь, зачем CSS отделяет оформление от содержимого; создашь в папке StyleStart_10 файлы index.html и style.css; подключишь стили записью <link rel="stylesheet" href="style.css">; напишешь правила для body, h1 и p со свойствами color, font-family, font-size, text-align; откроешь страницу в браузере и проверишь результат.

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

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

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

Вспомни: каркас HTML (html, head, body, title, h1, p), расширение .html и обновление страницы по F5 — с уроков 9–13. Новое — внешний файл стилей и правила CSS.

Основа — § 8 учебника. Строчный style и <style> в head сегодня только кратко упомянем. Flex, grid и сложные макеты — резерв / следующий урок.

Зачем отделять оформление

Содержимое — это текст и структура документа. Оформление — цвет, шрифт, размер, выравнивание.

Если менять только вид заголовка, удобнее править CSS, а не переписывать HTML. Один файл стилей можно использовать на нескольких страницах — оформление останется единообразным.

Что такое CSS

CSS (Cascading Style Sheets) — каскадные таблицы стилей: набор правил, которые браузер применяет к элементам страницы.

Слово «каскад» напоминает: несколько правил могут действовать вместе. На этом уроке достаточно простых правил по имени тега.

Где можно записать стиль

Сегодня создаём и подключаем внешний файл стилей.

Подключение таблицы стилей

В head добавляют элемент link:

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

Файлы index.html и style.css должны лежать в одной папке, иначе относительный href «сломается».

Строение правила CSS

Правило записывают так:

селектор {
  свойство: значение;
}

Селектор

Селектор выбирает элементы. Сегодня — по имени тега: body, h1, p. Правило действует на все такие элементы страницы.

Свойство

Свойство отвечает на вопрос «что меняем?». На уроке обязательны:

Значение

Значение отвечает на вопрос «каким сделать?». Примеры: navy, #118dcc, 24px, center. После значения ставят точку с запятой.

h1 {
  color: #118dcc;
  font-family: Arial, sans-serif;
  font-size: 32px;
  text-align: center;
}

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

Создай папку StyleStart_10 (10 — номер места). Сохрани index.html и style.css в эту папку, тип «Все файлы», кодировка UTF-8.

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

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

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

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

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

Практика: StyleStart_10

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

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

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

Шесть диагностических баллов: оба файла в одной папке; в head есть link; в style.css не меньше трёх правил; использованы color, font-family, font-size, text-align; ученик объясняет разделение содержимого и оформления; правка видна после сохранения и F5. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: четвёртое правило; кратко объяснить отличие строчного style от внешнего файла; почему flex/grid сегодня не нужны.

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

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

1. Зачем отделяют содержимое HTML от оформления CSS?
2. Как подключить внешний файл стилей? Какие атрибуты нужны у link?
3. Из каких частей состоит правило CSS? Приведи короткий пример.

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

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

§ 8, фрагмент о CSS и правилах. Письменно: 1) зачем отделяют содержимое и оформление; 2) как записать link для style.css; 3) из каких частей состоит правило CSS (с примером). По желанию — дописать правило в StyleStart. Flex, grid и сложные макеты не задаются. Установка программ дома не требуется.

Источники

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

MDN Web Docs: Getting started with CSS, элемент link, CSS first steps.

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