Введение в HTML

Введение

Веб-разработка — это динамично развивающийся процесс создания и поддержания веб-приложений и сайтов. В основе любой веб-страницы лежат два ключевых языка: HTML (HyperText Markup Language) и CSS (Cascading Style Sheets). HTML отвечает за структуру и содержание веб-страниц, определяя их логическую организацию. CSS используется для оформления и стилизации элементов, созданных с помощью HTML. Эти языки тесно взаимосвязаны и дополняют друг друга, позволяя создавать нечто большее, чем <h1>Hello, World</h1>.

Предварительные требования

Для успешного прохождения лекции достаточно уметь работать с браузером.

Что такое HTML и CSS?

HTML — это язык гипертекстовой разметки, используемый для создания структуры веб-страниц. Он состоит из тегов, которые определяют элементы страницы.

Основная задача HTML — организовать контент так, чтобы браузер мог его корректно отобразить. HTML-документ имеет древовидную структуру, включающую заголовочную часть <head> и тело документа <body>. В <head> указывается метаинформация (заголовок, кодировка, стили, скрипты), которая не отображается, но влияет на поведение страницы. В <body> находится контент: текст, изображения, видео, таблицы и т.д.

CSS — это язык стилей для оформления веб-страниц. С помощью CSS задаются цвета, шрифты, размеры, отступы и другие визуальные характеристики. Это позволяет отделить содержание от оформления, делая разработку гибкой. CSS поддерживает каскадность, благодаря чему стили наследуются от родительских элементов к дочерним.

Основы HTML

Что такое теги?

Теги оборачивают текст или другие теги, задавая свойства своим дочерним элементам. Изучение HTML сводится к знанию тегов. Для самостоятельного изучения рекомендуем ru.w3docs.com.

Пример псевдокода:

<tag>
  Теги оборачивают текст или другие теги.
  Такие теги называют <b>парными</b>.
</tag>

Парные теги должны иметь закрывающий тег с символом "/" в начале

<tag attribute1#"aboba" attribute2>
  У тегов могут быть специальные свойства - атрибуты.
  Атрибуты всегда могут задаваться строкой, однако некоторые могут
  задавать булево значение своим присутствием (как attribute2).
  У закрывающего тега атрибуты не указываются
</tag>

<singleTag attr#"aboba" />
Некоторые теги могут быть одиночными. Обычно они не
подразумевают прямое воздействие на свой внутренний контент,
хотя и могут его содержать. Именно атрибуты помогают управлять
ими.

<!&mdash; А это специальный тег для комментариев &mdash;>

Валидный HTML-документ — это документ, который браузер корректно обрабатывает. Например, следующий код валиден:

Hello, Aboba!

Пустой документ тоже валиден:

Однако в реальной разработке нужно использовать теги, задающие поведение страницы. Шаблонный код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width#device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Content here
  </body>
</html>

Разберём:

<!DOCTYPE html> — указывает спецификацию (например, HTML5).

<html> — содержит весь контент страницы.

<head> и <body> — метаинформация и отображаемый контент.

<meta> — сообщает браузеру непечатаемую информацию (кодировка, описание, ключевые слова).

<title> — задаёт название страницы в браузере или поисковой выдаче.

Атрибуты

Атрибуты указываются в начальном теге:

<tag attr#"value">
  Content
</tag>

Атрибуты делятся на обязательные (необходимы для работы элемента) и необязательные (изменяют поведение или вид). Типы атрибутов:

Базовые атрибуты

Применяются к любому тегу:

Стандартные атрибуты

Определены в спецификации HTML:

Data-атрибуты

Используются для взаимодействия с CSS и JS:

<div data-custom-attribute#"some-value"></div>
Атрибуты событий

Связывают JavaScript с событиями:

<button onclick="alert('Клик!')">Нажми меня</button>
Пользовательские атрибуты

Пример:

<button aboba="bebra">Ерунда какая-то</button>

Такие атрибуты не рекомендуется использовать, так как они нарушают совместимость.

Типографика

Форматирование текста

Для форматирования текста используются парные теги:

Эти стили можно переопределить через CSS.

Заголовки

Заголовки от <h1> до <h6> обозначают иерархию контента. <h1> — самый важный, <h6> — наименее значимый.

