LU01.A01 - CSS Grundlagen

Dies ist eine alte Version des Dokuments!

Sie haben die [CSS Display Teil 1 - Grundlagen](./content.php?top=1&file=themen/02_display/theorie.md) gelesen.

1. Beschreiben Sie den Unterschied zwischen Block- und Inline-Elementen in HTML und geben Sie jeweils ein Beispiel für ein Block-Element und ein Inline-Element an. 2. Ändern Sie das Anzeigeverhalten eines Elements mit der CSS-Eigenschaft „display“ von „block“ auf „inline“ und umgekehrt. Erläutern Sie, wie sich das Layout des Elements ändert.

Was	Beschreibung
Produkt:	-
Zeit:	10 Min.
Sozialform:	Einzel- oder Partnerarbeit
Arbeitsmittel:	Unterrichtsunterlagen, HTML-Editor, Browser

Sie haben die Grundlagen gelesen.

1. Erstellen Sie die Dokumente `index.html` und `style.css`.

2. Kopieren Sie die folgende Vorlage in Ihre Dokumente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="container">
        <div class="logo">Item 1</div>
        <div class="nav">
            <div class="nav-item">Item 1</div>
            <div class="nav-item">Item 2</div>
            <div class="nav-item">Item 3</div>
        </div>
    </div>
</body>
</html>