Применить стили отступов в CSS

Введение

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

Практическое занятие начинается с создания базовой структуры HTML5-документа, вводится три элемента <div>, которые будут служить полотном для демонстрации стилей отступов. Участники последовательно добавляют встроенные стили, исследуют различные синтаксисы значений отступов и применяют отдельные свойства отступов, чтобы получить практический опыт в управлении расстоянием между элементами и проектировании макета.

Создать HTML-документ с базовой структурой

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

Откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем index.html, щелкнув правой кнопкой мыши в проводнике файлов и выбрав пункт "Новый файл".

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
  </head>
  <body>
    <div>First Paragraph</div>
    <div>Second Paragraph</div>
    <div>Third Paragraph</div>
  </body>
</html>

Разберём основные компоненты этой структуры HTML:

<!DOCTYPE html> объявляет, что это HTML5-документ
<html> - корневой элемент HTML-страницы
<head> содержит метаданные о документе
<meta charset="UTF-8"> задает кодировку символов
<meta name="viewport"> обеспечивает правильное отображение на различных устройствах
<body> содержит видимый контент страницы

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

Сохраните файл, нажав Ctrl+S или используя значок сохранения в WebIDE.

Добавить встроенные стили в HTML-элементы

В этом шаге вы научитесь добавлять встроенные стили в HTML-элементы с использованием атрибута style. Встроенные стили позволяют применить CSS непосредственно к отдельным HTML-элементам, что является быстрым способом добавления стиля к веб-странице.

Откройте файл index.html, который вы создали на предыдущем шаге, с использованием WebIDE. Измените элементы <div> так, чтобы они содержали встроенные стили, демонстрирующие свойства отступов:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
  </head>
  <body>
    <div style="margin: 20px; background-color: lightblue;">
      First Paragraph
    </div>
    <div style="margin: 30px; background-color: lightgreen;">
      Second Paragraph
    </div>
    <div style="margin: 40px; background-color: lightsalmon;">
      Third Paragraph
    </div>
  </body>
</html>

Основные моменты о встроенных стилях:

Атрибут style добавляется непосредственно к HTML-элементу
Свойства CSS записываются внутри кавычек
Несколько свойств разделяются точкой с запятой
В этом примере мы добавили свойство margin и background-color, чтобы сделать отступы более заметными

Заметьте, как каждый элемент <div> теперь имеет разный размер отступа и цвет фона. Свойство margin создает пространство вокруг элемента, отталкивая другие элементы.

Сохраните файл, нажав Ctrl+S или используя значок сохранения в WebIDE.

Исследовать синтаксис свойства отступов

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
    <style>
      .single-value {
        margin: 20px; /* Все стороны 20px */
        background-color: lightblue;
      }

      .two-values {
        margin: 10px 30px; /* Верх/низ 10px, Левый/правый 30px */
        background-color: lightgreen;
      }

      .four-values {
        margin: 5px 10px 15px 20px; /* Верх, Правый, Нижний, Левый */
        background-color: lightsalmon;
      }
    </style>
  </head>
  <body>
    <div class="single-value">Single Value Margin</div>
    <div class="two-values">Two Value Margin</div>
    <div class="four-values">Four Value Margin</div>
  </body>
</html>

Пояснение синтаксиса отступов:

Одно значение: margin: 20px;
- Применяет отступ 20px к всем четырем сторонам (верх, правый, нижний, левый)
Два значения: margin: 10px 30px;
- Первое значение (10px) задает отступы сверху и снизу
- Второе значение (30px) задает отступы слева и справа
Четыре значения: margin: 5px 10px 15px 20px;
- Первое значение (5px): Отступ сверху
- Второе значение (10px): Отступ справа
- Третье значение (15px): Отступ снизу
- Четвёртое значение (20px): Отступ слева

Примечание: Мы переключились на использование внутреннего тега <style>, чтобы продемонстрировать различные синтаксисы отступов, что более гибко, чем встроенные стили.

Сохраните файл, нажав Ctrl+S или используя значок сохранения в WebIDE.

Применить разные значения отступов

