Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
lehrkraefte:blc:informatik:glf20:webtech-css [2021/02/17 20:54] Ivo Blöchliger created |
lehrkraefte:blc:informatik:glf20:webtech-css [2021/02/23 18:39] Ivo Blöchliger [Aufgabe: Dark-Mode Theme für Beispiel-Webseite] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== CSS ====== | ====== CSS ====== | ||
- | Cascade Style Sheet. | + | Ein **Cascade Style Sheet** legt fest, wie die einzelnen HTML-Elemente zu formatieren sind (Grösse, Farbe, Position, Schriftart, etc.). |
+ | |||
+ | Das kann entweder direkt im html-Dokument zwischen '' | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | ===== Selektoren ===== | ||
+ | <WRAP info> | ||
+ | Es gibt 3 grundsätzliche Varianten, Elemente für die Formatierung auszuwählen: | ||
+ | * Der **Name des html-Elements**, | ||
+ | * Die **Klasse des Elements**, z.B. '' | ||
+ | * Die **ID des Elements**, z.B. ''# | ||
+ | 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, | ||
+ | </ | ||