Skip to content

lesson02.md

Latest commit

 

History

History
226 lines (154 loc) · 15.1 KB

lesson02.md

File metadata and controls

226 lines (154 loc) · 15.1 KB
Raw

Урок 2. Блочные и строчные элементы. div и вложенность

Коротко о прошлом уроке

В Уроке 1 мы разобрали основы: тег — это команда браузеру в угловых скобках, у большинства тегов есть открывающая и закрывающая часть (<p>...</p>), у некоторых — только самозакрывающаяся форма (<img>). Мы познакомились с первыми тегами — h1–h6, p, a, img — и с тем, как подключается CSS (внешний файл, <style> в <head>, inline через атрибут style), а также с базовой структурой CSS-правила: селектор → свойство → значение.

Сегодня разберём, почему эти теги на странице ведут себя по-разному — одни выстраиваются друг под другом, другие остаются в строке текста, — и познакомимся с <div>, универсальным контейнером, без которого не обходится ни одна веб-страница.

Блочные и строчные элементы

Блочный элемент — элемент, который браузер по умолчанию выводит как отдельный «блок»: занимает всю доступную ширину родителя и всегда начинается с новой строки. Из уже знакомых тегов блочными являются h1–h6 и p.

Строчный (inline) элемент — элемент, который «встраивается» в текущую строку текста, занимает ровно столько места, сколько нужно его содержимому, и не создаёт разрыва строки сам по себе. Из знакомых тегов строчным является a. Тег img занимает особое положение — технически это «замещаемый» строчный элемент: он остаётся в строке текста, но при этом (в отличие от обычных строчных элементов вроде a) у него работают свойства width/height.

Понимать эту разницу важно по одной простой причине: она напрямую определяет, как будет выглядеть страница. Заголовки и абзацы всегда идут вертикально, один под другим — это блочное поведение. Ссылки и мелкие изображения остаются частью текста в строке — это строчное поведение.

Ментальная модель: полки и коробки

Представь веб-страницу как книжную полку. Блочные элементы — это коробки: каждая занимает отдельное место по вертикали, ставится одна под другой, и если коробка широкая — она займёт всю ширину полки. Строчные элементы — это книги или фигурки, которые ставятся рядом друг с другом на одной полке: можно поставить несколько книг подряд, пока не закончится место, — тогда следующие автоматически «переедут» на новую полку.

Демонстрация: h1 и p — блочные элементы

<h1>Заголовок: блочный элемент</h1>
<p>Это абзац — ещё один блочный элемент. Обрати внимание, что он начинается с новой строки.</p>
h1 {
  color: white;
  background-color: #2b6cb0;
}

p {
  color: #222;
  background-color: #f0f0f0;
}

Оба фона растянутся на всю ширину страницы, и p окажется строго под h1, даже если текста в нём совсем немного, — именно так ведёт себя «коробка» на полке.

Демонстрация: span и a — строчные элементы

Познакомимся ещё с одним тегом — <span>. Это строчный аналог div: сам по себе он ничего не значит, просто позволяет выделить кусок текста внутри строки, чтобы стилизовать именно его.

<p>Текст перед <span>встроенным span</span> и <a href="#">ссылкой</a> в одной строке.</p>
span {
  background-color: yellow;
  color: black;
}

a {
  background-color: yellow;
  color: red;
}

Фон здесь охватывает только сам текст внутри span и a — «жёлтый кусочек» посреди строки, а не всю ширину страницы, как было с h1/p.

Демонстрация: img — строчный, но «замещаемый»

<p>Текст слева <img src="https://picsum.photos/100" alt="Картинка" /> и текст справа.</p>

Картинка встанет прямо в строку между двумя кусками текста — как и положено строчному элементу. Но если задать ей width/height, размер реально изменится — обычный строчный элемент (например, span) так себя не ведёт, у него width/height попросту не работают, пока он остаётся строчным.

Тег div — универсальный контейнер

<div> — блочный контейнер общего назначения. Он не несёт никакого смысла сам по себе (в отличие от h1 или p, которые сообщают браузеру и поисковым системам, что перед ними заголовок или абзац) — зато он идеально подходит для того, чтобы сгруппировать несколько элементов вместе и применить стили ко всей группе разом.

Представь карточку профиля: фотография, имя, короткое описание. Обернув всё это в один div, можно задать этому div фон, отступы, размеры — и вся карточка получит единое оформление, как цельный блок, а не набор разрозненных элементов.

<div>
  <h1>Имя</h1>
  <p>Описание</p>
</div>

Простая стилизация div

div — блочный элемент, поэтому к нему применимы width и height. Если width не задан явно, div растянется на всю ширину родителя.

