Entdecken Sie die Display-Eigenschaften in CSS

Einführung

In diesem Lab werden die Schüler die grundlegenden CSS-Display-Eigenschaften erkunden, die die Layout- und Sichtbarkeit von Web-Elementen steuern. Durch eine Reihe von praktischen Übungen lernen die Teilnehmer, wie sie die Block-, Inline-, Inline-Block- und None-Display-Eigenschaften manipulieren, und erwerben praktische Kenntnisse bei der Strukturierung und Verwaltung von Webseitengestalten. Das Lab behandelt Schlüsselkonzepte wie das Verständnis, wie verschiedene Display-Eigenschaften die Elementpositionierung beeinflussen, das Erstellen von Navigationsmenüs und die Kontrolle der Elementsichtbarkeit, und bietet eine umfassende Einführung in die CSS-Layout-Techniken.

Durch das Bearbeiten von praktischen Beispielen und Code-Demonstrationen werden die Lernenden einen soliden Verständnis dafür entwickeln, wie die Display-Eigenschaften die Web-Design beeinflussen, was es ihnen ermöglicht, flexiblere und reaktionsfähigere Webseitengestalten zu erstellen. Der schrittweise Ansatz ermöglicht es den Schülern, ihr Wissen schrittweise aufzubauen, beginnend mit den Grundeigenschaften von blockebenelementen bis hin zu fortgeschrittenen Implementierungen von Display-Eigenschaften.

Verständnis der Block-Display-Eigenschaft

In diesem Schritt lernst du über die Block-Display-Eigenschaft in CSS, die ein grundlegendes Konzept zur Steuerung des Layouts von Web-Elementen ist. Standardmäßig haben viele HTML-Elemente eine blockebene Display-Eigenschaft.

Lassen Sie uns zunächst eine HTML-Datei erstellen, um die Block-Display-Eigenschaften zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens 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>

Wichtige Eigenschaften von blockebenen Elementen:

Sie beginnen immer auf einer neuen Zeile.
Sie nehmen standardmäßig die volle verfügbare Breite ein.
Es können Breite, Höhe, Außenräume und Innenräume angewendet werden.
Blockelemente stapeln sich vertikal nacheinander.

Lassen Sie uns die Dateiinhalte überprüfen:

cat ~/project/block-display.html

Beispielausgabe:

<!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>

Häufige blockebene Elemente sind:

<div>
<p>
<h1> bis <h6>
<section>
<article>
<ul> und <ol>

Anwenden der Inline-Display-Eigenschaft

In diesem Schritt lernst du über die Inline-Display-Eigenschaft in CSS, die es Elementen ermöglicht, horizontal zu fließen und nur so viel Breite in Anspruch zu nehmen, wie erforderlich ist.

Lassen Sie uns eine HTML-Datei erstellen, um die Inline-Display-Eigenschaften zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens 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>

Wichtige Eigenschaften von Inline-Elementen:

Sie fließen horizontal in derselben Zeile.
Sie nehmen nur so viel Breite in Anspruch, wie erforderlich ist.
Breite- und Höhe-Eigenschaften funktionieren nicht.
Vertikale Innenräume und Außenräume haben nur begrenzten Effekt.
Breite und Höhe können nicht direkt festgelegt werden.

Lassen Sie uns die Dateiinhalte überprüfen:

cat ~/project/inline-display.html

Beispielausgabe:

<!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>

Häufige Inline-Elemente sind:

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

Implementieren der Inline-Block-Display-Eigenschaft

In diesem Schritt lernst du über die Inline-Block-Display-Eigenschaft in CSS, die die besten Eigenschaften von sowohl Inline- als auch blockebenen Elementen vereint.

Lassen Sie uns eine HTML-Datei erstellen, um die Inline-Block-Display-Eigenschaften zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens 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>

Wichtige Eigenschaften von Inline-Block-Elementen:

Fließen horizontal wie Inline-Elemente
Können Breite, Höhe, Innenräume und Außenräume wie blockebene Elemente haben
Ermöglicht präzise Kontrolle über die Elementgröße und -abstand
Nützlich für das Erstellen horizontaler Layouts wie Navigationsmenüs oder Bildgalerien

Lassen Sie uns die Dateiinhalte überprüfen:

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

Beispielausgabe:

<!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>

Häufige Anwendungsfälle für Inline-Block:

Erstellen von horizontalen Navigationsmenüs
Gestalten von Bildgalerien
Genauere Ausrichtung von Elementen nebeneinander

Verwenden der `display: none`-Eigenschaft zum Ausblenden von Elementen

In diesem Schritt lernst du über die display: none-Eigenschaft in CSS, die ein Element vollständig aus dem Seitenlayout entfernt, es unsichtbar macht und keinen Platz einnimmt.

