Урок 3. «Знакомство с CSS» — HTML и CSS
Курс: Веб-программирование, урок 3 из 12
Тема по программе: Знакомство с CSS
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта
Тема по программе: Знакомство с CSS
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта
Это сокращённое описание урока. Полные материалы — в курсе «Веб-программирование». Первый урок курса целиком можно скачать бесплатно в разделе «Бесплатно».
Цель урока
Научиться подключать CSS и управлять отступами и размерами элементов.
Что делаем на уроке
- Файл main.css и подключение тегом link в head.
- Первое правило: цвет фона body.
- Веб-инспектор (Ctrl+Shift+C): видно и HTML, и стили элемента.
- Комментарии в CSS.
- margin, padding и box-sizing; общий селектор *.
- Картинка шириной 900 px, высота считается автоматически с сохранением пропорций.
Что объяснить детям
- margin — внешний отступ, padding — внутренний.
- box-sizing: border-box включает отступы и рамку в заданную ширину — так проще считать размеры.
- Звёздочка * — общий селектор: правило применяется ко всем тегам.
Что в полном комплекте
- 12 конспектов занятий со скриншотами — по одному на урок
- Методика проведения с подробным описанием хода урока
- Готовые файлы проекта к модулям 2 и 3 — если группа отстаёт, не нужно собирать проект с нуля
Предыдущий урок — Основные HTML-теги. Следующий — Вёрстка страницы блога. Все уроки курса: Что такое веб-разработка · Основные HTML-теги · Вёрстка страницы блога · Фотогалерея: разметка · Фотогалерея: отступы и стили · Позиционирование: display и flex · Галерея: анимация и публикация · Знакомство с Photoshop · Разметка сайта по макету · Вёрстка экранов на flexbox · Завершение сайта и публикация.
