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 14:00] 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 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 '' | * Öffnen Sie dann die lokale Datei '' | ||
- | * Öffnen Sie dann zusätzlich die Datei ' | + | * Öffnen Sie dann zusätzlich die Datei '' |
- | * 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 '' |
- | * Ändern Sie in der CSS-Datei die Farben der Elemente so ab, dass ein " | + | * Ä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, | ||
</ | </ | ||
+ | |||