HTML-Schule

In diesem Kapitel lernst du, wie man mit CSS unterschiedliche Farben, Schriften, Innen- und Aussenabstände, Rahmen, Farben, Hintergrundbilder und Pseudoformate für Hyperlinks definiert

Wiederholung

Im letzten Kapitel haben wir gelernt, wie man eine Seite mit einem frameset teilt, wie du Fenstergrößen und Rahmen festlegst und wie du eingebettete Rahmen in eine Einzelseite einfügst.

Einführung

Du fragst dich vielleicht: "Was ist CSS? Und wozu brauche ich CSS?".

Nun zur ersten Frage: CSS ist eine Beschreibungssprache, wie HTML, und bietet als solche Möglichkeiten, die weit über Formatierungen, die mit reinem HTML erreicht werden können, hinausgehen. Sie ist dabei, ebenso wie HTML eine recht einfach zu lernende und anzuwendende Sprache, die von allen moderneren Browsern sehr gut und auch einheitlich interpretiert wird.

Ältere Browser, wie auch der alte NS 4.75, beherrschen diese Sprache dagegen nicht, oder haben ihre lieben Probleme damit.

Wir arbeiten bei der CSS-Deklaration vor allem mit dem style-Tag, und wie der Name vermuten lässt, geht es dabei vor allem um "Styling". Du kannst

• im Dateikopf mit dem style-Tag zentral Formate für die ganze Seite notieren,
• in einer externen Stylesheetdatei *.css Formatfestlegungen für ein gazes Webprojekt definieren, oder auch
• einzelne Elemente auf der Seite mit dem style-Attribut direkt formatieren

Um die Leistungsfähigkeit von CSS in Unterschied zu "normalem" HTML zu demonstrieren, gebe ich dir einmal ein Beispiel für eine Direktformatierung an einer Überschrift 1. Grades mit style="":

Dieser Text ist mit CSS formatiert.

So sieht der Quelltext aus:

<h1 style="letter-spacing:5px; font-family:Fantasy; text-align:right;
color:#993333; border-bottom:double #cc6633; width:400px; font-size:24pt">
Dieser Text ist mit CSS formatiert.</h1>

Eingeleitet wird die CSS-Direktformatierung durch die Notierung des style-Attributs style="" in der zu formatierenden Marke. Formatiert wird mittels Notierung von

1. Anzusprechende Eigenschaft, z.B. "letter-spacing" (Abstand zwischen einzelnen Buchstaben) gefolgt durch einen Doppelpunkt ":", und
2. Wertzuweisung an die Eigenschaft z.B. "5px" (fünf Pixel)
3. abgeschlossen wird jede Einzelanweisung durch einen Strichpunkt ";"
4. Dann folgt die nächste Anweisung, wieder abgeschlossen durch einen Strichpunkt, und so immer weiter. Nur bei der letzten Anweisung kann der abschließende Strichpunkt entfallen!

Eine solche direkte Formatierung einzelner Elemente bewirkt zwar Effekte, die mit klassischem HTML nicht oder nur sehr mühsam zu erzeugen sind, doch richtig nützlich wird CSS erst durch zentrale Formatfestlegungen - siehe nächster Absatz - und das ist auch die Antwort auf unsere zweite Frage, "wozu brauche ich CSS?":

Die zentrale Formatierung macht den Quelltext schlank, beschleunigt den Seitenaufbau durch den Browser und erleichtert das bequeme und übersichtliche Aktualisieren bestehender Layouts, da dabei der eigentliche Seiteninhalt selbst nicht bearbeitet werden muss.

TIP: Um dir zu demonstrieren, wie "nackig" eine mit CSS formatierte Seite aussieht, wenn man das zentrale CSS-Styling probeweise abschaltet, musst du nur den Qelltext dieser Seite aufrufen und den style-Tag im Kopfbereich löschen.

Weil das vielleicht ein bisschen umständlich ist: du kannst auch hier klicken: CSS abschalten, nur die Direktformatierung mit CSS funktioniert dann noch.

Um diesen Befehl wieder rückgängig zu machen, hier klicken und CSS wieder anschalten