Рекомендации:

Параграфы

Тег <p> создаёт параграфы с вертикальными отступами для разделения текста.

Списки

Нумерованные списки

Используется <ol> (ordered list) с элементами <li> (list item):

<ol>
  <li>Абоба 1</li>
  <li>Абоба вторая</li>
  <li>Третья абоба</li>
</ol>
Маркированные списки

Используется <ul> (unordered list) с <li>:

<ul>
  <li>Абоба 1</li>
  <li>Абоба номер три3</li>
  <li>А важен ли порядок абоб?</li>
</ul>

Ссылки

Тег <a> создаёт гиперссылки. Атрибуты:

Пример:

<a href="some_aboba.org" target="_blank" rel="noreferrer">ABOBA!</a>

Мультимедиа

Изображения

Одиночный тег <img> вставляет изображения. Атрибуты:

Видео

Парный тег <video> вставляет видео. Атрибуты:

Пример с <source> для кроссбраузерности:

<video controls>
  <source src="aboba.mp4" type="video/mp4" />
  <source src="aboba.webm" type="video/webm" />
  Ваш браузер не поддерживает видео.
</video>

Аудио

Парный тег <audio> аналогичен <video>.

Контейнеры

Контейнеры группируют элементы, часто для стилизации.

Блочные контейнеры

Тег <div> — блочный контейнер:

<div>
  <tag>Какое-то содержимое тега</tag>
  Абоба :)
</div>

Строчные контейнеры

Тег <span> — строчный контейнер:

<span>Какой-то не очень большой текст про абобу</span>

Семантические теги

Семантические теги (HTML5) улучшают структуру и SEO:

Пример:

<article>
  <header>
    <h2>Заголовок статьи</h2>
  </header>
  <section>
    <h3>Подзаголовок статьи</h3>
    <p>Подзаголовок статьи</p>
  </section>
  <footer>
    <p>Автор: Абобус Обыкновенный</p>
  </footer>
</article>

Таблицы

Таблицы представляют данные в виде сетки. Теги:

Пример:

<table>
  <caption>
    Пример таблицы
  </caption>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка 1.1</td>
      <td>Ячейка 1.2</td>
      <td>Ячейка 1.3</td>
    </tr>
    <tr>
      <td>Ячейка 2.1</td>
      <td>Ячейка 2.2</td>
      <td>Ячейка 2.3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Подвал таблицы</td>
    </tr>
  </tfoot>
</table>

Атрибуты colspan и rowspan объединяют ячейки.

Формы

Формы собирают пользовательские данные. Тег <form> с атрибутами:

Пример:

<form action="/submit" method="POST">
  <!&mdash; Элементы формы будут здесь &mdash;>
</form>

Элементы формы

Текстовое поле

Тег <input type="text">. Атрибуты:

Пример:

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="Введите ваше имя" />
</form>
Пароль

Тег <input type="password">. Атрибуты:

Пример:

<form action="/submit" method="POST">
  <input type="password" name="password" placeholder="Введите пароль (он будет скрыт)" />
</form>
Кнопка отправки

Теги <input type="submit"> или <button type="submit">. Атрибут:

Пример:

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="Введите ваше имя" />
  <input type="submit" value="Отправить" />
</form>
Кнопка сброса

Теги <input type="reset"> или <button type="reset">. Атрибут:

Пример:

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="Введите ваше имя" />
  <input type="reset" value="Сбросить" />
</form>
Флажки

Тег <input type="checkbox">. Атрибут:

Пример:

<form action="/submit" method="POST">
  <input type="checkbox" name="aboba1">Я согласен с абобой =1</input>
  <input type="checkbox" name="aboba2">Я согласен с абобой =2</input>
  <input type="checkbox" name="aboba3">Я согласен с абобой =3</input>
  <input type="submit" value="Отправить">
</form>
Радиокнопки

Тег <input type="radio">. Атрибут:

Пример:

<form action="/submit" method="POST">
  <input type="radio" name="gender" value="male">Мужчина</input>
  <input type="radio" name="gender" value="female">Женщина</input>
  <!&mdash; Либо 1, либо 2, но не оба вместе! &mdash;>
  <input type="submit" value="Отправить">
</form>
Текстовая область

Парный тег <textarea>. Атрибуты:

