Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
lehrkraefte:blc:informatik:glf20:webtech-css [2021/02/18 12:01] Ivo Blöchliger [Properties] |
lehrkraefte:blc:informatik:glf20:webtech-css [2021/02/23 18:39] (current) Ivo Blöchliger [Aufgabe: Dark-Mode Theme für Beispiel-Webseite] |
||
---|---|---|---|
Line 12: | Line 12: | ||
<WRAP info> | <WRAP info> | ||
Es gibt 3 grundsätzliche Varianten, Elemente für die Formatierung auszuwählen: | Es gibt 3 grundsätzliche Varianten, Elemente für die Formatierung auszuwählen: | ||
- | * Der **Name des html-Elements**, | + | * Der **Name des html-Elements**, |
- | * Die **Klasse des Elements**, z.B. .meinmenu (beachten Sie den führenden Punkt), wenn ein Element gibt, das das Attribut '' | + | * Die **Klasse des Elements**, z.B. '' |
- | * Die **ID des Elements**, z.B. #footer, das ein einzelnes Element mit '' | + | * Die **ID des Elements**, z.B. '' |
Diese Selektoren können dann auch miteinander kombiniert werden. Siehe https:// | Diese Selektoren können dann auch miteinander kombiniert werden. Siehe https:// | ||
</ | </ | ||
Line 20: | Line 20: | ||
===== Properties ===== | ===== Properties ===== | ||
Auf https:// | Auf https:// | ||
+ | |||
+ | ==== Aufgabe: Dark-Mode Theme für Beispiel-Webseite ==== | ||
+ | |||
<WRAP todo> | <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). | * 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 '' | * Öffnen Sie dann die lokale Datei '' | ||
- | * Öffnen Sie dann zusätzlich die Datei ' | + | * Öffnen Sie dann zusätzlich die Datei '' |
- | * Ändern Sie in der CSS-Datei die Farben der Elemente so ab, dass ein " | + | * Gehen in der Datei '' |
+ | * Ändern Sie in der Datei '' | ||
* Ö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, | * Ö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, | ||
</ | </ | ||
+ | |||