Wie eine solche zentrale Formatfestlegung mit CSS und dem style-Tag funktioniert, siehst du im nächsten Absatz:

Zentrale Style-Definitionen im Seitenkopf vornehmen

In Kapitel 3. Inhalt - Seite teilen: mit Frames oder verborgenen Tabellen arbeiten haben wir schon einmal angetippt, wie eine zentrale Festlegung von Formaten im Dateikopf funktioniert. Du erinnerst dich an das Beispiel 15:

Um die Abstände der Tabelle zum Rand des Fensters, die der Browser automatisch erzeugt, zu unterdrücken habe ich bei Beispiel 15 bereits ein bisschen CSS angewendet.

Der Quelltext sah folgendermaßen aus:

Beispiel 15

<style type="text/css">
<!-- 
body { margin:0 } 
table { height:100%; }
td { vertical-align:top; }
#kopf { height:40px; }
-->
</style>

Eingeleitet wird die zentrale Formatierung im Kopfbereich der HTML-Seite durch Notierung von <style type="text/css">, abgeschlossen wird mittels </style>. Alle Format-Anweisungen werden für Browser, die kein CSS kennen, mittels Einfassung in Kommentarmarken <!-- --> maskiert. Als erstes wird der body-Bereich mit body {} angesprochen. Durch Ansprechen der Eigenschaft margin: (Randabstand) und Wertzuweisung von 0 an diese Eigenschaft füllt der Seiteninhalt die Seite komplett aus - die Randabstände werden unterdrückt (Leider funktioniert diese Methode und manche andere CSS-Formatierung nicht bei Netscape 4.x ). Dann habe ich mit table { height:100%; } die Höhe der Tabelle auf die ganze Seitenhöhe ausgedehnt und den Inhalt aller Zellen mit td { vertical-align:top; } am oberen Zellenrand ausgerichtet.

Um denselben Effekt (Ausrichtung aller Zelleninhalte am oberen Rand) mit klassischem HTML zu erreichen hätte es der Notierung von valign="top" in allen Zellen aller Tabellen bedurft. In CSS reicht die einmalige Angabe td { vertical-align:top } im Kopfbereich - Du siehst, wie CSS Schreibarbeit spart.

Klassen definieren

Manchmal möchte man gerne ein Element, das sehr oft verwendet wird, auf verschieden Arten formatieren. Zum Beispiel Absätze mit sehr kleinem und Absätze mit eingerücktem Text u.s.w. verwenden. Dazu kann man mit CSS das Element in verschieden Klassen aufspalten.

Eine ausgedehntere Formatierung unter Verwendung von differenzierten Klassen für die Absatzmarke p zeigt uns

Beispiel 20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Klassen in CSS am Beispiel Absatzmarken</title>
<style type="text/css">
<!-- 
p {
font-family:Verdana,sans-serif;
font-size:12px;
 }
