lehrkraefte:blc:informatik:glf20:webtech-css

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
lehrkraefte:blc:informatik:glf20:webtech-css [2021/02/21 20:53]
Ivo Blöchliger [Selektoren] 		lehrkraefte:blc:informatik:glf20:webtech-css [2021/02/23 18:39] (current)
Ivo Blöchliger [Aufgabe: Dark-Mode Theme für Beispiel-Webseite]
Line 28: 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).   * 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 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. +  * Gehen in der Datei ''intro.css'' 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.+  * Ändern Sie in der Datei ''intro.css'' 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).   * Ö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> </WRAP>
  
  
  • lehrkraefte/blc/informatik/glf20/webtech-css.1613937205.txt.gz
  • Last modified: 2021/02/21 20:53
  • by Ivo Blöchliger