Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:glf20:webtech-css [2021/02/18 10:44]
Ivo Blöchliger [Selektoren]
+++ lehrkraefte:blc:informatik:glf20:webtech-css [2021/02/21 20:54]
Ivo Blöchliger [Aufgabe: Dark-Mode Theme für Beispiel-Webseite]
@@ Line 12: / Line 12: @@
 <WRAP info>
  Es gibt 3 grundsätzliche Varianten, Elemente für die Formatierung auszuwählen:
-  * Der **Name des html-Elements**, z.B. h1, img, div, etc.
+  * Der **Name des html-Elements**, z.B. ''h1'', ''img'', ''div'', etc.
-  * Die **Klasse des Elements**, z.B. .meinmenu (beachten Sie den führenden Punkt), wenn ein Element gibt, das das Attribut ''class="meinmenu"'' hat. Mehrere Elemente können die gleiche Klasse haben. Ein Element kann auch mehrere Klassen haben, diese werden durch Leerschläge getrennt, z.B. ''class="inhalt wichtig"''.
+  * Die **Klasse des Elements**, z.B. ''.meinmenu'' (beachten Sie den führenden Punkt), wenn ein Element gibt, das das Attribut ''class="meinmenu"'' hat. Mehrere Elemente können die gleiche Klasse haben. Ein Element kann auch mehrere Klassen haben, diese werden durch Leerschläge getrennt, z.B. ''class="inhalt wichtig"''.
-  * Die **ID des Elements**, z.B. #footer, das ein einzelnes Element mit ''id="footer"'' beschreibt. Es darf nur ein einziges Element pro id geben.
+  * Die **ID des Elements**, z.B. ''#footer'', das ein einzelnes Element mit ''id="footer"'' beschreibt. Es darf nur ein einziges Element pro id geben.
 Diese Selektoren können dann auch miteinander kombiniert werden. Siehe https://www.w3schools.com/cssref/css_selectors.asp für eine gute Übersicht.
 </WRAP>
@@ Line 20: / Line 20: @@
 ===== Properties =====
 Auf https://www.w3schools.com/cssref/default.asp finden Sie eine Übersicht aller CSS-Eigenschaften, die für HTML-Element festgelegt werden können.
+==== Aufgabe: Dark-Mode Theme für Beispiel-Webseite ====
 <WRAP todo>
@@ Line 25: / Line 28: @@
   * Kopieren Sie diesen Ordner auf Ihren Computer, z.B. indem Sie die zip-Datei herunterladen **und entpacken** (nur weil es in 7zip geöffnet wird, ist der Ordner noch nicht entpackt).
   * Öffnen Sie dann die lokale Datei ''css-intro.html'', einmal im Browser, um die Seite zu betrachen, einmal in NotePad++ (erst das Programm starten, dann File->Open, bzw. Datei->Öffnen).
-  * Öffnen Sie dann zusätzlich die Datei 'intro.css'' in NotePad++.
+  * Öffnen Sie dann zusätzlich die Datei ''intro.css'' in NotePad++.
-  *
+  * Gehen in der CSS-Datei alle Einträge durch und bestimmen Sie von Hand, welche Elemente durch diese Einträge alle beinflusst werden.
+  * Ändern Sie in der CSS-Datei die Farben der Elemente so ab, dass ein "Dark-Theme" entsteht (dunkler Hintergrund, helle Schriftfarbe). Speichern Sie dazu nach jeder Änderung ab und laden Sie die Seite im Browser neu (mit Ctrl-Shift-R, bzw. Shift-Klick Reload). Überprüfen Sie, dass Ihre Änderung auch wie gewohnt funktioniert.
+  * Öffnen Sie im Browser auch die Debug-Konsole mit F12. Damit können Sie die Elemente überprüfen und sogar live die CSS-Attribute verändern oder hinzufügen (allerdings werden diese nicht gespeichert, dass müssen Sie in NotePad++ dann übernehmen).
 </WRAP>