Пример:

<form action="/submit" method="POST">
  <textarea name="message" rows="4" cols="50" placeholder="Введите ваше сообщение про абобу"> </textarea>
  <input type="submit" value="Отправить" />
</form>
Выбор из списка

Парный тег <select> с <option>. Атрибут:

Пример:

<form action="/submit" method="POST">
  <select name="options">
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
  </select>
  <input type="submit" value="Отправить" />
</form>

Формы — важный инструмент для взаимодействия с пользователями, позволяющий создавать удобные интерфейсы для ввода данных.

Основы HTML это хорошо, но без стилей веб-страницы выглядят примитивно. За визуальное оформление отвечает CSS (Cascading Style Sheets) — язык таблиц стилей, который делает сайты такими, какими мы привыкли их видеть.

Основные концепции CSS

CSS (Cascading Style Sheets) — это язык стилей, используемый для оформления HTML-документов. Он позволяет отделить содержимое страницы от её визуального представления, упрощая поддержку и структурирование кода.

CSS был впервые предложен Хоконом Виум Лиеном в 1996 году. CSS2 появился в 1998 году, а CSS3 (1999) разделён на модули для ускорения развития. Основные элементы CSS:

Синтаксис CSS состоит из правил: селектор и блок объявлений в фигурных скобках.

Подключение CSS к HTML

Существует три способа подключения CSS к HTML, каждый со своими плюсами и минусами.

Встроенные стили

Применяются через атрибут style в теге. Подход удобен для быстрого тестирования, но затрудняет поддержку кода.

<p style="color: red; font-size: 20px;">Это текст с встроенными стилями</p>

На данный момент нам неважно какие свойства тут задаются, хотя если уровень читателя владения английским позволяет, то можно догадаться за что отвечает большинство свойств CSS. Заметим, что свойства должны быть разделены символом ;, а значения присваиваются с помощью символа :.

Однако такой способ не подойдёт, если нам требуется написать больше 5 стилей, ведь тогда станет абсолютно нечитаемой.

Внутренние стили

Внутренние стили размещаются внутри тега <style>. Этот метод удобен для стилизации одной страницы, но не подходит для больших проектов, где требуется повторное использование стилей.

Выглядит это так:

<style>
  p {
    color: blue;
    font-size: 18px;
  }
</style>

Внешние стили

Внешние стили подключаются через ссылку на отдельный CSS-файл с помощью тега <link>. Это наиболее распространенный и рекомендуемый способ, так как он позволяет разделить содержание и стили, а также переиспользовать одни и те же стили на нескольких страницах. В таком случае все стили хранятся в отдельном файле с расширением .css.

Выглядит это так:

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

Обратим внимание на некоторые вещи. Во-первых, тег <link> одиночный и должен распологаться в заголовочной части. Во-вторых, у него есть 2 атрибута:

Далее мы будем придерживаться именно этого подхода.

Селекторы

В прошлой главе мы приняли решение добавлять именно CSS—файлы. Однако, если в случае со встроенными стилями достаточно понятно к какому элементу они применятся, то для внутреннего и внешнего подхода используются селекторы.

В одном из предыдущих листингов мы уже кинули небольшую затравочку по поводу этого, однако рассмотрим общую структуру одного элемента таблицы стилей на примере псевдо-кода:

селектор {
  правило1: значение1;
  правило2: значение2;
  правило3: значение3;
  /** ... и так далее **/
}

Так что же такое эти селекторы? Это специальные выражения, позволяющие выбрать элементы на веб-странице для дальнейшей работы с ними.

Селекторы по тегу

Самое простое — это выбрать тег, который нам нужен и стилизовать.

p {
  color: green;
}

В таком случае стили применятся ко всем тегам <p> в документе

Селекторы по классу

Как вы помните, одним из базовых атрибутов в HTML является class. Если его применить к тегу, то в стилях можно будет к нему обращаться.

Например, если есть такой HTML-код:

<div class="someClass">Стилизованный компонент</div>
<span class="someClass"> Другой компонент, с таким же стилем </span>
<a class="someClass"> Ещё что-то с такими же стилями </a>

то в CSS к нему можно обратиться через следующий синтаксис:

.someClass {
  color: green;
}

В таком случае стили применятся ко всем тегам с классом someClass документе. Важно, что ведущую точку мы указываем только как оператор обращения к классу в CSS, но в самом значении HTML—атрибута её нет

Селекторы по идентификатору

Аналогично атрибуту class, есть базовый атрибут id, к которому можно обращаться следующим образом:

<div id="someId">Стилизованный компонент с <strong>уникальным id</strong></div>

А в CSS обращаемся через #:

#someId {
  color: green;
}

В таком случае стили применятся к тегу с id someId. В отличие от класса, идентификатор должен применяться только к одному элементу. Обычно, их используют напорядок реже, чем классы.

Комбинированные селекторы

Пусть нам дан следующий код:

<div class="container">
  <p>Boring text</p>
  <p>Boring text</p>
  <p>Boring text</p>
  <p>Boring text</p>
  <p>Boring text</p>
  <p>Boring text</p>
</div>

И пусть нам нужно стилизовать только чётных детей div.container.

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

<div class="container">
  <p>Boring text</p>
  <p class="even">Boring text</p>
  <p>Boring text</p>
  <p class="even">Boring text</p>
  <p>Boring text</p>
  <p class="even">Boring text</p>
</div>

А затем применить стили:

.even {
  color: red;
}

Однако с ростом элементов, которых нужно стилизовать, задача всё сильнее принимает невозможный характер.

Рассмотрим другой кейс:

<div class="container">
  <p>Boring text</p>
</div>
<p>Unstyled text</p>

Нам нужно стилизовать только тег внутри div.container. Эта задача также решается с помощью добавления класса:

<div class="container">
  <p class="styled-p">Boring text</p>
</div>
<p>Unstyled text</p>

и дальнейшем применением стилей:

.styled-p {
  color: red;
}

В реальной практике нет ничего зазорного в этом подходе, но когда мы дойдём до динамической генерации страниц, данный подход будет не лучшей практикой. Более того, чем больше классов, тем менее читаемым и менее удобным становится код.

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

Специально для таких случаев в CSS существуют комбинированные селекторы и псевдо—классы.

Объединение селекторов

Базовые селекторы можно склеивать в один. Таким образом можно применять определённые стили к некоторым селекторам.

Пример синтаксиса:

.aboba {
  color: red;
}

.aboba.greeny {
  color: green;
}
<p class="aboba">It's a red text</p>
<p class="aboba greeny">It's a green text</p>

Обратим внинание, что имена классов в атрибуте class нужно перечислять через пробел.

Потомки селекторов

Если нужно стилизовать селекторы, которые вложены в другие, как например:

<div class="parent">
  <div class="child">Some text about aboba</div>
  <div>
    <div class="child">Some text about aboba</div>
  </div>
</div>

то можно использовать следующий синтаксис:

.parent .child {
  color: red;
}

Обратите внимание, что в данном HTML—коде второй child обёрнут в тег без класса! Однако, такой подход выберет не только первый контейнер, но и ребенка второго. Если же нам нужно выбрать только первый контейнер (то есть ребёнка .child на первом уровне вложенности относительно .parent, а не на любом), то следует использовать следующий синтаксис:

.parent > .child {
  color: red;
}

Оператор > говорит, что нужно искать классы только среди детей, а не потомков.

Смежные селекторы

Для того, чтобы выбрать элемент, находящийся на одном уровне вложенности с данным, в CSS существует следующий синтаксис:

.item-one ~ .item-two {
  color: red;
}
<div class="container">
  <div class="item-one">Aboba</div>
  <div class="odd-stuff">Other stuff</div>
  <div class="item-two">Styled aboba</div>
</div>

Как мы видим, теги не обязательно должны идти друг за другом, однако если мы хотим достичь такого, то вместо ~ следует использовать +:

.item-one + .item-two {
  color: red;
}

Тогда:

<div class="container">
  <div class="item-one">Aboba</div>
  <div class="odd-stuff">Other stuff</div>
  <div class="item-two">Unstyled aboba</div>
</div>

но:

<div class="container">
  <div class="item-one">Aboba</div>
  <div class="item-two">Styled aboba</div>
</div>

Псевдоклассы

Зачастую некоторые кейсы рационально (а иногда и необходимо) решать с помощью псевдо-классов.