<div>Это мой div</div>
div {
  width: 400px;
  height: 200px;
  background-color: #f7c6c6;
  color: #222;
}

Результат — прямоугольник 400×200px с заданным фоном. Если ширина окна браузера меньше 400px, блок будет выходить за границы экрана — это нормально, про адаптивность мы поговорим в отдельном уроке позже.

Вложенность: div как родитель

Вложенность — когда один элемент находится внутри другого. Вся структура HTML-документа устроена как дерево: у элементов есть родители и дети. div очень часто выступает именно родителем — контейнером для группы дочерних элементов.

<div>
  <h1>Иван Иванов</h1>
  <p>Короткое описание: студент, изучаю веб.</p>
  <img src="https://picsum.photos/120" alt="avatar" />
</div>
div {
  width: 360px;
  background-color: #e6f7ff;
  padding: 10px;
}

h1 {
  color: #1a3d6b;
}

p {
  color: #333;
}

img {
  display: block;
  margin-top: 10px;
}

Две новые детали здесь заслуживают отдельного объяснения:

  • padding — внутренний отступ элемента, расстояние между границей блока и его содержимым внутри. Подробно свойства блочной модели (padding, margin, border) разберём в следующем уроке — здесь достаточно знать, что без него содержимое div прижималось бы вплотную к его краям.
  • display: block у img — картинка по умолчанию строчная (см. предыдущий раздел), и если рядом с ней есть текст, она встанет прямо в строку. display: block меняет её поведение на блочное — картинка переходит на новую строку и ведёт себя как отдельный блок, а не часть текстовой строки.

Наследование стилей — что переходит от родителя к потомку, а что нет

Важный нюанс, который легко упустить: не все свойства, заданные родителю, автоматически применяются к вложенным элементам.

Свойство Наследуется от родителя?
color Да
font-size, font-family Да
text-align Да
background-color Нет
width, height Нет
padding, margin, border Нет

Например, если задать div цвет текста (color) — все вложенные h1 и p унаследуют этот цвет текста, если не переопределят его собственным правилом. Но если задать div background-color — это не «прольётся» на дочерние элементы, фон останется только у самого div как у контейнера. Это разделение полезно держать в голове с самого начала — оно объясняет неожиданное на первый взгляд поведение стилей, с которым вы ещё не раз столкнётесь.

Вопросы для проверки

  1. Чем блочный элемент отличается от строчного?
  2. Приведи два примера блочных элементов из уже пройденных тегов.
  3. Приведи два примера строчных элементов из уже пройденных тегов.
  4. Почему важно понимать разницу между блочными и строчными элементами?
  5. Какой тег используют как универсальный контейнер для группировки элементов?
  6. Что делает тег <div> сам по себе, без каких-либо стилей?
  7. Какое CSS-свойство меняет цвет фона у элемента?
  8. Какие три простых свойства можно задать div, чтобы увидеть его на странице?
  9. Можно ли вставить картинку внутрь div? Изменится ли при этом её поведение как элемента?
  10. Что означает «вложенность элементов», и какое свойство наследуется от родителя к потомку, а какое — нет?

Практические задания

Задание 1. Первые блоки

Создай два блока <div>:

  1. Первый — шириной 200px, высотой 200px, цвет фона lightblue.
  2. Второй — шириной 200px, высотой 200px, цвет фона lightcoral.

Задание 2. Карточка профиля (вложенность)

Создай div шириной 360px с фоном antiquewhite, и помести внутрь него:

  1. Заголовок <h1> с именем — выровняй по центру.
  2. Абзац <p> с коротким описанием, внутри которого есть ссылка <a> на https://example.com.
  3. Картинку <img src="https://picsum.photos/200" alt="avatar">.

Стилизуй: заголовку задай свой цвет текста, абзацу — цвет фона (отличный от фона div), ссылке — отдельный цвет текста.

Задание 3. Мини-словарь терминов (span)

Создай div с заголовком <h2>«Основные теги HTML» (выровненным по центру), а под ним — три абзаца, в каждом из которых название тега выделено через <span>, например:

<p><span>div</span> — контейнер для других элементов.</p>

Для всех абзацев задай размер шрифта 16px. Для текста внутри span — размер 18px и жирное начертание (font-weight: bold).

Задание 4. Тематические карточки — объединяющая практика

Создай три блока <div> шириной 500px каждый — например, карточки о животных. В каждом блоке размести:

  • заголовок <h2> с названием животного (по центру);
  • картинку <img> шириной 300px (по центру);
  • абзац <p> с кратким описанием (по левому краю);
  • ссылку <a> на статью об этом животном в Википедии (по центру).

Задай карточкам разные фоны: lightgreen, lightyellow, lightpink.

Предыдущий урок | Следующий урок