Введение
В этом практическом занятии участники изучат основы применения стилей отступов в 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.
