====== LU01.A01 - CSS Grundlagen ====== ===== Aufgabe 1: Grundlagen ===== ==== Ausgangslage ==== Sie haben die Grundlagen gelesen. ==== Aufgabenstellung ==== - 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. - Ä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. ==== Rahmenbedingungen ==== ^ Was ^ Beschreibung ^ | Produkt: | - | | Zeit: | 10 Min. | | Sozialform: | Einzel- oder Partnerarbeit | | Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser | ===== Aufgabe 2: Anwendung ===== ==== Ausgangslage ==== Sie haben die Grundlagen gelesen. ==== Aufgabenstellung ==== - Erstellen Sie die Dokumente `index.html` und `style.css`. - Kopieren Sie die folgende Vorlage in Ihre Dokumente: Title
Item 1
Item 2
Item 3
 - Verlinken Sie das `syle.css` in Ihrem HTML-Dokument. - Gestalten Sie Ihr HTML-Dokument gemäss Vorgabe. {{:modul:ffit:css:learningunits:lu01:aufgaben:vorgabe.png?800|}} ==== Rahmenbedingungen ==== ^ Was ^ Beschreibung ^ | Produkt: | HTML-Seite mit CSS Flexbox | | Zeit: | 15 Min. | | Sozialform: | Einzel- oder Partnerarbeit | | Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |