Grundlagen
inline Blocks
externe Style Sheets
Mit Cascading Style Sheets kann man der Seite globale Formatierungen mitgeben. Style Sheets (und Layers) erlauben aber auch das genaue Positionieren von Bild- und Textelement auf der Seite. Dabei ist es leider so, das IE und Netscape für einige Funktionen andere Befehle und Möglichkeiten kennen und brauchen und man muss halt für vieles 2 Varianten lernen und anwenden können. Es gibt 2 Arten von Style Sheets, inline Blocks und externe Style Sheets. Mit inline Blocks kann man die Formatierungen einer einzelnen Seite festlegen. Will man mehrere Seiten gleich formatieren muss man den Block in jeder Seite einfügen oder man kann das ganze als Datei speichern und jede einzelne Seite dazu verknüpfen.
Inline Blocks werden foldgendermassen definiert:
Tag {definition; definition; definition} zum Beispiel;
H2 {font-size: 16pt; font-style: bold; font-family: arial}
Die Blocks werden innerhalb der <head></head> - tags eingefügt, sie müssen ja zuerst geladen werden, damit die html-Seite von Anfang an richtig formatiert werden kann.
z.B.:
<head>
<style text=2text/css">
<!--body {background: #CC3300}
a:link {color: #FFFFFF; font-decoration:none}
h2 {font-size: 16pt; font-style: bold; font-family: arial}-->
</style>
</head>
Wenn man den oberen Block sowohl in Netscape, wie auch in IE ausprobiert, merkt man, dass die Definitionen, die sich auf den Hyperlink beziehen, nur in Netscape funktionieren. Es kann sehr mühsam werden eine Lösung zu finden, die für alle Browser funktioniert.
Ein Paar Definitionen:
für Text:
font-family: z.B. arial, helvetica, courier
font-style: normal, italic, small caps, oblique
font-size: in pt, in, cm, px oder %
font-weight: extra-light, light, demi-light, medium, bold, demi-bold, extra-bold
text-decoration: none, italic, blink, underline, line-through, overline
word-spacing und letter-spacing: pt, in, cm, px, %
text-transform: capitalize, uppercase, lowercase
color: in hexadezimalem Wert
für den body-tag:
margin-left, margin-right und margin-top: in pt, in, cm oder px
line-height: Abstand zwischen den Linien
background-color, hexadezimaler Wert
background-attachment: scroll oder fixed
Vielleicht will man dem tag <h1> aber 2 verschiedene Varianten von Formatierung geben können, dann kommen 'classes' ins Spiel:
h1.eins {font-size: 20pt; color: #123456}
h1.zwei {font-size: 25pt; color: #FF0066}
Will man ein <h1>-tag im Dokument verwenden muss man es mit seiner richtiogen
'class' aufrufen:
<h1 class="eins">das ist die erste Formatierung</h1>
<h1 class="zwei">das ist die zweite Formatierung</h1>
Externe Style-Sheets sind nichts anderes als Dokumente, die die obenbeschriebenen
Befehle enthalten und als *.css gespeichert sind. Sie müssen dann auf jeder
einzelnen Seite des Sites aufgerufen werden mit folgendem Link:
<link rel=stylesheet href="http://www.meineseite.ch/*.css" type="text/css">