Lassen Sie uns eine HTML-Datei erstellen, um die none-Display-Eigenschaft zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens 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>

Wichtige Eigenschaften von display: none:

Entfernt das Element vollständig aus dem Seitenlayout
Element nimmt keinen Platz ein
Anders als visibility: hidden (was den Platz beibehält, aber das Element unsichtbar macht)
Nützlich für das dynamische Ausblenden von Inhalten und das responsive Design

Lassen Sie uns die Dateiinhalte überprüfen:

cat ~/project/none-display.html

Beispielausgabe:

<!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>

Häufige Anwendungsfälle für display: none:

Konditionales Ausblenden von Elementen
Erstellen von responsive Menüs
Verwalten der Sichtbarkeit von dynamischen Inhalten
Implementieren von Dropdown- und Toggle-Schnittstellen

Erstellen eines Navigationsmenüs mit Display-Eigenschaften

In diesem Schritt erstellen Sie ein horizontales Navigationsmenü, indem Sie die in vorherigen Schritten gelernten Display-Eigenschaften verwenden. Dieses praktische Beispiel zeigt, wie Sie die Inline-Block-Display-Eigenschaft verwenden, um ein responsives und sauberes Navigationslayout zu erstellen.

Lassen Sie uns eine HTML-Datei mit einem Navigationsmenü erstellen. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens 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>

Wichtige Techniken, die in diesem Navigationsmenü verwendet werden:

display: inline-block für die Menüpunkte
Entfernen der standardmäßigen Listenformatierung
Hinzufügen von Hover-Effekten
Erstellen eines horizontalen Layouts

Lassen Sie uns die Dateiinhalte überprüfen:

cat ~/project/navigation-menu.html

Beispielausgabe:

<!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>

Beste Praktiken für Navigationsmenüs:

Verwenden von semantischen HTML5-Tags wie <nav>
Halten Sie die Menüstruktur einfach
Stellen Sie eine gute Lesbarkeit und Zugänglichkeit sicher
Fügen Sie Hover- und Aktivzustände hinzu, um die Benutzerinteraktion zu verbessern

Zusammenfassung

In diesem Lab haben die Teilnehmer CSS-Display-Eigenschaften untersucht, wobei der Fokus auf dem Verständnis lag, wie verschiedene Display-Werte die Webseitenlayout und das Verhalten von Elementen beeinflussen. Das Lab begann mit der Untersuchung der Block-Display-Eigenschaft, wobei gezeigt wurde, wie blockebene Elemente die volle Breite einnehmen, auf neuen Zeilen beginnen und mit Außenräumen, Innenräumen und Rändern formatiert werden können. Die Teilnehmer lernten über häufige blockebene Elemente wie <div>, <p> und Überschriftentags und wie sie sich in einem Dokument natürlich vertikal übereinander stapeln.

In den folgenden Schritten wurden die Lernenden durch das Anwenden von Inline-, Inline-Block- und None-Display-Eigenschaften geführt und praktische Einblicke in die Steuerung der Elementendarstellung und Sichtbarkeit gewonnen. Indem die Teilnehmer praktische Beispiele erstellten und mit CSS-Stilen experimentierten, erhielten sie praktische Erfahrungen bei der Manipulation der Elementanzeige-Charakteristiken und verstanden schließlich, wie sie mit CSS-Display-Eigenschaften flexiblere und responsivere Webseitenlayouts erstellen können.

Entdecken Sie die Display-Eigenschaften in CSS

Einführung

Mehr als nur ein Lerntext – erlebe es selbst.

Verständnis der Block-Display-Eigenschaft

Anwenden der Inline-Display-Eigenschaft

Direkt aus dem Tutorial heraus programmieren.

Implementieren der Inline-Block-Display-Eigenschaft

Verwenden der `display: none`-Eigenschaft zum Ausblenden von Elementen

Praxis statt nur Theorie.

Erstellen eines Navigationsmenüs mit Display-Eigenschaften

Zusammenfassung

Entdecken Sie die Display-Eigenschaften in CSS

Einführung

Mehr als nur ein Lerntext – erlebe es selbst.

Verständnis der Block-Display-Eigenschaft

Anwenden der Inline-Display-Eigenschaft

Direkt aus dem Tutorial heraus programmieren.

Implementieren der Inline-Block-Display-Eigenschaft

Verwenden der display: none-Eigenschaft zum Ausblenden von Elementen

Praxis statt nur Theorie.

Erstellen eines Navigationsmenüs mit Display-Eigenschaften

Zusammenfassung

Verwenden der `display: none`-Eigenschaft zum Ausblenden von Elementen