Cascading Style Sheets - Beispiel-Quelltext
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets - Übungen</TITLE>
<STYLE TYPE="text/css">
@media print {
BODY {
background-color:white;
}
H1, H2, UL, LI {
color:black;
font-family:Helvetica,Arial;
font-size:10pt;
}
}
@media screen {
BODY {
background-color:#ffffff;
}
H1, H2, UL, LI {
color:#006600;
font-family:Helvetica,Arial;
font-size:12pt;
}
}
// -->
</STYLE>
</HEAD>
<BODY>
<H1>Cascading Style Sheets</H1>
<H2>Einsatz und Probleme von HTML</H2>
<UL>
<LI>HTML kommt aus dem akademischen Bereich
<LI>HTML beschreibt Struktur eines Dokuments
<LI>Webseite = Struktur (HTML) und Inhalt
</UL>
<H2>Folgerungen</H2>
<UL>
<LI>Der Inhalt ist wichtiger als die Form und das Layout
<LI>Sehr einfaches Layout, wenig Gestaltungsmöglichkeiten
<LI>HTML für ansprechendes Layout unzureichend
</UL>
<H2>Tricksereien</H2>
<UL>
<LI>Tabellen für Seitenlayout, Positionierung usw.
<LI>Blind-GIFs für Positionierung und Abstände usw.
<LI>Neue HTML-Tags speziell für Layout
</UL>
<H2>Folgen</H2>
<UL>
<LI>Vermischung von Struktur und Layout
<LI>Schwer les- und wartbar
<LI>Fehleranfällig bei Erstellung und Änderung
<LI>Noch immer keine absolute Positionierung
<LI>Problematisch für unterschiedlichen Medien
</UL>
<H2>Konsequenzen: Formatvorlagen (CSS)</H2>
<UL>
<LI>Saubere Trennung von Struktur, Inhalt und Layout
<LI>Medienabhängiges Layout möglich
</UL>
</BODY>
</HTML>