Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu02:aufgaben:pseudo-klassen [2025/08/28 07:02] – kdemirci
+++ modul:m287:learningunits:lu02:aufgaben:pseudo-klassen [2025/08/28 07:03] (aktuell) – alte Version wiederhergestellt (2025/03/14 08:25) kdemirci
@@ Zeile 35: / Zeile 35: @@
 </head>
 <body>
-    <h1>Ein Text über Lorem Ipsum</h1>
+    <h1>Pseudo-Klassen in Aktion</h1>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+    <button>Klick mich</button>
-    <blockquote class="custom-quote">Every programmer is an author.</quote>
+    <input type="text" placeholder="Fokus mich">
+    <ul>
+        <li>Element 1</li>
+        <li>Element 2</li>
+        <li>Element 3</li>
+        <li>Element 4</li>
+    </ul>
 </body>
 </html>
@@ Zeile 45: / Zeile 51: @@
   - Erstellen Sie eine CSS-Datei ''styles.css'' und verknüpfe sie die CSS-Datei mit der HTML-Datei.
-  - Fügen Sie eine Regel hinzu, die bei den ''<blockquote>''-Elementen mit der Klase ''custom-quote'' die Zitatzeichen "«" und "»" hinzufügt.
+  - Fügen Sie eine Regel hinzu, die das ''<button>''-Element verändert, wenn die Maus darüberfährt (''hover'').
+  - Erstellen Sie eine Regel für ''button:active'', sodass sich das Aussehen ändert, wenn der Button geklickt wird.
+  - Gestalten Sie das ''<input>''-Feld so, dass sich die Rahmenfarbe ändert, wenn es fokussiert wird (''focus'').
+  - Setzen Sie eine Regel, die den ersten ''<li>'' fett macht und den letzten ''<li>'' grau färbt.
+  - Verwenden Sie ''nth-child(n)'', um das zweite ''<li>''-Element in einer anderen Farbe darzustellen.
+  - Fügen Sie eine Deklaration hinzu, sodass das ''<h1>''-Element eine andere Farbe bekommt, wenn man mit der Maus darüberfährt.
+  - Testen Sie Ihre Lösung, indem Sie die HTML-Datei in einem Browser öffnen und mit den Elementen interagiert!
 ==== Rahmenbedingungen =====
 ^ Was ^ Beschreibung ^
 | Produkt | HTML- und CSS-Datei |
-| Zeit | 5 Min. |
+| Zeit | 15 Min. |
 | Sozialform | Einzel- oder Partnerarbeit |