p.klein { font-size:9px; } 
p.eingerueckt { margin-left:80px;  }
p.grau { color:#999;}
p.auf_grau {
background-color:#eee;
border: 1px solid #ccc;
padding: 10px 15px 25px 15px;
}
p.fett { font-weight:bold; }
p.fetter { font-weight:900; }
-->
</style>
</head>
<body>
<p>Das ist ein Beispieltextabsatz, hier haben wir ganz normalen
Text in einer Absatzmarke</p>
<p class="klein">Das ist ein Beispieltextabsatz, dieser Text
gehört zur Klasse ".klein"</p>
<p class="eingerueckt">Das ist ein Beispieltextabsatz, dieser
Text gehört zur Klasse ".eingerueckt"</p>
<p class="grau">Das ist ein Beispieltextabsatz, dieser Text
gehört zur Klasse ".grau"</p>
<p class="auf_grau">Das ist ein Beispieltextabsatz, dieser Text
gehört zur Klasse ".auf_grau"</p>
<p class="fett">Das ist ein Beispieltextabsatz, dieser Text
gehört zur Klasse ".fett"</p>
<p class="fetter">Das ist ein Beispieltextabsatz, dieser Text
gehört zur Klasse ".fetter"</p>
</body>
</html>

Mit p { font-family:Verdana,sans-serif; font-size:12px; } legst du für alle Arten von Absätzen generell eine einheitliche Schriftart und Schriftgröße fest. Dann definierst du unterschiedliche Klassen, für die jeweils besondere Eigenschaften zusätzlich gelten: kleinen, eingerückten und grauen Absatztext u.s.w.:
p.klein { }
p.eingerueckt { }
p.grau { }
Den Klassennamen (klein, grau, eingerueckt) hängst du durch einen Punkt (.) getrennt an die Elementbezeichnung, für die die Klasse gelten soll (in dem Beispiel also "p") an. In die geschweiften Klammern { } schreibst du dann alle Eigenschaften, die für diese besondere Klasse, ergänzend zu den bereits in p { } notierten universellen Eigenschaften gelten sollen.

Den einzelnen Absätzen im body weist du dann mit dem class-Attribut eine der vorher im Kopf festgelegte Klassen zu, z.B. <p class="klein">. Ergebnis: Der Text wird im Browser klein angezeigt.

Es geht aber auch anders: du musst dich nicht auf ein spezielles Element allein festlegen. Du kannst eine spezielle Klasse auch für verschiedene Elemente verwenden. Dazu muss die Elementangabe nur durch ein Sternchen ersetzt werden oder einfach ganz entfallen. Also statt p.spezial { } schreibst du *.spezial { } oder auch .spezial { }. Siehe

Beispiel 21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Eine Klasse für alle</title>
<style type="text/css">
<!-- 
.spezial { font-variant:small-caps; letter-spacing:3pt; } 
-->
</style>
</head>
<body>
<h1 class="spezial">Spezieller Text</h1>
<h2 class="spezial">Spezieller Text</h2>
<p class="spezial">Spezieller Text</p>
<b class="spezial">Spezieller Text</b><br>
<br>
<i class="spezial">Spezieller Text</i><br>
<br>
<small class="spezial">Spezieller Text</small><br>
</body>
</html>

Im Kopfbereich wird eine Universalklasse .spezial festgelegt - mittels font-variant:small-caps; wird beliebiger Text der Klasse .spezial automatisch in kleinen Großbuchstaben, ("Kapitälchen") dargestellt. Durch die Anweisung letter-spacing:3pt wird der Abstand zwischen einzelnen Buchstaben auf drei Punkt vergrößert.

Im body-Bereich der Seite werden dann die so definierten Klasseneigenschaften mit class="spezial" unterschiedlichen Marken zugewiesen. So erhält zuerst eine Überschrift 1.Ordnung, eine 2. Ordnung, ein Absatz, fetter Text, u.s.w. eine spezielle, zusätzliche Formatierung in Großbuchstaben und weitlaufender Schrift, die sich je nach Marke unterschiedlich auswirkt.

CSS-Formate seitenübergreifend auslagern

Möchtest du deine zentralen Formatfestlegungen im style-Tag in mehreren oder besser allen Seiten des Webprojektes verwenden, so ist es ausgesprochen mühsam und auch unpraktisch, die Stylesheet-Anweisungen einfach in den Kopfbereich aller Dateien einzukopieren. Denn:

1. braucht das überflüssigen Platz!
2. müssten Änderungen am Styling an allen Dateien des Projekts einzeln durchgeführt werden - Das ist unnütze Schreibarbeit!

Darum ist es besser die CSS-Anweisungen in eine zentrale Stylesheet-Datei auszulagern. Eine typische ausgelagerte CSS-Datei zeigt

Beispiel 22.

/*So kannst du Formate mit
 CSS in einer
 externen Datei festlegen:*/
body {
 font-size:9pt;
 margin:20px 30px 80px 30px;
 background-color:#eeeeee;
 background-image:url(img/kartusche.JPG);
 background-repeat:no-repeat;
 background-position:500px 20px;
 font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular,sans-serif;
}
img { border:0; margin:0}
*.nach_rechts  { float:right; }
...

Da Browser die Dateien mit der Endung .css nur lesen und ausführen, aber den Dateiinhalt selbst nicht im Browserfenster anzeigen können, habe ich die Datei zusätzlich noch einmal mir der Dateiendung .txt als Textdatei abgespeichert.

Damit Browser die Formatdefinitionen der CSS-Datei auf eine einzelnen Datei anwenden, wird nun folgender Link auf die CSS-Datei im Kopfbereich der Seite eingefügt, wie in

Beispiel 23:

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

Um die Auswirkung der ausgelagerten CSS-Datei Beispiel 22 auf das Seitenlayout zu sehen, öffne

Beispiel 23.

Die gleiche Datei ohne CSS siehst du in

Beispiel 24

Innen- und Aussenabstände festlegen

Wie Abstände festgelegt werden, zeigte uns bereits

Beispiel 20

<style type="text/css">
<!-- 
p {
font-family:Verdana,sans-serif;
font-size:12px;
 }
p.klein { font-size:9px; } 
p.eingerueckt { margin-left:80px;  }
p.grau { color:#999;}
p.auf_grau {
background-color:#eee;
border:1px solid #ccc;
padding:10px 15px 25px 15px;
}
p.fett { font-weight:bold; }
p.fetter { font-weight:900; }
-->
</style>

Einen linken Aussenrandabstand erzeugst du mit margin-left:. Ebenso erzeugt:

• margin-right: rechten Aussenrandabstand
• margin-top: oberen Aussenrandabstand
• margin-bottom: unteren Aussenrandabstand

Es sind auch kombinierte Angaben zum Aussenrand mit margin: Wert#1 Wert#2 Wert#3 Wert#4 möglich.

• Wert#1 = Oberer Abstand
• Wert#2 = Rechter Abstand
• Wert#3 = Unterer Abstand
• Wert#4 = Linker Abstand

Also zum Beispiel: margin:10px 15px 25px 15px;

Angaben zu Wert# machst du mit einer Zahlenangabe + Angabe zur Einheit, z.B. 30px. Andere mögliche Einheiten sind:

• mm = Angabe in Millimetern
• cm = Angabe in Zentimetern
• pt = Angabe in Punkt
• in = Angabe in Inches
• pc = Angabe in Pica
• % = Angabe in Prozent

Ebenso wie margin einen Aussenabstand erzeugt, erzeugt padding einen Innenabstand. Es sind wie bei margin sowohl Einzelangaben (z.B. padding-left:30%) als auch kombinierte Anngaben möglich (z.B. padding: 10px 15px 25px 15px;)

Rahmen festlegen

Die Notierung border: 1px solid #ccc;ist eine kombinierte Angabe zum Rahmen. Ebenso kannst du auch schreiben: border-width:1px; border-style:solid; border-color:#ccc;. In der folgenden Tabelle habe ich dir eine kleine Übersicht über die vielen verschiedenen Rahmen zusammengestellt:

Hintergrundfarben und -Bilder programmieren

Allgemeine Informationen über Farben auf Webseiten findest du nicht hier, sondern in 4. Inhalt - Farben verwenden

In Beispiel 23 haben wir eine Hintergrundfarbe für die ganze Seite und auch eine Hintergrundgrafik bestimmt. Öffne nochmal

Beispiel 23.

/*So kannst du Hintergrundfarben
 und Hintergrundbilder mit
 CSS festlegen:*/
body {
 font-size:9pt;
 margin:20px 30px 80px 30px;
 background-color:#eeeeee;
 background-image:url(img/kartusche.JPG);
 background-repeat:no-repeat;
 background-position:500px 20px;
 font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular,sans-serif;
}
img { border:0; margin:0}
*.nach_rechts  { float:right; }
...

Eine Hintergrundfarbe, egal für welches Element auch immer, es kann auch eine Tabelle, eine Überschrift oder ein inline-Element sein, wird mit background-color:eingeleitet. Danach erfolgt wieder die Wertzuweisung an die Eigenschaft background-color: In unserem Beispiel mit einer hexadezimalen Farbangabe, welche immer durch ein Gatterzeichen (#) eingeleitet wird (du kennst es bereits vom bookmark. Mit den ersten beiden Zahlen bestimmst du den Rotanteil der Farbe. Mit den zweiten beiden Zahlen den Grünanteil - und schließlich mit den letzten beiden Zahlen den Blauanteil. Da der Wert in unserem Beispiel bei allen Farbkomponenten gleich ist ( drei mal "ee") liefert diese Farbangabe einen Grauton. Dieser Grauton ist ziemlich hell, ja fast weiss - da der Wert "ee" recht hoch ist. Niedrigere Werte liefern dunklere Töne.

Ziemlich zu recht könntest du jetzt einwenden das "ee" keine Zahl sondern doch zwei Buchstaben sind. Doch tatsächlich ist "ee" hier eine Zahl - eine hexadezimale Zahl eben!

Mehr allgemeine Informationen über Farben auf Webseiten findest du in 4. Inhalt - Farben verwenden

Das im Beispiel 23 oben links angezeigte Bild findest du nicht im Quelltext der Datei - denn es wurde mit CSS über die ausgelagerte Stylesheet-Datei (Beispiel 22) eingefügt!

Eine Hintergrundgrafik fügst du per CSS mit background-image:url(); in der ausgelagerten CSS-Datei oder im Style-Bereich einer Einzelseite ein. In die runden Klammern schreibst du die Pfadangabe zur Grafik, in diesem Falle also: img/kartusche.JPG, da sich die Grafik kartusche.JPG in dem Unterverzeichnis img befindet.

Alles über Pfadangaben in HTML findest du in HTML 3: Bilder einfügen/Pfadangabe.

Durch die folgende Angabe background-repeat:no-repeat; wird der automatische Wiederholungseffekt (=Kachelung) abgeschaltet. Weitere mögliche Werte für background-repeat sind:

• repeat (Standardeinstellung des Browsers) für Kacheleffekt
• repeat-x für nur horizontale Wiederholung der Hintergrundgrafik
• repeat-y für nur vertikale Wiederholung der Hintergrundgrafik

Die Angabe background-position:500px 20px; positioniert die Hintergrundgrafik mit einem Abstand von 20 Pixeln zum oberen und 500 Pixeln zum linken Seitenrand.

Um die Hintergrundgrafik am rechten Rand des Elements anzuzeigen (Beispiel: Kapitelüberschriften <h3> dieser Seiten) notierst du: background-position:right, ebenso möglich ist background-position:center für mittige Darstellung.

Ausgesprochen nützlich ist die CSS auch für die Festlegung von Hover-Effekten für Hyperlinks:

Pseudoformate für Hyperlinks zentral festlegen

Mit CSS lassen sich Formate für Hyperlinks im Dateikopf festlegen. Wie das dann aussieht, zeigt dir

Beispiel 25:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hyperlinks mit CSS formatieren</title>
<style type="text/css">
<!-- 
a:link, a:visited {
font-family:Verdana,sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:none;
}
a:link { color: #996666; }
a:visited { color: #336600; }
a:active, a:hover, a:focus {
text-decoration:underline;
font-weight:bold;
color:#336666; 
}
-->
</style>
</head>
<body>
<a href="#">startseite</a> | <a href="#">schulprofil</a> | <a
href="#">mitarbeiter</a> | <a href="#">partner und sponsoren</a>
| <a href="#">schulgeschichte</a> | <a href=
"#">g&auml;stebuch</a> | <a href="#">impressum</a> | <a href=
"#">kontakt</a>
</body>
</html>

Einzelne Browser unterscheiden bis zu fünf unterschiedliche Pseudoformate für Links. Siehe folgende Tabelle:

Damit die Pseudoformate auch wie beabsichtigt funktionieren, musst du sie in der richttigen Reihenfolge notieren:
:link, :visited, :hover, :active. Die Browser Netscape 4.x und der Internet Explorer 3.0 interpretieren leider noch nicht alle diese Angaben. Doch Netscape-Browser über Version 4.x, neuere Browser von Mozilla und Opera kennen inzwischen auch das Pseudoformat a:hover. Der Internet Explorer 5.x reagiert hingegen leider noch nicht auf das Pseudoformat a:focus.

An unserem Beispiel dürfte dir ganz nebenbei folgende Besonderheit aufgefallen sein - siehe gelbe Markierung: Es stehen dort teilweise mehrere Pseudoformate, durch Kommas getrennt hintereinander: a:link, a:visited {...}. Dies bewirkt, dass die Formatierung in den geschwungenen Klammern für beide gilt!

Weiter geht's: