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 09:54] 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 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:// | ||
</ | </ | ||
+ | |||
+ | ===== Properties ===== | ||
+ | Auf https:// | ||
+ | |||
+ | ==== Aufgabe: Dark-Mode Theme für Beispiel-Webseite ==== | ||
+ | |||
+ | |||
+ | <WRAP todo> | ||
+ | * Auf https:// | ||
+ | * 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 zusätzlich die Datei '' | ||
+ | * 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, | ||
+ | </ | ||
+ | |||