Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== CSS ====== 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 ''style''-Tags stehen, oder besser in einer separaten Datei, die im ''head'' des Dokuments eingebunden wird, z.B. <code html> <head> <link rel="stylesheet" href="intro.css"> <!-- noch mehr Dinge, wie z.B. Encoding, Titel, etc. --> </head> </code> ===== Selektoren ===== <WRAP info> Es gibt 3 grundsätzliche Varianten, Elemente für die Formatierung auszuwählen: * Der **Name des html-Elements**, z.B. ''h1'', ''img'', ''div'', etc. * Die **Klasse des Elements**, z.B. ''.meinmenu'' (beachten Sie den führenden Punkt), wenn ein Element gibt, das das Attribut ''class="meinmenu"'' hat. Mehrere Elemente können die gleiche Klasse haben. Ein Element kann auch mehrere Klassen haben, diese werden durch Leerschläge getrennt, z.B. ''class="inhalt wichtig"''. * Die **ID des Elements**, z.B. ''#footer'', das ein einzelnes Element mit ''id="footer"'' beschreibt. Es darf nur ein einziges Element pro id geben. Diese Selektoren können dann auch miteinander kombiniert werden. Siehe https://www.w3schools.com/cssref/css_selectors.asp für eine gute Übersicht. </WRAP> ===== Properties ===== Auf https://www.w3schools.com/cssref/default.asp finden Sie eine Übersicht aller CSS-Eigenschaften, die für HTML-Element festgelegt werden können. ==== Aufgabe: Dark-Mode Theme für Beispiel-Webseite ==== <WRAP todo> * Auf https://ofi.tech-lab.ch/2021/teach/d0571f1e/webdev/ gibt es einen Ordner ''css-intro'' (plus die Datei ''css-intro.zip'', die diesen Ordner enthält). * 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 zusätzlich die Datei ''intro.css'' in NotePad++. * 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 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). </WRAP> lehrkraefte/blc/informatik/glf20/webtech-css.txt Last modified: 2021/02/23 18:39by Ivo Blöchliger