Warum Style Sheets und was bedeutet Cascading?
Motivation:
- Trennung von Inhalt und Layout
- zentrale Steuerung der Formatierung
- Vermeidung von Wiederholungen
- Wartungsaufwand verringern
-
Barrierefreiheit (Skalierbarkeit, interpretierbare logische Struktur)
Wichtig: HTML-Elemente entsprechend ihrer Bedeutung (Semantik) einzusetzen
CSS-Kaskade und die Kaskadenregeln
- Vererbung von Styles innerhalb der Dokumentenhierarchie (DOM - Document Object Model)
- Kaskade definiert Reihenfolge: Browser-Stylesheet (html.css) & Benutzerstylesheet
- Vereinfachte Kaskaden-Regel: Vorrang: ID-Selektoren >> Klassenselektoren >> Elementselektoren
Elemente
- Kontextselektoren: Contextual - HTML-Tags im Kontext
- Kindselektoren: p > em (gemäß; Markup-Hierarchie)
- IDs, Klassen & Pseudoklassen (zustands- oder strukturabhängig)
- Unterschied zwischen IDs und Klassen
#content h1 {
color: #6666cc;
font-size: 1.8em;
letter-spacing: 0.1em;
padding: 1em 10px 1.5em 10px;
font-family: Akbar;
}
Box-Modell
- Rahmen, Innen- und Aussenabstand
- Floating & Clearing
- Position & Display
Beispieltext "Lorem ipsum dolor..."
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. hier ist per 'emphasize' Text orange hervorgehoben Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.