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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Weiterführende HTML-Elemente / Stylesheet-Bereiche in HTML</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie in HTML Bereiche definieren können, innerhalb deren CSS-Formate definiert werden können.">
<meta name="keywords" content="SELFHTML, HTML, Stylesheets, CSS, <style>, type=, media=">
<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/html/transit/stylesheets.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 // HTML == ../index.htm // Weiterführende HTML-Elemente == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</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>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Weiterführende HTML-Elemente</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>Stylesheet-Bereiche in 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="#definieren"><b>Stylesheet-Bereiche definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere_infos"><b>Weitere Informationen</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"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc4.gif" width="30" height="30" border="0" alt="Netscape 4.0"> <a class="an" name="definieren">Stylesheet-Bereiche definieren</a></h2>
<p>Um mit Hilfe von Stylesheets <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/formate/zentrale.htm"><b>zentrale Formate</b></a> zu definieren, können Sie im Kopf einer HTML-Datei einen oder mehrere Style-Sheet-Bereiche definieren.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/style.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
<style type="text/css" media="screen">
<!--
body
{ background-image:url(back.jpg); padding:10px; }
#GrosserText
{ font-size:150px; font-family:"Arial Black",Arial,sans-serif; color:#73FBE7; }
#KleinererText
{ font-size:90px; font-family:"Arial Black",Arial,sans-serif; color:#FFFFFF; }
-->
</style>
</head>
<body>
<div id="GrosserText">CSS</div>
<div id="KleinererText">Stylesheets</div>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code><style></code> leiten Sie innerhalb des HTML-Dateikopfs, also zwischen <code><head></code> und <code></head></code>, einen Bereich zum Definieren von Formaten ein (<i>style = Stil</i>), mit <code></style></code> beenden Sie den Abschnitt. Die Formate, die Sie innerhalb des Bereichs nach der Syntax der Stylesheet-Sprache definieren, gelten dann für die gesamte Datei.</p>
<p>Innerhalb des einleitenden <code><style></code>-Tags müssen Sie mit dem Attribut <code>type=</code> angeben, welche Stylesheet-Sprache Sie innerhalb des Bereichs zum Definieren der Formate benutzen möchten. Die Wertzuweisung besteht im <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../diverses/mimetypen.htm"><b>Mime-Type</b></a> der gewünschten Stylesheet-Sprache. Die gängigste Angabe ist dabei <code>type="text/css"</code>. Mit dieser Angabe bestimmen Sie CSS Stylesheets als Sprache für die Formatdefinitionen. Sie können aber auch andere Sprachen benutzen. Falls Sie mehrere Style-Sprachen innerhalb der gleichen HTML-Datei einsetzen möchten, definieren Sie einfach für jede Sprache einen <code>style</code>-Bereich. Alle Bereiche müssen jedoch im Dateikopf stehen.</p>
<p>Mit dem Attribut <code>media=</code>, das im Gegensatz zu <code>type=</code> kein Pflichtattribut ist, können Sie den Typ des Ausgabemediums bestimmen. Neben der im obigen Beispiel angegebenen Wertzuweisung <code>screen</code> (für das Medium "Bildschirm") gibt es weitere mögliche Angaben - siehe hierzu den Abschnitt <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/formate/einbinden.htm#link_media"><b>Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien</b></a>. Sie können, indem Sie mehrere <code>style</code>-Bereiche definieren, die jeweils unterschiedliche <code>media</code>-Attribute haben, Stylesheets für verschiedene Ausgabemedien definieren.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Es ist empfehlenswert, den Inhalt von Style-Sheet-Bereichen in einen <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/kommentare.htm"><b>Kommentar</b></a> (<code><!--</code> bis <code>--></code>) zu setzen, so wie im obigen Beispiel. Dadurch verhindern Sie, dass ältere Browser die Inhalte irrtümlich als Text anzeigen.</p>
<p>Auf die Stylesheet-Angaben wird hier nicht näher eingegangen. Lesen Sie dazu die entsprechenden Abschnitte innerhalb dieser Dokumentation.</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="weitere_infos">Weitere Informationen</a></h2>
<p>In der <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../referenz/index.htm"><b>HTML-Referenz</b></a> finden Sie genaue Angaben darüber, wo Style-Bereiche vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#style"><b>Element-Referenz</b></a> für Style-Bereiche<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#style"><b>Attribut-Referenz</b></a> für Style-Bereiche</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="scripts.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="scripts.htm"><b>Script-Bereiche in HTML</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="../layer/anordnen.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="../layer/anordnen.htm"><b>Layer anordnen und kontrollieren</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>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Weiterführende HTML-Elemente</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>
|