В этом шаге вы изучите, как разные значения отступов могут создавать различные эффекты расстояния в веб-дизайне. Откройте файл index.html в WebIDE и обновите стили, чтобы продемонстрировать значения отступов, используя пиксели, проценты и другие единицы измерения:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
    <style>
      .pixel-margin {
        margin: 20px; /* Фиксированный отступ в пикселях */
        background-color: lightblue;
        border: 1px solid blue;
      }

      .percentage-margin {
        margin: 5%; /* Отступ в процентах */
        background-color: lightgreen;
        border: 1px solid green;
      }

      .mixed-margin {
        margin: 10px 5%; /* Смешанный отступ (пиксели и проценты) */
        background-color: lightsalmon;
        border: 1px solid red;
      }

      .container {
        width: 80%;
        margin: 0 auto; /* Центрирование контейнера */
        background-color: #f0f0f0;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="pixel-margin">Pixel Margin (20px)</div>
      <div class="percentage-margin">Percentage Margin (5%)</div>
      <div class="mixed-margin">
        Mixed Margin (10px top/bottom, 5% left/right)
      </div>
    </div>
  </body>
</html>

Виды значений отступов объяснены:

Отступы в пикселях (20px):
- Фиксированные, точные расстояния -一致 across different screen sizes
- Хорошо для точного управления макетом
Отступы в процентах (5%):
- Относительно ширины родительского контейнера
- Реагируют на размер экрана и адаптируются к разным размерам
- Меняются в зависимости от ширины контейнера
Смешанные отступы (10px 5%):
- Комбинируют фиксированные и относительные единицы
- Отступы сверху и снизу в пикселях
- Отступы слева и справа в процентах
Центрирование с использованием отступов (margin: 0 auto):
- 0 для отступов сверху и снизу
- auto для отступов слева и справа
- Горизонтально центрирует блочные элементы

Сохраните файл, нажав Ctrl+S или используя значок сохранения в WebIDE.

Пробовать с отдельными свойствами отступов

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Individual Margin Properties</title>
    <style>
      .box {
        width: 200px;
        background-color: lightblue;
        border: 2px solid blue;
        margin-top: 20px; /* Верхний отступ */
        margin-right: 30px; /* Правый отступ */
        margin-bottom: 40px; /* Нижний отступ */
        margin-left: 50px; /* Левый отступ */
        padding: 10px;
      }

      .individual-margins {
        display: flex;
        justify-content: space-between;
      }

      .margin-example {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
        margin-top: 10px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="individual-margins">
      <div class="box">Margin on All Sides</div>
      <div class="margin-example">Vertical Margins</div>
    </div>
  </body>
</html>

Пояснение отдельных свойств отступов:

margin-top: Управляет верхним отступом
- Задает расстояние в 20px выше элемента
margin-right: Управляет правым отступом
- Задает расстояние в 30px справа от элемента
margin-bottom: Управляет нижним отступом
- Задает расстояние в 40px ниже элемента
margin-left: Управляет левым отступом
- Задает расстояние в 50px слева от элемента

Основные наблюдения:

Каждая сторона может иметь разное значение отступа
Полезно для точного управления макетом
Позволяет точно настраивать расстояние между элементами
Может быть комбинировано с другими свойствами CSS

Совет: Отдельные свойства отступов обеспечивают более детальное управление по сравнению с сокращенным свойством margin, позволяя независимо настраивать конкретные стороны.

Сохраните файл, нажав Ctrl+S или используя значок сохранения в WebIDE.

Резюме

В этом лабаратории участники изучают основы применения стилей отступов CSS, создавая HTML-документ и исследуя различные методы стилизации. Лаборатория начинается с построения базовой структуры HTML5, вводится важные элементы, такие как <!DOCTYPE html>, <head> и <body>, и создаются три элемента <div> для демонстрации свойств отступов.

Процесс обучения продолжается с добавлением встроенных стилей непосредственно в HTML-элементы с использованием атрибута style, что дает практический подход к пониманию того, как отступы могут быть применены для управления расстоянием вокруг элементов. Участники будут экспериментировать с разными синтаксисами отступов, изучать отдельные свойства отступов и применять различные значения отступов, чтобы получить практический опыт в техниках стилизации CSS.