Изучите свойства отображения в CSS

Введение

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

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

Разобраться с свойством отображения блока

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

Сначала создадим HTML-файл для демонстрации свойств отображения блока. Откройте WebIDE и создайте новый файл с именем block-display.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block Display Property</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
  </body>
</html>

Основные характеристики элементов уровня блока:

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

Проверим содержимое файла:

cat ~/project/block-display.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Display Property</title>
    <style>
       .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
</body>
</html>

Общие элементы уровня блока включают:

<div>
<p>
<h1> до <h6>
<section>
<article>
<ul> и <ol>

Применить свойство отображения строчного

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

Создадим HTML-файл для демонстрации свойств отображения строчного. Откройте WebIDE и создайте новый файл с именем inline-display.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline Display Property</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
  </body>
</html>

Основные характеристики элементов строчного уровня:

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

Проверим содержимое файла:

cat ~/project/inline-display.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Display Property</title>
    <style>
      .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
</body>
</html>

Общие элементы строчного уровня включают:

<span>
<a>
<strong>
<em>
<img>

Реализовать свойство отображения строчно-блочного

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

Создадим HTML-файл для демонстрации свойств отображения строчно-блочного. Откройте WebIDE и создайте новый файл с именем inline-block-display.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
  </body>
</html>

Основные характеристики элементов строчно-блочного уровня:

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

Проверим содержимое файла:

cat ~/project/inline-block-display.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline-Block Display Property</title>
    <style>
     .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
</body>
</html>

Общие сценарии использования строчно-блочного отображения:

Создание горизонтальных навигационных меню
Дизайн галерей изображений
Выравнивание элементов рядом с точным контролем

Использовать свойство отображения none для скрытия элементов

В этом шаге вы узнаете о свойстве display: none в CSS, которое полностью удаляет элемент из макета страницы, делает его невидимым и не занимает места.

Создадим HTML-файл для демонстрации свойства отображения none. Откройте WebIDE и создайте новый файл с именем none-display.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>None Display Property</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">
      Toggle Hidden Element
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

Основные характеристики display: none:

Полностью удаляет элемент из макета страницы
Элемент не занимает места
Отличается от visibility: hidden (которое сохраняет место, но делает элемент невидимым)
Пригоден для динамического скрытия содержимого и адаптивного дизайна

Проверим содержимое файла:

cat ~/project/none-display.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None Display Property</title>
    <style>
       .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

       .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

       .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">Toggle Hidden Element</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Общие сценарии использования display: none:

Условное скрытие элементов
Создание адаптивных меню
Управление видимостью динамического содержимого
Реализация выпадающих и切换 интерфейсов

Создать навигационное меню с помощью свойств отображения

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

Создадим HTML-файл с навигационным меню. Откройте WebIDE и создайте новый файл с именем navigation-menu.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

Основные техники, используемые в этом навигационном меню:

display: inline-block для пунктов меню
Удаление стандартной стилизации списка
Добавление эффектов наведения
Создание горизонтального макета

Проверим содержимое файла:

cat ~/project/navigation-menu.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
       .nav-menu {
            background-color: #333;
            padding: 10px;
        }

       .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

       .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

       .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

       .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Лучшие практики для навигационных меню:

Использовать семантические HTML5-теги, такие как <nav>
Сохранять простую структуру меню
Обеспечить хорошую читаемость и доступность
Добавить состояния наведения и активности для улучшения взаимодействия с пользователем

Резюме

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

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