CSS-псевдоклассы — это специальные ключевые слова, которые позволяют применять стили к определённым состояниям, характеристикам или положению элементов на веб-странице.

Они позволяют создавать динамичные стили без использования JavaScript и управлять структурой или состоянием элементов.

Общий синтаксис на примере псевдокода:

селектор:псевдо-класс(если-необходим-аргумент) {
  /** стилизуем данное состояние **/
}

Примеры псевдоклассов для работы с состоянием:

Помимо прочего, псевдоклассы помогают выбрать определённые элементы из селекторов, например:

Для большего понимания устройства селекторов рекомендуем данную шпаргалку.

Каскадность и специфичность

Каскадность и специфичность являются основополагающими концепциями в CSS, которые определяют, как стили применяются к элементам на веб-странице, особенно когда несколько правил конфликтуют.

Принцип специфичности

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

Пример расчета специфичности:

#header {
  /** Сильный приоритет **/
  color: green;
}

.nav {
  /** Средний приоритет **/
  color: blue;
}

div {
  /** Слабый приоритет **/
  color: red;
}

Однако, данное правило можно обойти, если к необходимому свойству добавить директиву !important. Тогда картина будет следующей:

#header {
  /** Сильный приоритет **/
  color: green;
}

.nav {
  /** САМЫЙ СИЛЬНЫЙ ПРИОРИТЕТ **/
  color: blue !important;
}

div {
  /** Слабый приоритет **/
  color: red;
}

Примечательно, что если добавить !important к стилям всех специфичностей, то они сохранят свои приоритеты (однако такое считается плохой практикой).

Принцип каскадности

Каскадность — это механизм, который позволяет браузеру определять, какие стили применять к элементу, если к нему применяются несколько правил CSS. Правила применяются в порядке их появления в коде, что означает, что более поздние правила могут перекрывать более ранние, если они имеют одинаковую специфичность.

Например:

p {
  color: blue;
}

p {
  color: red; /** Это правило перекроет предыдущее **/
}

Единицы измерения

Как вы уже заметили, мы часто забегаем вперёд, используя некоторые неизвестные свойства. Однако зачастую достаточно просто понять их предназначение, просто передя их название с английского на русский.

Так вот, некоторые свойства принимают в себе числовые значения с указанием единицы измерения, например:

body {
  font-size: 16px;
}

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

Абсолютные единицы измерения

Абсолютные единицы имеют фиксированное значение и не зависят от других элементов или устройств вывода.

Пиксели (px)

Наиболее распространенная единица измерения в CSS. Один CSS-пиксель равен $1/96$ дюйма. На устройствах с высокой плотностью пикселей (например, Retina-дисплеях) один CSS-пиксель может соответствовать нескольким физическим пикселям.

Сантиметры (cm), миллиметры (mm), дюймы (in)

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

Относительные единицы измерения

Относительные единицы зависят от других параметров, таких как размер шрифта родительского элемента или размер viewport.

Размер шрифта родителя (em)

Относительная единица, равная размеру шрифта родительского элемента.

Размер шрифта корня (rem)

Относительная единица, равная размеру шрифта корневого элемента (обычно ). Более предсказуема, чем em, так как всегда относится к одному и тому же значению.

Проценты (%)

Задают размер относительно родительского элемента. Часто используются для создания адаптивных макетов.

Ширина (vw) и высота (vh) viewport

Более продвинутые единицы, задают 1% от ширины и высоты viewport соответственно. Полезны для создания элементов, зависящих от размера экрана. Также часто используются при создании адаптивной вёрстки.

Существуют и другие разновидности единиц, зависящих от viewport, однако в рамках данной лекции опустим их.

Доля контейнера (fr)

Представляет долю свободного пространства только в grid-контейнере (см раздел про сетки в CSS).

Глобальные значения

Любое CSS—правило может принять в себя одно из глобальных значений, таких как:

Эти свойства обеспечивают универсальность и гибкость в управлении стилями.

Типографика

В этой главе мы рассмотрим основные правила CSS для работы с текстом. Доселе мы лишь использовали примитивные color и т.п., только лишь для того чтобы показать устройство селекторов. Далее мы сделаем уклон именно на устройство самих свойств.

