Cascading Style Sheet

Definition eines Stils

Label	{ Attribut:Wert;	Attribut:Wert;	}
Beispiel zum Ändern der H2-Überschriften:
H2	{ background-color:lightyellow;	text-align:center;	}

/* Kommentare */ werden wie bei C in /* und */ eingeschlossen.

Ort der Definition

Die Stile können direkt in jedem Tag definiert werden.

<H2 style="color:red;"> &Uuml;berschrift in rot </H2>
  ergibt:
 Überschrift in rot

Die Stile können im Kopf des HTML-Dokuments definiert werden. Dann sind sie für das komplette Dokument gültig. Dazu werden sie in das Tag-Paar style eingebettet. Das Beispiel würde alle H2-Überschriften des Dokuments rot färben.

<style type="text/css">
<!--
H2 {color:red;}
-->
</style>
</head>

Werden die Stile in mehreren Dateien gebraucht, wie das bei den meisten Webseiten ist, so können sie in einer separaten Datei abgelegt werden, die von den einzelnen Seiten durch eine Zeile eingebunden wird:

<link rel=stylesheet type="text/css" href="aw.css">

Schriften

font-weight

normal bold bolder light lighter. Man kann auch einen Wert von 100 bis 900 in Hunderterschritten angeben.

font-style

italic oder normal

font-size:

Es gibt sprechende Namen für die Zeichensatzgröße:
sxx-small, x-small, small, medium, large, x-large, xx-large, smaller und larger.
Daneben kann man auch direkte Größenangaben machen.

pt	Punkt (= 1/72 inches)
pc	Pica (= 12 Punkt)
in	Inch (= 2,54 cm)
mm	Millimeter
cm	Zentimeter

font-family

Hier werden die Namen der Schriftarten angegeben. Bereits vordefiniert sind: serif, sans-serif, cursive, fantasy und monospace. Bei den anderen Schriften besteht die Abhängigkeit davon, welche Schriften auf dem Rechner installiert sind.

Man kann die Attribute zusammenfassen, indem man einfach font: angibt. Weitere Textmanipulationen sind mit folgenden möglich.

color: Angegeben wird die Farbe, in der der Text erscheinen soll.
background-color: Angegeben wird die Farbe, in der der Hintergrund erscheinen soll.
text-decoration: underline line-through blink none
text-shadow: Hier wird die Farbe des Schattens angegeben oder none für keinen Schatten.

Rand

border-width: Die Breite des Randes. Mögliche Werte sind: thick, thin und medium.
border-color: Farbe des Randes.
border-style: none dotted dashed solid groove ridge inset outset

Abstand

Die Abstäde zu den Nachbarn ist durch die Tags margin-top , margin-bottom, margin-left und margin-right eingestellt.

text-indent stellt die Erstzeileneinrückung ein.

Die horizontale Ausrichtung erfolgt mit text-align . Die Werte sind left center right und justify (Blocksatz). Vertikal ist es vertical-align. Die Werte hier sind top middle bottom sub und super.

Der white-space kann auf pre oder nowrap eingestellt werden. Zurückgesetzt wird er durch normal.

Spezialitäten der verschiedenen Browser

Netscape Navigator

Bei der folgenden Kontruktion <H2><A name="xxx"> Ueberschrift </H2> verschwindet der komplette Text, wenn man versucht einen Rahmen für H2 zu definieren. Durch Herausnehmen des A-Tags aus dem H2 geht es wieder. <A name="xxx"><H2>Ueberschrift </H2>

Eine width:100% funktioniert nur, wenn ein border definiert wurde. Dazu reicht es, border:none; anzugeben.

Beliebige Ausschnitte des Textes: span

CSS kann auch mitten im Text verwendet werden. Dazu kann das Tag span verwendet werden. Es umklammert einen beliebigen Bereich und eignet sich dazu, diesem direkt einige Style Sheet Eigenschaften zuzuordnen. Dieser Absatz wurde mit
<span style="float:left; width:1px;"><font size=8>CSS</font></span>
eingeleitet. Auf diese Weise kann das Wort CSS umflossen werden. Dabei ist float das Schlüsselwort, das angibt, dass der Text umflossen wird.

Homepage