1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: CSS Stylesheets / CSS Stylesheets und HTML</title>
<link rel="stylesheet" type="text/css" href="../src/selfhtml.css">
<meta name="description" content="Wie Wie CSS Stylesheets und HTML in Zusammenhang stehen und welche Aufgaben CSS hat.">
<meta name="keywords" content="SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, Formatierung">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/css/intro.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../index.htm // CSS Stylesheets == index.htm">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../index.htm"><b>SELFHTML</b></a>/<a href="../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>CSS Stylesheets</b></a> </td>
</tr>
</table><table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>CSS Stylesheets und HTML</h2></td>
</tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#sinn_und_zweck"><b>Sinn und Zweck von CSS Stylesheets</b></a><br>
<img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#sprachen_versionen"><b>Stylesheet-Sprachen, Versionen und Informationen</b></a><br>
<img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#styles_browser_anwender"><b>Stylesheets, Web-Browser und Anwender</b></a><br>
<img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#formate_eigenschaften"><b>CSS-Formate und CSS-Eigenschaften</b></a><br>
</p>
</td>
</tr><tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><a class="an" name="sinn_und_zweck">Sinn und Zweck von CSS Stylesheets</a></h2>
<p>CSS Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung eine Schriftgröße von 18 Punkt haben, in der Schriftart Helvetica, aber nicht fett erscheinen, und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit reinem HTML nicht möglich.</p>
<p>Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Möglichkeiten. So können Sie HTML-Elemente - egal ob Textabsätze, Listen, Tabellenzellen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausstatten. Sie können Elemente pixelgenau im Anzeigefenster des WWW-Browsers positionieren. Für Print-Layouts stehen Möglichkeiten zur Definition von Seitenlayout und Textflusskontrolle bereit. Für die akustische Wiedergabe von Web-Seiten gibt es ein ganzes Arsenal an Befehlen, um die künstliche Sprachausgabe feinzusteuern. Einige CSS-Eigenschaften sind auch in der Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das Aussehen des Cursors. Spezielle Filter schließlich, die allerdings rein Microsoft-spezifisch sind, erlauben Grafik-Effekte bei normalen Texten, die aus Grafikprogrammen wie Photoshop bekannt sind.</p>
<p>Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können Sie beispielsweise im Kopf einer HTML-Datei zentrale Definitionen zum Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen der entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner. Sie können Ihre Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.</p>
<p>CSS Stylesheets unterstützen also erstens die professionelle Gestaltung beim Web-Design, und zweitens helfen sie beim Corporate Design für große Projekte oder für unternehmensspezifsche Layouts.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><a class="an" name="sprachen_versionen">Stylesheet-Sprachen, Versionen und Informationen</a></h2>
<p>Genau wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich also um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Für CSS gibt es genau wie für HTML eine Arbeitsgruppe beim W3-Konsortium, die sich um die Weiterentwicklung der Sprache kümmert und sich dabei dem Regelwerk zur Entstehung der so genannten Recommendations (Empfehlungen) des W3-Konsortiums unterzieht.</p>
<p>Wie bei HTML, so gibt es auch bei CSS Sprachversionen, die auf den Neuauflagen der Recommendations basieren. Die Version 1.0 von CSS wurde bereits im Jahr 1996 herausgegeben und 1999 nochmals überarbeitet. 1998 erhielt die Version 2.0 den Status einer Empfehlung. Mittlerweile wird an Version 3.0 gearbeitet. In der vorliegenden Dokumentation werden die beiden ersten Versionen berücksichtigt. Folgende Symbole werden zur Auszeichnung der Sprachversionen verwendet:</p>
<table cellpadding="0" cellspacing="0" border="0"
bgcolor="#C0C0C0"><tr><td>
<table cellpadding="3" cellspacing="1" border="0"
>
<tr>
<th bgcolor="#EEEEEE" class="doc" align="left">Symbol</th>
<th bgcolor="#EEEEEE" class="doc" align="left">Bedeutung</th>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><img src="../src/css10.gif" width="30" height="30" border="0" alt="CSS 1.0"></td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">Bestandteil der ersten CSS-Version.</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><img src="../src/css20.gif" width="30" height="30" border="0" alt="CSS 2.0"></td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">Bestandteil der zweiten CSS-Version.</td>
</tr>
</table>
</td></tr></table>
<p>Es gibt mehrere Sprachen zum Definieren von Stylesheets, CSS ist nur eine davon. Aber es ist diejenige Sprache, die speziell als Ergänzung für HTML geschaffen wurde und deshalb für HTML-basierte Web-Seiten optimiert ist. CSS steht für "Cascading Style Sheets". Andere Style-Sprachen sind die "Document Style Semantics and Specification Language" (DSSSL), die für SGML konzipiert wurde und ebenso wie SGML etwas "sophisticated" ist, und die mittlerweile bekanntere "Extensible Stylesheet Language" (XSL), die als Formatierungssprache für XML entwickelt wurde (zu XSL siehe auch <img src="../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../xml/darstellung/index.htm"><b>Darstellung von XML-Daten</b></a>).</p>
<p>Im Web können Sie die bisherige Entwicklung und die Weiterentwicklung von CSS auf den Seiten des W3-Konsortiums verfolgen:</p>
<p><img src="../src/en.gif" width="16" height="10" border="0" alt="englischsprachige Seite"> <a target="_top" href="http://www.w3.org/Style/"><b>Einstiegsseite zu Stylesheets beim W3-Konsortium</b></a><br>
Über diese Seite gelangen Sie zu Informationen über CSS, XSL und DSSSL sowie über Software-Projekte rund um Style-Unterstützung.</p>
<p><img src="../src/en.gif" width="16" height="10" border="0" alt="englischsprachige Seite"> <a target="_top" href="http://www.w3.org/Style/CSS/"><b>Einstiegsseite zu CSS Stylesheets beim W3-Konsortium</b></a><br>
Über diese Seite gelangen Sie direkt zu aktuellen Nachrichten und Informationen über CSS.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><a class="an" name="styles_browser_anwender">Stylesheets, Web-Browser und Anwender</a></h2>
<p>Netscape 4.x interpretiert viele Eigenschaften der CSS-Version 1.0 und einen Teil der Eigenschaften der CSS-Version 2.0. Der MS Internet Explorer kennt weite Teile der CSS-Version 1.0 bereits seit seiner Produktversion 3.0 aus dem Jahr 1996. In der Version 4.0 interpretiert er einen Teil der CSS-Version 2.0 und einige spezielle, von Microsoft eingeführte Eigenschaften. Auf dem Niveau der 4er-Generation beider Browser ist die CSS-Implementierung jedoch noch unvollständig und recht unterschiedlich, und speziell beim 4er-Netscape gibt es zum Teil noch haarsträubende Fehler. Seit der 5er-Version des Internet Explorers und der 6er-Version von Netscape ist die Situation etwas besser geworden. Der Opera-Browser befindet sich in Sachen CSS spätestens seit seiner 5er-Version ebenfalls auf hohem Niveau. Rundum vollständige Implementierungen von CSS 2.0 gibt es in den führenden Browser-Produkten jedoch noch immer nicht.</p>
<p>Das alles entbindet Sie beim Entwerfen von Styles für Ihre Web-Seiten deshalb nicht davon, alle Formate mit verschiedenen Browsern auszutesten. Die CSS-Implementierungen der Browser sind einfach noch nicht so einheitlich, dass Sie darauf vertrauen können, dass alles in jedem Browser genauso aussieht wie bei dem, mit dem Sie bevorzugt arbeiten. Ferner sollte Ihnen bewusst sein, dass die optische Wirkung von Web-Seiten auch stark von der eingesetzten Hardware abhängig ist. Web-Seiten werden nun mal nicht nur auf High-End-PCs mit 19-Zoll-Bildschirmen und 16,7 Millionen Farben gelesen. Sie werden auch mit Sub-Notebooks und Handheld-Computern gelesen und mit veralteten PCs angezeigt. Gerade die unterschiedlichen Technologien, die heute im Bereich der Bildschirme auf dem Markt sind, sorgen für sehr unterschiedliche Wirkungen etwa von Farben. Was auf dem einen Bildschirm als beige wirkt, sieht auf dem nächsten aus wie schweinchenrosa. Zwar lassen sich Bildschirme kalibrieren, doch Sie können ja schlecht vom Anwender verlangen, dass er vor dem Betrachten Ihrer Web-Seiten erst mal seinen Bildschirm neu einstellt. Immerhin besteht ab CSS 2.0 die Möglichkeit, unterschiedliche CSS-Formate für unterschiedliche Ausgabemedien zu definieren. Doch alle Probleme lassen sich damit auch nicht beseitigen.</p>
<p>Bedauerlich ist weiterhin, dass Schriftgrößenangaben in CSS am Bildschirm leider nicht zu einheitlichen Ergebnissen führen. Während im Print-Bereich eine 10-Punkt-Schrift immer gleich groß ist, weil nun mal definiert ist, wie groß ein Punkt ist, werden solche Angaben am Bildschirm in Pixel umgerechnet. Dabei ist aber wiederum nicht festgelegt, wie groß ein Pixel ist. Und nicht mal die Umrechnungsfaktoren sind die gleichen. So rechnet etwa Windows Schriftgrößenangaben anders in Pixel um als etwa grafische Oberflächen unter Linux oder als das Macintosh-Betriebssystem. Kurzum - vieles in CSS steht nur genau in der Datei, aber die Ergebnisse am Bildschirm können doch recht unterschiedlich und nicht selten unbefriedigend sein.</p>
<p>Ein ganz wichtiger Aspekt beim Entwerfen von Styles für Web-Seiten sind aber auch die Menschen, die diese Web-Seiten als Besucher betrachten sollen. Es gibt nicht wenige Menschen, die Farben und Formen aufgrund visueller Schwächen nur eingeschränkt wahrnehmen können. Was Sie beim Designen vielleicht als "edel" empfinden, empfinden solche Menschen nur noch als "unleserlich". Und "unleserlich" bedeutet: Sie haben wieder einen Besucher weniger auf Ihren Seiten. Stylesheets verführen aufgrund ihrer Möglichkeiten leicht zur Verwendung ungewöhnlicher Schriftarten oder zu Dingen wie Ton-in-Ton-Farbgebung. So "schön" das auch aussehen mag - es kann je nach Anzeigegerät und visuellem Auflösungsvermögen beim Betrachter schnell auf Kosten der "Usability", also der Zweckmäßigkeit gehen. Andererseits können Sie Stylesheets auch explizit dafür nutzen, um Seiten für sehschwache Menschen zu optimieren. Ordentliche Farbkontraste, Schriftarten im normalgroßen Bereich, übliche Schriftweiten und Zeilenhöhen, Vermeidung von kritischen Farbkombinationen wie rot/grün bei Hintergrund/Vordergrund - das sind Eigenschaften, die gut besuchte Web-Seiten aufweisen sollten.</p>
<p>Wenn Sie Web-Seiten gestalten, müssen Sie daraus Ihre eigenen Konsequenzen ziehen. Stylesheets erlauben Ihnen völlig neue Möglichkeiten beim Webseiten-Layout. Je intensiver Sie Ihre Layouts jedoch von Stylesheet-Effekten abhängig machen, desto problematischer können die Seiten auf schwacher Hardware oder bei sehschwachen Menschen wirken. Zwar gibt es außer textbasierten Browsern wie Lynx kaum noch Browser mit nennenswerter Verbreitung, die Stylesheets gar nicht unterstützen. Doch bei frühen Varianten von Netscape 4.x, die durchaus noch verbreitet sind, ist leider eine verhängnisvolle Abhängigkeit einprogrammiert: wenn der Anwender dort JavaScript deaktiviert, zeigt der Browser auch keine CSS Stylesheets an. Der Grund dafür ist, dass im Netscape-Browser ursprünglich mal CSS direkt vom JavaScript-Interpreter interpretiert wurde, weshalb es in Netscape 4.x auch eine heute veraltete Zwitter-Syntax namens JSSS gibt, die CSS-Definitionen mittels JavaScript ermöglicht. Einen Vorteil hat diese Spezialität von Netscape 4.x andererseits: wenn Sie dort JavaScript deaktivieren, können Sie Ihre CSS-gestylten Web-Seiten mal ohne CSS-Unterstützung testen. Bei jüngeren Versionen der 4.x-Serie von Netscape lässt sich CSS auch unabhängig von JavaScript deaktivieren. Zu diesem "Härtetest" sollten Sie sich auf jeden Fall zwingen.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><a class="an" name="formate_eigenschaften">CSS-Formate und CSS-Eigenschaften</a></h2>
<p>CSS Stylesheets bestehen aus Formaten, die Sie für bestimmte HTML-Elemente oder für eine bestimmte Auswahl von HTML-Elementen definieren. Zum Auswählen einer bestimmten Gruppe von HTML-Elementen, für die ein Format gelten soll, gibt es in CSS die Syntax der so genannten Selektoren. CSS-Formate lassen sich entweder in einem zentralen Style-Bereich definieren, in einer externen CSS-Datei oder direkt im einleitenden Tag eines HTML-Elements.</p>
<p>CSS-Formate bestehen aus einer oder mehreren Eigenschaften und Wertzuweisungen an diese Eigenschaften. So können Sie beispielsweise ein Format für Überschriften 3. Ordnung definieren, bei dem Sie für Eigenschaften wie Schriftgröße, Schriftfarbe und Absatznachabstand entsprechende Werte bestimmen.</p>
<p>Im Kapitel <img src="../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="formate/index.htm"><b>CSS-Formate definieren</b></a> wird beschrieben, an welchen Stellen Sie CSS in HTML einbinden können, wie die Selektion von Gruppen von HTML-Elementen funktioniert, und welche generellen Regeln für Format-Definitionen gelten. Das Kapitel <img src="../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="eigenschaften/index.htm"><b>CSS-Eigenschaften</b></a> beschreibt dagegen systematisch die einzelnen möglichen Eigenschaften für die Elementformatierung, die Sie innerhalb von Formaten notieren können, und mögliche Wertzuweisungen für diese Eigenschaften.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="formate/einbinden.htm"><img src="../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="formate/einbinden.htm"><b>Stylesheets in HTML einbinden</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="../../html/referenz/varianten.htm"><img src="../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../html/referenz/varianten.htm"><b>HTML-Varianten</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table><table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../index.htm"><b>SELFHTML</b></a>/<a href="../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>CSS Stylesheets</b></a> </td>
</tr>
</table>
<p>© 2001 <img src="../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
