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: HTML mit Stil ====== Damit werden Farben, Grössen, Schriftarten etc. von HTML-Elementen festgelegt. <WRAP todo> * Fügen Sie folgende Zeile zwischen <head> und </head> in Ihrer Datei hello.html ein. <code html> <link rel="stylesheet" href="hello.css"> </code> * Clicken Sie dann mit gedrückter Ctrl-Taste im HTML-Code auf den Dateiname hello.css, um diese Datei anzulegen. * Fügen Sie dann folgenden Inhalt ein: <code css> body { /* HTML tag body */ background-color: beige; } .wichtig { /* Klasse wichtig, einem HTML-Element class="wichtig" hinzufügen, um wichtig zu sein */ color: red; /* Text farbe */ font-weight: bold; /* Fett */ } #meinDing { /* Ein einziges HTML-Element mit id="meinDing" */ background-color:lightseagreen; } </code> * Speichern Sie alle Dateien und betrachten Sie die Seite im Browser (idealerweise mit dem LiveServer). * Fügen Sie dann einigen HTML-Tags zwischen < und > das Attribut ''class="wichtig"'' hinzu, z.B. wie folgt <code html> <p class="wichtig">Mit p macht man einzelne Abschnitte</p> </code> * Testen Sie (eventuell muss die Seite mit Ctrl-Shift-R neu geladen werden.) * Fügen Sie die Klasse einem weiteren Element hinzu. * Fügen Sie einem einzigen Element das Attribut ''id="meinDing"'' hinzu und testen Sie. <code html> <p id="meinDing">Und hier noch ein Bild mit dem Dokuwiki-Logo</p> </code> </WRAP> ===== Resourcen zu CSS ===== * https://wiki.selfhtml.org/wiki/CSS * https://www.w3schools.com/css/ Websuche mit was man eben sucht plus die Begriffe "CSS" und/oder "HTML". Z.B. "CSS position hintergrundbild". lehrkraefte/blc/informatik/glf22/web-tech/css.txt Last modified: 2023/05/02 12:09by Ivo Blöchliger