• 0

    • Корзина пуста

Личный кабинет

Обтекание блоков

Глава курса «HTML и CSS»

Книга по HTML и CSS: от первой страницы до адаптивной вёрстки. Главы по разделам, тесты после каждой главы и итоговая игра.

float: left или right заставляет блок обтекаться текстом. clear: both сбрасывает обтекание. Для макетов чаще Flexbox и Grid.

CSS
img.float-left {
  float: left;
  margin: 0 16px 16px 0;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
Игра Упражнение

Бесплатно, вход не требуется

Содержание книги

Всего: 43 глав

Книга, игра и упражнения доступны без регистрации и покупки.

Раздел №1. ВведениеЛюбая страница в браузере — это HTML-документ, стили CSS и при необходимости скрипты JavaScript. Браузер загружает файлы с сервера, строит DOM-дерево и отображает результат на экране.Откройте инструмен...
Читать главу
Игра Упражнение
Раздел №2. Изучаем HTMLДля вёрстки удобно использовать редактор кода с подсветкой синтаксиса. Популярный бесплатный вариант — Visual Studio Code: установите его с официального сайта и добавьте расширения для HTML и CSS.С...
Читать главу
Игра Упражнение
Минимальная страница содержит объявление `<!doctype html>`, корневой тег `<html>`, секции `<head>` и `<body>`. В `<head>` указывают кодировку и заголовок вкладки, в `<body>` — видимый...
Читать главу
Игра Упражнение
Заголовки `<h1>`–`<h6>` задают иерархию текста: один `<h1>` — главный заголовок страницы, далее подзаголовки уровней 2–6. Не пропускайте уровни без необходимости — так проще навигация и SEO.Заголовки бл...
Читать главу
Игра Упражнение
Абзацы оформляют тегом `<p>`, перенос строки — `<br>`. Для акцента: `<strong>` (важное), `<em>` (выделение), `<mark>` (подсветка). Тег `<span>` — строчный контейнер без смысловой нагру...
Читать главу
Игра Упражнение
Маркированный список — `<ul>` с пунктами `<li>`, нумерованный — `<ol>`. Списки определений: `<dl>`, `<dt>` (термин), `<dd>` (описание).Списки удобны для меню, шагов инструкции и перечи...
Читать главу
Игра Упражнение
Изображение вставляют тегом `<img>` с атрибутами `src` (путь к файлу) и `alt` (описание для доступности). Можно задать `width` и `height`, чтобы страница не «прыгала» при загрузке.Храните картинки в папке проекта и...
Читать главу
Игра Упражнение
Ссылки создаются тегом `<a href="...">`. Атрибут `href` может указывать на другую страницу, якорь `#id`, email `mailto:` или телефон `tel:`.Текст ссылки должен быть понятным: «Скачать программу», а не «на...
Читать главу
Игра Упражнение
Контент группируют блочными `<div>` и строчными `<span>`. В HTML5 есть семантические теги: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer&g...
Читать главу
Игра Упражнение
Тег `<iframe>` встраивает другую HTML-страницу или виджет внутрь вашей: карту, видео с другого сервиса, форму. Атрибут `src` указывает адрес встраиваемого документа.Не злоупотребляйте iframe без необходимости — это...
Читать главу
Игра Упражнение
Таблицы строят из `<table>`, строк `<tr>`, ячеек `<td>` и заголовков `<th>`. Для подписи используйте `<caption>`. Таблицы подходят для табличных данных, а не для всей вёрстки страницы.Группи...
Читать главу
Игра Упражнение
Форма `<form>` отправляет данные на сервер. Поля: `<input>`, `<textarea>`, `<select>`, кнопки `<button>`. Атрибуты `action` и `method` задают адрес и способ отправки (GET или POST).Связывайт...
Читать главу
Игра Упражнение
HTML5-тег `<video>` воспроизводит ролики. Атрибут `controls` показывает панель управления, `poster` — картинку до старта. Источники задают через `<source src="..." type="video/mp4">`.Добав...
Читать главу
Игра Упражнение
Тег `<audio>` работает аналогично `<video>`, но для звука. Атрибуты `controls`, `loop`, `muted` управляют воспроизведением. Форматы часто: MP3, OGG, WAV.Для подкастов и фоновой музыки на лендингах используйте...
Читать главу
Игра Упражнение
Favicon — маленькая иконка во вкладке браузера. Подключают в `<head>` через `<link rel="icon" href="favicon.ico" type="image/x-icon">`. Можно использовать PNG или SVG.Подготовьте...
Читать главу
Игра Упражнение
Спецсимволы в HTML записывают мнемониками: `<` → `<`, `>` → `>`, `&` → `&`, неразрывный пробел → ` `, копирайт → `©`.Мнемоники нужны, чтобы браузер не воспринимал символы...
Читать главу
Игра Упражнение
Раздел №3. Изучаем CSSCSS-правило: селектор и блок { свойство: значение; }. Селектор указывает, к каким элементам применить стили.CSS отделяет оформление от HTML-разметки.CSSp { color: #333; font-size: 16px; }
Читать главу
Игра Упражнение
Три способа: внешний файл через link, блок style в head, inline style на элементе. Для проектов лучше внешний файл — проще поддерживать и кешировать.HTML<link rel="stylesheet" href="css/style.css"&...
Читать главу
Игра Упражнение
Шрифт задают свойством font-family. Можно подключить файл через @font-face или Google Fonts. Указывайте запасные шрифты: Roboto, Arial, sans-serif.CSS@font-face { font-family: "MyFont"; src: url("fonts/myf...
Читать главу
Игра Упражнение
Оформление текста: font-size, font-weight, line-height, text-align, text-decoration, color. Межстрочный интервал line-height: 1.5 улучшает читаемость.CSSh1 { font-size: 2rem; font-weight: 700; text-align: center; } p { l...
Читать главу
Игра Упражнение
Частые единицы: px, %, em, rem, vw и vh. rem удобен для масштабируемых интерфейсов — считается от корневого font-size.CSS.box { width: 80%; padding: 1rem; font-size: 1.125rem; }
Читать главу
Игра Упражнение
Селектор по тегу, классу (.menu), id (#header). Комбинаторы: nav a, ul > li. Псевдоклассы: :hover, :focus, :nth-child().CSS.btn { padding: 8px 16px; } .btn:hover { background: #2563eb; } nav a { text-decoration: none;...
Читать главу
Игра Упражнение
Списки оформляют через list-style-type и list-style-image. list-style: none часто используют для меню навигации.CSSul.menu { list-style: none; padding: 0; } ul.menu li { display: inline-block; margin-right: 16px; }
Читать главу
Игра Упражнение
Блоковая модель: width, height, margin, padding, border. box-sizing: border-box включает padding и border в заданную ширину.CSS.card { width: 300px; padding: 20px; margin: 16px auto; border: 1px solid #ddd; box-sizing: b...
Читать главу
Игра Упражнение
Фон блока: background-color, background-image, background-size, background-position, background-repeat.CSS.hero { background-color: #1e293b; background-image: url("bg.jpg"); background-size: cover; background-p...
Читать главу
Игра Упражнение
Линейный градиент: linear-gradient. Радиальный: radial-gradient. Градиенты задают через background или background-image.CSS.banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
Читать главу
Игра Упражнение
float: left или right заставляет блок обтекаться текстом. clear: both сбрасывает обтекание. Для макетов чаще Flexbox и Grid.CSSimg.float-left { float: left; margin: 0 16px 16px 0; } .clearfix::after { content: "&quo...
Читать главу
Игра Упражнение
position: static, relative, absolute, fixed, sticky. Свойства top, left, right, bottom смещают элемент. z-index управляет слоями.CSS.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); } .badge { position: abs...
Читать главу
Игра Упражнение
Анимации через @keyframes и animation. Плавные переходы — transition при изменении свойств, например при :hover.CSS@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { animation: fadeIn 0.5s ease; transit...
Читать главу
Игра Упражнение
transform: translate, rotate, scale, skew. transform-origin задаёт точку трансформации. Не путайте с transition и animation.CSS.icon { transform: rotate(-10deg) scale(1.2); transform-origin: center; }
Читать главу
Игра Упражнение
Раздел №4. Вёрстка страницВёрстка начинается с макета: шапка, контент, подвал. Сначала HTML-структура и семантика, затем CSS.Не верстайте «картинкой» — используйте текст и стили.Схемаheader → nav main → sections footer
Читать главу
Игра Упражнение
Создайте index.html, css/style.css, папки images и fonts. Задайте box-sizing: border-box и сброс margin у body.CSS*, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; }
Читать главу
Игра Упражнение
Меню в header и nav. Ссылки ul/li/a оформляют через Flexbox: display flex и gap.CSSnav ul { display: flex; list-style: none; gap: 1rem; padding: 0; }
Читать главу
Игра Упражнение
Поле input type="file" выбирает файл. Атрибут accept ограничивает типы: image/* или .pdf.HTML<label>Загрузить фото<input type="file" name="photo" accept="image/*"></...
Читать главу
Игра Упражнение
Галерею собирают на CSS Grid с repeat(auto-fit, minmax(200px, 1fr)). Ячейка — figure с img и figcaption.CSS.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
Читать главу
Игра Упражнение
Подвал footer содержит копирайт и контакты. После просмотра этих уроков у вас уже будет полное понимание того, как верстаются web-страницы, и вы сможете легко верстать несложные сайты.Закрепите навыки: сверстайте лендинг...
Читать главу
Игра Упражнение
Раздел №6. Адаптивная вёрсткаАдаптивная вёрстка подстраивает макет под ширину экрана. Используют %, max-width, Flexbox, Grid и медиа-запросы. Mobile-first: база для узкого экрана, расширения через min-width.CSS.container...
Читать главу
Игра Упражнение
Медиа-запрос @media (min-width: 768px) применяет стили от заданной ширины. Можно проверять ориентацию и prefers-reduced-motion.CSS@media (min-width: 768px) { .menu { flex-direction: row; } } @media (max-width: 767px) { ....
Читать главу
Игра Упражнение
На mobile меню сворачивают в бургер или вертикальный список. Уменьшайте padding и font-size в медиа-запросах.CSS@media (max-width: 767px) { header { padding: 12px; } nav ul { flex-direction: column; } }
Читать главу
Игра Упражнение
На телефоне — одна колонка, на десктопе — две-три. Картинки: max-width 100% и height auto.CSSimg { max-width: 100%; height: auto; } @media (min-width: 992px) { .content { display: grid; grid-template-columns: 2fr 1fr; ga...
Читать главу
Игра Упражнение
Пагинация должна быть удобна на touch: зона нажатия около 44px. На узком экране сокращайте число видимых пунктов.CSS.pagination a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align:...
Читать главу
Игра Упражнение
Footer на mobile: колонки становятся вертикальным стеком. Увеличьте line-height и отступы между блоками.CSS@media (max-width: 767px) { footer .columns { flex-direction: column; gap: 24px; } }
Читать главу
Игра Упражнение
Вы прошли путь от первой HTML-страницы до адаптивной вёрстки. Практикуйтесь: сверстайте лендинг и проверьте в DevTools.Дальше — JavaScript, фреймворки или Bootstrap.Чек-лист✓ Семантический HTML ✓ Отдельный CSS ✓ Адаптив...
Читать главу
Игра Упражнение

Интерактивная игра

Финальный тест в формате Duolingo: 645 вопросов по всем темам курса.

Начать игру
Предыдущий урок
К содержанию курса
Следующий урок

Курс

HTML и CSS

Все главы Интерактивная игра

Компания

Курсы

© 2026 Aduca — Все права защищены.