И вообще, мы рассмотрим далеко не все свойства (и даже не половину). Все они будут всплывать на практике по мере необходимости, поэтому авторы прикладывают ссылку на список всех свойств, функций, псевдоклассов, селекторов и т.п.

Шрифты

Font-family

Свойство font-family определяет семейство шрифтов для текста:

body {
  font-family: Arial, Helvetica, sans-serif;
}

Обратим внимание, что в CSS есть некоторые зарезервированные значения. Таковыми являются serif и sans-serif — они обозначают соответственно антикварные и гротескные шрифты, установленные в системе по умолчанию.

Также обратим внимание, что значений несколько и они перечисляются через запятую. Таким образом, мы сообщаем браузеру, что хотим получить шрифт Arial, но если не получится, то Helvetica. Если они оба будут недоступны, то взять гротеск по умолчанию.

Font-size

Свойство font-family устанавливает размер шрифта:

body {
  font-size: 16px;
}

В качестве значения принимает некоторую единицу измерения.

Font-weight

Свойство font-weight устанавливает толщину шрифта:

body {
  font-weight: 400;
}

В качестве значения принимает число от 100 до 900 или одно из ключевых слов lighter, light, normal, bold, bolder.

Font-style

Свойство font-style определяет начертание шрифта:

body {
  font-style: oblique;
}

В качестве значения принимает одно из ключевых слов italic, oblique (в отличие от italic не имитирует рукопись, а просто наклоняет текст), normal.

Цвет, выравнивание, трансформация

Color

Свойство color определяет цвет текста:

body {
  color: #affefe;
}

Цвета в CSS задаются несколькими способами:

Подробнее о цветах можно прочитать в данном разделе.

Text-align

Свойство text-align определяет выравнивание текста:

body {
  text-align: center;
}

Может принимать 4 значения: left, right, center, justify.

Text-decoration

Свойство text-decoration добавляет декортивные линии. По умолчанию none у обычного текста, однако установлен у <a>:

body {
  text-decoration: underline #f77 solid;
}

Принимает три аргумента:

Стоит отметить, что аргументы можно передавать в любом порядке, но рекомендуется именно ТИП ЦВЕТ ШТРИХ.

Text-transform

Свойство text-transform изменяет регистр текста:

body {
  text-transform: uppercase;
}

Может принимать значения uppercase для верхнего регистра, lowercase — для нижнего, capitalize — для регистра с большой буквы.

Text-shadow

Свойство text-shadow изменяет регистр текста:

body {
  text-shadow: 2px 2px 4px #000000;
}

Аргументы позиционные, то есть их нельзя менять местами. Первые два отвечают за смещение относительно осей x и y, третий за размытие тени, а последний задаёт цвет.

Интервалы

Line-height

Свойство line-height устанавливает высоту строки (по умолчанию 1.5):

body {
  line-height: 2;
}

Letter-spacing

Свойство letter-spacing регулирует расстояние между буквами:

body {
  letter-spacing: 2px;
}

Word-spacing

Свойство letter-spacing регулирует расстояние между словами:

body {
  word-spacing: 5px;
}

Понятие блочной модели

Итак, мы научились применять базовые стили для текста, однако при работе с большим числом контейнеров и более сложной организации сайта, необходимо научиться правильно располагать элементы внутри страницы.

Для этого в CSS используется блочная модель. Блочная модель (Box Model) — это фундаментальная концепция в CSS, которая описывает, как элементы HTML отображаются в браузере и как они взаимодействуют друг с другом. Понимание блочной модели критически важно для эффективной верстки веб-страниц.

Свойства блочной модели

Блочная модель состоит из четырех основных компонентов:

Каждый HTML-элемент можно представить как «коробку» с этими четырьмя слоями.

Margin

Определяет пространство вокруг элемента, за пределами границ.

.box {
  margin: 10px; /** Все стороны **/
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

Border

.box {
  border: 1px solid black;
  border-width: 2px;
  border-style: dashed;
  border-color: red;
}

Padding

.box {
  padding: 10px; /** Все стороны **/
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

Типы элементов

Существует несколько типов элементов с разными моделями. Все они регулируются свойством display.

Блочные элементы

Блочные элементы занимают всю доступную ширину, при этом начинаются с новой строки. Таковым элементом (по умолчанию) является <div>