![[Cascading Style Sheets]](images/title.jpg)
![[Vorherige Seite]](../img/back.gif){kind=small}
![[Naechste Seite]](../img/weiter.gif){kind=small}
![[Inhalt dieses Abschnitts]](../img/inhalt.gif){kind=small}
![[Home Page]](../img/home.gif){kind=small}
Styles können auf verschiedene Arten in Dokumente eingefügt werden:
- durch linking (Verbinden) einer separaten Style Sheet-Datei mit einer oder mehreren Webseiten
Das ist die Methode, die ich empfehle, weil sie es erlaubt, ein einziges Style Sheet für viele Seiten, vielleicht sogar für Ihre ganze Site zu verwenden, was am effizientesten ist. (Das funktioniert unter Umständen nicht, wenn Sie dazu neigen, die Formatierung auf jeder Seite stark abwandeln, was aber generell keine gute Idee im Sinne der effektiven Kommunikation ist.) Es trennt auch die Styleangaben völlig von den Inhalten der Seiten, was verhindert, daß Browser ohne CSS-Fähigkeiten die Styleinformationen für Seiteninhalte halten.
In diesem Fall definieren Sie die Styles in einer separaten Datei mit der Endung .css und verweisen darauf mit einem link-Tag, das in den Abschnitt head jeder HTML-Datei eingebaut wird, die das jeweilige Style Sheet benutzen soll:
Beispiel
<html>
<head>
<link rel=STYLESHEET href="../../styles/ie4.css" type="text/css">
<title>...</title>
</head>
<body>...Beachten Sie das Attribut "type=text/css", auch benutzt im <style> Tag unten, wodurch diese Angabe als Cascading Style Sheet identifiziert wird. (Die neueste Version des Internet Explorer benötigt das nicht mehr, aber es ist am sichersten, es einzubauen, da andere Browser es vielleicht brauchen, wenn sie die Unterstützung für Style Sheets einbauen.)
- durch embedding (Einbetten) eines Style Sheets in eine einzelne Webseite
In diesem Fall definieren Sie die Styles in einem style-Tag, das zwischen dem <html>-Tag und dem <body>-Tag steht:
Beispiel
<html>
<style type="text/css">
<!--
P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }
H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }
-->
</style>
<head>...</head>
<body>...Beachten Sie, daß die genauen Style-Angaben (auf die ich auf den folgenden Seiteneingehen werde) in einem comment (Kommentar)-Tag eingebettet sind -- das stellt sicher, daß Browser, die keine CSS unterstützen, diese Zeilen nicht als darzustellenden Inhalt interpretieren.
- durch Hinzufügen von inline style attributes zu Tags wie <p>, <div> oder <span>
In diesem Fall geben Sie einen Style für einen einzelnen Block Text an oder benutzen das <span>-Tag, um den Style für ein Wort oder einen Satz anzugeben:
Beispiel
<div style="margin-left: 0.5in; font-size: 10pt">
Das würde einen eingezogenen Absatz mit
<span style="font-weight: bold; background: #FFFF00">hervorgehobenem Text</span>
darin ergeben
</div>
Bernhard Friedrich