HGB-Kurs: Zusammenfassung CSS vom letzten Freitag
Wir haben nur noch einen einzigen Kurstag zur Verfügung. Daher fasse ich den vergangenen Freitag nochmal kurz für Alle - auch für die, die gefehlt haben - zusammen, da es keine Wiederholung mehr geben wird:
In den vergangenen Kurswochen haben wir uns CSS näher angeschaut und dabei etwas über Selektoren, deren Eigenschaften und Werte gelernt. Am vergangenen Freitag haben wir uns mehr mit CSS-basierten Layouts beschäftigt. Als theoretische Grundlage diente uns wieder der Online-Kurs Selfhtml, Kapitel ‘Stylesheets (CSS)‘, durch den ich als Moderator geführt habe. Zur Erinnerung:
selektor { eigenschaft: wert; }
Hier nun die Zusammenfassung mit Links zu den Fundstellen:
CSS und HTML: Verküpfung, Ausgabemedien, Formate
Wir haben gelernt, wie wir Stile in HTML einbinden und verschiedene Ausgabemedien wie Bildschirm, Drucker (screen, print) unterstützen. Und wie HTML-Elemente direkt in einer HTML-Seite formatiert werden, welche Formate existieren - HTML-Elemente, Autorenklassen und IDs sowie Pseudoelemente und Pseudoklassen - und wie diese Selektoren definiert werden und nach welcher Priorität sie im einzelnen verwendet werden. Und wie wir sie z.B. mit <div> und <span> in der HTML-Seite verwenden, welche Rolle dabei das DIV-Tag als “Container” spielt.
Das “Box-Modell” und der Internet Explorer
Über numerische Angaben und Maßeinheiten bei der Gestaltung für unterschiedliche Medien haben wir gesprochen, dabei gelernt, dass wir für ein Bildschirm-Stylesheet die Schriftgröße zunächst auf 100.01%. Und wenn wir ein unverzerrtes Layout wünschen, dass sich der Schriftgröße anpasst, wir Größenangaben am besten in Relation mit em machen. Mehr dazu im Kapitel “Das Box Modell” von Selfhtml.
Merke [1]: Die Gesamtbreite einer Box (eines Elements) entspricht der Summe von: Breite des Elementinhalts (width), Innenabstand (padding), Rahmenstärke (border-width) und Außenabstand (margin).
Und nebenbei auch gelernt: Der Internet Explorer hält sich nicht immer an Normen und erfordert für seine Nutzer stets eine Sonderbehandlung durch den Webautor. PS: Der IE-Browser ist immer noch weiter verbreitet als Firefox.
Was haben wir alles zu CSS gelernt?
Schriftformatierung, (Text-)Ausrichtung und Absatzkontrolle, Randabstände (margin), Innenabstände (padding), Rahmen (border), Hintergrundfarben und -Bilder (background), Listenformatierung (list-style), Einsatz von Listen zur Navigation sowie Pseudoklassen (und Pseudoelemente), die wir z.B. benötigen, um das Hyperlink-Verhalten zu ändern (:link, :hover, :focus, :active, :visited).
Merke [2]: Möchten wir die Angaben für margin, padding etc. in einer einzelnen Zeile angeben gilt folgende Reihenfolge: oben, rechts, unten, links. Oder: oben/unten und rechts/links. Beispiel:
padding: 5px 15px 10px 4px; <-- oben, rechts, unten, links
Zum Abschluss haben wir uns vergangenen Freitag mit mehrspaltigen, CSS-basierten Layouts beschäftigt. An diesen Online-Beispielen sollten Sie sich bei Ihren ersten Entwürfen des CSS-Layouts orientieren.
Kursende: Positionierungen am Bildschirm
Mit der Positionierung und Anzeige von HTML-Elementen (position, display) am konkreten Online-Beispiel beenden wir kommenden Freitag den theoretischen Teil im Kurs Webmedia Basics II.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Noch keine Kommentare.
Einen Kommentar hinterlassen