HTML 4 - Zusatzwissen zur Gestaltung von - HERDT

HTML4F
Autor: Heiko Schröder
Inhaltliches Lektorat: Andreas Dittfurth
5. Ausgabe, 3. Aktualisierung, März 2012
© HERDT-Verlag für Bildungsmedien GmbH, Bodenheim
Internet: www.herdt.com
Alle Rechte vorbehalten. Kein Teil des Werkes darf in
irgendeiner Form (Druck, Fotokopie, Mikrofilm oder einem
anderen Verfahren) ohne schriftliche Genehmigung des
Herausgebers reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden.
Dieses Buch wurde mit großer Sorgfalt erstellt und geprüft. Trotzdem können Fehler nicht vollkommen ausgeschlossen werden. Verlag, Herausgeber und Autoren
können für fehlerhafte Angaben und deren Folgen weder
eine juristische Verantwortung noch irgendeine Haftung
übernehmen.
Sollte es uns trotz intensiver Recherchen nicht gelungen
sein, alle Rechteinhaber der verwendeten Quellen und
Abbildungen zu finden, bitten wir um kurze Nachricht an
die Redaktion.
Die in diesem Buch und in den abgebildeten bzw. zum
Download angebotenen Dateien genannten Personen und
Organisationen, Adress- und Telekommunikationsangaben,
Bankverbindungen etc. sind frei erfunden. Übereinstimmungen oder Ähnlichkeiten mit lebenden oder toten Personen sowie tatsächlich existierenden Organisationen oder
Informationen sind unbeabsichtigt und rein zufällig.
Die Bildungsmedien des HERDT-Verlags enthalten Links
bzw. Verweise auf Internetseiten anderer Anbieter. Auf
Inhalt und Gestaltung dieser Angebote hat der HERDTVerlag keinerlei Einfluss. Hierfür sind alleine die jeweiligen
Anbieter verantwortlich.
HTML 4
Zusatzwissen zur Gestaltung
von Webseiten
HTML4F
I
HTML 4 - Zusatzwissen zur Gestaltung von Webseiten
Einführung
1 Was Sie wissen sollten ............................4
2 Erweiterte HTML-Tags .............................6
2.1
Grundlegende Begriffsdefinitionen .............. 6
2.2
Die verwendete doctype-Deklaration.......... 7
2.3
Universalattribute .......................................... 7
2.4
Multimedia-Objekte....................................... 9
2.5
Meta-Tags ..................................................... 11
Optische Gestaltung mit CSS
3 Grundlagen von CSS ..............................16
3.1
Entwicklung von CSS .................................... 16
3.2
Stylesheets einbinden .................................. 17
3.3
Definitionen vererben.................................. 22
3.4
Kommentare................................................. 26
3.5
Übung ........................................................... 26
Interaktion und Dynamik mit JavaScript
7 JavaScript ............................................... 70
7.1
Grundlegendes zu JavaScript........................70
7.2
JavaScript im Browser aktivieren..................70
7.3
JavaScript-Aktivierung im Browser testen ...72
7.4
Das Grundgerüst ...........................................73
7.5
Kommentare .................................................75
7.6
Datentypen....................................................75
7.7
Bezeichner .....................................................77
7.8
Variablen .......................................................78
7.9
Operatoren....................................................78
7.10
Programmsteuerung .....................................80
7.11
Auswahl .........................................................80
7.12
Wiederholung ...............................................81
7.13
Schleifensteuerung .......................................83
7.14
Übung ...........................................................84
8 Funktionen in JavaScript ...................... 86
8.1
Interaktionen ................................................86
8.2
Funktionen ....................................................89
8.3
Objektunabhängige Funktionen ..................94
4 CSS, Schriftformatierung ......................28
4.1
Übersicht der möglichen
Schriftformatierungen ................................. 28
4.2
Schriftart und -größe ................................... 28
9.1
Einführung in das Objektmodell ..................96
Schriftschnitt................................................. 29
9.2
Objekt navigator........................................97
4.4
Angabe der Schrift in Kurzform .................. 31
9.3
Objekt window ..............................................99
4.5
Text ausrichten ............................................. 32
9.4
Objekt document........................................102
Groß- und Kleinschreibung.......................... 34
9.5
Objekt event ..............................................104
Text hervorheben ......................................... 35
9.6
Objekt history ..........................................107
4.8
Textabstände ................................................ 36
9.7
Objekt location........................................108
4.9
Umrandungen und Abstände ...................... 40
9.8
Objekt frames ............................................109
Texteinzug .................................................... 42
9.9
Vordefinierte Objekte in JavaScript ...........112
4.11
Listen formatieren........................................ 43
9.10
Übung .........................................................120
4.12
Übung .......................................................... 45
4.3
4.6
4.7
4.10
9 Objektmodell in JavaScript .................. 96
10 Zugriff auf HTML-Elemente ................ 122
5 CSS, Farben und Hintergründe .............48
10.1
Grundlagen zum document-Objekt ...........122
Die möglichen CSS-Eigenschaften ............... 48
10.2
Unterobjekt anchors .................................123
5.2
Syntax zur Farbdefinition............................. 48
10.3
Unterobjekt links .....................................123
5.3
Textfarben definieren .................................. 49
10.4
Unterobjekt applets .................................123
Hintergründe................................................ 49
10.5
Unterobjekt forms .....................................124
Übung ........................................................... 56
10.6
Eingabefelder..............................................125
10.7
Kontroll- und Optionsfelder .......................125
10.8
Auswahllisten ..............................................126
10.9
Schaltflächen ...............................................128
5.1
5.4
5.5
6 CSS, Elemente positionieren ................58
2
6.1
Eigenschaften für die Elemente .................. 58
10.10 Eingaben überprüfen..................................128
6.2
Elemente positionieren................................ 58
10.11 Unterobjekt images ...................................131
6.3
Größenangaben ........................................... 61
10.12 Übung .........................................................134
6.4
Unsichtbare Elemente .................................. 64
6.5
Ebenen anlegen ........................................... 66
6.6
Service im Internet ....................................... 67
6.7
Übung ........................................................... 68
© HERDT-Verlag
I
Inhalt
11 Dynamic HTML......................................136
11.1
Bestandteile des dynamischen HTML......... 136
11.2
DOM-Standard ermitteln............................ 137
11.3
Container erstellen ..................................... 138
11.4
Ebenen anzeigen und verbergen............... 138
11.5
Ebenen positionieren.................................. 140
11.6
Ebenen bewegen ........................................ 142
11.7
Umfangreiches Beispiel .............................. 144
11.8
Übung ......................................................... 150
Anhang
A1 Cascading-Style-Sheet-Referenz ...... 160
A2 JavaScript-Objektreferenz ................ 164
A3 DOM-Referenz .................................... 168
Stichwortverzeichnis ............................... 170
Grundlagen zu AJAX
12 Kurzeinstieg in AJAX ...........................152
12.1
Was steckt hinter AJAX?............................. 152
12.2
Das XMLHttpRequest-Objekt.................... 152
12.3
Was ist noch möglich? ................................ 158
© HERDT-Verlag
3
3
HTML 4 - Zusatzwissen zur Gestaltung von Webseiten
3
Grundlagen von CSS
In diesem Kapitel erfahren Sie
f was Stylesheets sind und was sie bewirken
f die erweiterten Funktionen zum Definieren von Stylesheets
f wie Formatierungen vererbt werden
f wie Kommentare eingefügt werden
Voraussetzungen
D Grundlegende CSS-Kenntnisse
3.1
Entwicklung von CSS
Möglichkeiten mit Stylesheets, gefunden auf www.csszengarden.com
Die Beschreibungssprache HTML weist viele typografische Unzulänglichkeiten auf. So können Sie bestimmte
Elemente einer Webseite nur mithilfe von Tabellen an bestimmte Stellen des Dokuments platzieren. Der
Quellcode wird schnell unübersichtlich und die HTML-Datei immer größer. Eine wirklich exakte Positionierung
der Seitenelemente ist damit immer noch nicht gegeben.
Ende 1996 wurden die Stylesheets als Gestaltungssprache im Internet standardisiert. Diese Stylesheets,
offiziell Cascading Style Sheets (CSS), waren der erste Schritt zur Erweiterung der Fähigkeiten der Beschreibungssprache HTML. Cascading Style Sheets, auf Deutsch bedeutet dies in etwa "aufeinander aufbauende
Stilvorlagen", sind Formatvorlagen für das Internet, die Formatierungen für die Texte der Webseiten beinhalten.
16
© HERDT-Verlag
3
Grundlagen von CSS
Die Cascading Style Sheets sind den Formatvorlagen herkömmlicher Desktop-Publishing-Programme sehr
ähnlich. Sie bestimmen beispielsweise die Schriftart und -größe, die Breite von Absätzen oder die Farbe des
Textes oder Hintergrunds und weisen diese Formatierungen einem Element, Absatz oder dem gesamten
Dokument zu. Nehmen Sie eine Änderung der Formatvorlagen vor, dann wirkt sich dies auf die entsprechenden Elemente aus.
Folgende Vorteile bieten Ihnen die Stylesheets gegenüber den herkömmlichen HTML-Formatierungen:
D
Bessere Kontrolle über Layouts, Schriftarten, Farben, Hintergrundfarben und andere typografische
Aspekte als je zuvor. Die Möglichkeiten der Layoutgestaltung nähern sich dem professionellen Design.
D
Eine schnelle Möglichkeit zur kompletten Umgestaltung einer unbegrenzten Anzahl von Webseiten,
da die Dokumentenformatierungen in eine separate Datei ausgelagert werden können
D
Das gleichbleibende Erscheinungsbild einer Webseite in den verschiedenen Browsern auf verschiedenen Computern wurde verbessert.
D
Zur Formatierung von HTML-Tags sind weniger Angaben notwendig. Dies bedeutet kleinere Dateigrößen und somit einen schnelleren Download der Webseiten.
In diesem und den nächsten Kapiteln lernen Sie die Welt der Stylesheets kennen. Sie erlernen dabei die
Grundlagen, wie Sie Stylesheets für Schriften, Farben, Hintergründe und genaue Positionierungen erstellen.
Für weitergehende Informationen hilft Ihnen das Buch CSS - Cascading Style Sheets (Level 2.1) weiter.
Browser-Unterschiede
Das W3-Konsortium gibt regelmäßig neue Richtlinien zur Darstellung von Elementen heraus, um ein einheitliches Erscheinungsbild der Elemente zu garantieren. Bis vor ein paar Jahren interpretierten die Browser die
standardisierten Angaben der Stylesheets sehr unterschiedlich. Bei der neuen Browsergeneration können Sie
davon ausgehen, dass bis zu 99 % der Stylesheet-Definitionen korrekt wiedergegeben werden.
Sie als Entwickler einer Webseite sollten sich dennoch nicht auf die Darstellung in einem Browser verlassen,
sondern Ihr Endprodukt in verschiedenen Browsern testen und gegebenenfalls Anpassungen auf ein gemeinsames Maß vornehmen. Die Webseite http://www.browsershots.org bietet Ihnen die kostenlose Möglichkeit,
Ihre Webseite in verschiedenen Browsern testen zu lassen. Innerhalb dieses Buches soll, wenn es notwendig
ist, auf die unterschiedlichen Interpretationen von Stylesheets aufmerksam gemacht werden.
3.2
Stylesheets einbinden
Sie können Stylesheets auf fünf verschiedene Arten für ein Dokument festlegen:
D
D
D
D
D
Als Definition im Kopf des HTML-Dokuments
Als Definition in einer separaten Datei
Als importierte Definition
Als Definition für ein bestimmtes Element
Als Schnellformatierung für einen Textabschnitt
Stylesheets im Dokumentenkopf festlegen
<style type="text/css">
Dies ist das Grundgerüst zum Definieren von Stylesheets.
</style>
Das Tag style (Stil) leitet die Definition der Formatierungen ein. Erst die
Angabe type="text/css" spezifiziert die nachfolgenden Angaben als CSS
(Cascading Style Sheets). Browser, die keine Stylesheets unterstützen,
ignorieren die Angaben innerhalb der Style-Angaben.
Stylesheet-Angaben, die auf diese Weise im Kopf der HTML-Datei definiert werden, sind nur für diese eine
HTML-Datei gültig. Möchten Sie mehreren Dateien dieselben Eigenschaften zuweisen, müssen Sie die Stylesheets in einer externen Datei definieren und in die HTML-Dateien einbinden.
© HERDT-Verlag
17
3
HTML 4 - Zusatzwissen zur Gestaltung von Webseiten
Stylesheets aus einer Datei laden
<link
type="text/css"
rel="stylesheet"
href="CSS-Datei">
Mit dieser Angabe im Kopf des Dokuments verweisen Sie auf die StylesheetAngaben in der angegebenen CSS-Datei.
link verweist auf eine externe Datei, type="text/css" spezifiziert die
Stylesheets, rel="stylesheet" stellt den Bezug zu den Stylesheets dar.
href="CSS-Datei" enthält den Namen der Datei mit den Formatdefinitionen, die eingebunden werden soll.
Beispiel
<link type="text/css" rel="stylesheet" href="layout.css">
Stylesheets importieren
Eine weitere Möglichkeit ist das Importieren von Stylesheets. Dies funktioniert grundsätzlich genauso wie das
Laden aus einer Datei, jedoch über die CSS-spezifische Syntax.
<style type="text/css">
@import url(CSS-Datei);
</style>
Die Importangabe zum Laden der Formatierung wird innerhalb der Stylesheet-Definition gesetzt.
Die Funktion @import url() lädt die angegebene CSS-Datei zur Formatierung der Webseite.
Beispiel
<style type="text/css">
@import url(layout.css);
</style>
Stylesheet für ein Element festlegen
Neben dem Einbinden von Stylesheetdateien und dem Definieren des entsprechenden Selektors haben Sie
auch die Möglichkeit, die Formatangaben direkt am HTML-Tag festzulegen. Dazu geben Sie die Formatierungen als Wert des Attributs style innerhalb des HTML-Tags an.
style=""
Die Formatierung wird als Attribut dem entsprechenden Tag hinzugefügt.
Zu beachten ist hierbei, dass die Werte in Anführungszeichen gesetzt
werden müssen.
Beispiel
<div style="color:red; font-size:14pt">Text</div>
Der Text wird in roter Farbe mit einer Größe von 14 pt dargestellt. Diese Art der Formatierung ähnelt der
bisherigen HTML-Formatierung. So kann der HTML-Code
<p><font size="+2" face=" Verdana,Arial,sans-serif" color="blue">Text</font></p>
auch mit den nachfolgenden Stylesheets beschrieben werden.
<p style="font-size:12pt; font-family:Verdana,Arial,sans-serif; color:blue">Text</p>
Der Nachteil dieser Formatierung ist jedoch, dass Sie wie in HTML jedes einzelne Element einer Webseite mit
den Eigenschaften formatieren müssen. Geben Sie keine Formatierungen an, werden die HTML-Tags mit den
Standardattributen des Browsers dargestellt.
18
© HERDT-Verlag
3
Grundlagen von CSS
Beispiel: kap03\style_inline.html
Bei dem Beispiel benötigen Sie am Beginn des Dokuments keine Stylesheets, der Browser erhält die notwendigen Formatierungsbefehle durch das Attribut style im jeweiligen HTML-Tag.
<html>
<head>
<title>Stylesheets am Element</title>
</head>
<body>
<h1 style="font-size:10pt; background-color:red;">Stylesheets: Fast alles
ist möglich</h1>
<p style="font-family:Verdana,Arial,sans-serif">Erfreuen Sie sich an den
Möglichkeiten.</p>
</body>
</html>
Ergebnis der Formatierung
Teile eines Elements mit <span> formatieren
Mit dem Attribut style legen Sie eine Formatdefinition für ein bestimmtes HTML-Tag fest. Was ist jedoch,
wenn Sie beispielsweise innerhalb des Elements ein einzelnes Wort besonders formatieren möchten? Dafür
gibt es das spezielle HTML-Tag <span>, mit dem Sie einzelne Bereiche markieren können. Diese Formatierung
bleibt so lange bestehen, bis das </span>-Tag den markierten Bereich wieder schließt.
<span>
</span>
Das Zeilenelement <span> (umfassen) ist dem Blockelement <div> sehr ähnlich. Im
Unterschied zum Blockelement <div> ist <span> ein sogenanntes Inline-Element, mit
dem Sie einzelne Elemente und Texte innerhalb eines Blocks markieren können. Dieses
Tag stellt somit eine besondere Markierung für den Browser dar, die speziell formatiert
werden kann.
Die Formatierung können Sie auf zwei verschiedene Arten erzwingen:
D
D
<span style=""> Die Formatierung wird an der Markierung definiert.
<span class=""> Der Markierung wird eine Klasse, die bestimmte Formatierungen
enthält, zugewiesen. Im Verlauf dieses Kapitels werden die
Funktionen von Klassen näher erläutert.
Beispiel
Zuerst wird einem Bild eine weiße Umrandung hinzugefügt. Im zweiten Beispiel wird ein Teil des Textes
besonders hervorgehoben.
<p><span style="border:1px solid white"><img src="bild.jpg"></span><br>Text</p>
<p>Ein <span class="fett">ganz wichtiger</span> Text.</p>
Beispiel: kap03\span.html
In diesem Beispiel wird ein bestimmter Text innerhalb eines Absatzes speziell hervorgehoben.
© HERDT-Verlag
19
3
HTML 4 - Zusatzwissen zur Gestaltung von Webseiten



<html>
<head>
<title>span</title>
</head>
<body>
<p>Dies ist ein Absatz, der nicht formatiert wurde und demzufolge in der
Standardschrift und -größe angezeigt wird. <span style="color:red;
font-family:Verdana,Arial,sans-serif; font-size:14pt;">Die Formatierung mit
<span> ändert mitten im Absatz das Aussehen des Textes.</span> Das
schließende </span> hebt die Formatierung natürlich wieder auf.</p>
</body>
</html>

Da keine Formatierung vorgegeben
ist, wird der Absatz in der Standardschriftart und -größe dargestellt.

Über das Tag <span> markieren Sie
den nachfolgenden Text und weisen
ihm über das Attribut style eine
besondere Formatierung zu.

Mit <span> formatierter Text innerhalb eines Absatzes
Das schließende Tag </span> beendet die Formatierung. Der Rest des (kap03\span.html)
Absatzes wird wieder in den
Standardeinstellungen angezeigt.
Definierte Stylesheets überschreiben
Sie können zur Formatierung Ihrer Webseite mehrere Arten der Stylesheet-Definition benutzen. Das heißt, es
ist möglich, die Informationen einmal aus einer Datei zu laden und innerhalb des Dokuments weitere Definitionen festzulegen.
Stellen Sie sich vor, Sie benutzen drei verschiedene Varianten, um Formatierungen zu definieren. In jeder
Variante werden verschiedene Formatierungen für das Tag <p> festgelegt. Die importierte Datei teilt z. B.
dem Browser mit, dass der Text des Abschnitts in der Farbe Rot darzustellen ist. Die Formatierung im Dokumentenkopf gibt jedoch Gelb vor, und im Dokument selbst haben Sie mit <p style="color:green"> eine
grüne Farbe angegeben.
Die Frage, die sich hierbei stellt, ist: Wie wird die Formatierung letztendlich aussehen? Die Browser nutzen
zum Anzeigen der Formatierungen eine bestimmte Reihenfolge zur Darstellung der Stylesheets. Es wird
immer die zuletzt angegebene Definition eines Elements benutzt. Existiert bereits eine Formatierung für ein
Element, werden die zusätzlichen Angaben hinzugefügt und bereits vorhandene Formatierungen überschrieben.
Beispiel: kap03\layout.css
In einer externen Datei befinden sich folgende Formatvorgaben:

20
body { font-family:Verdana,Arial,sans-serif;
font-size:10pt;
color:black;
}
h1
{ font-family:Verdana,Arial,sans-serif;
font-size:18pt;
color:green;
}
p
{ font-family:"Courier New, monospace";
color:white;
background-color:gray;
}
© HERDT-Verlag
3
Grundlagen von CSS

In der externen Datei werden die Formatierungen für alle Elemente des Dokuments <body>, die Überschriften <h1> und die Textabsätze <p> festgelegt.
Beispiel: kap03\style_ueberschreiben.html
Im Kopf der Webseite weisen Sie diese Formate zu:


<html>
<head>
<title>Überschreiben von Stylesheets</title>
<link type="text/css" rel="stylesheet" href="layout.css">
<style type="text/css">
p { color:blue; background-color:yellow; } /* <p> überschreiben */
</style>
</head>

Im Kopf der HTML-Datei werden die Formatierungen aus der Datei layout.css geladen.

Zusätzlich wird eine Formatierung für die Absätze angegeben, womit die bisherige Formatdefinition für
das Tag <p> überschrieben wird.
Innerhalb des Dokumentenkörpers <body> geben Sie weitere Textformatierungen an:




<body>
<h1><h1>-Formatierung in einer externen Datei.</h1>
<p>Im Dokumentenkopf überschriebene <p>-Formatierung, also blaue
Schrift auf gelbem Untergrund.</p>
<h1 style="font-size:12pt; color:red;">Überschriebene <h1>-Formatierung
direkt am HTML-Tag.</h1>
<p style="font-family:Verdana,Arial,sans-serif">Geänderte Schriftart
am <p>-Tag.</p>
</body>
</html>

Die Überschrift wird mit den Eigenschaften aus der externen CSS-Datei
formatiert.

Der erste Absatz erhält die Formate
aus dem Dokumentenkopf.

Innerhalb des Tags <h1> werden die
Schriftgröße und die Farbe geändert.

Direkt am Absatz wird eine andere
Schriftart angegeben.
Rangfolge unterbrechen
Auswirkung des Überschreibens von Formatierungen
(kap03\style_ueberschreiben.html)
Über die folgende Festlegung können Sie die Rangfolge der definierten Stylesheets verändern. Die Angabe von
!important
durchbricht die Reihenfolge und legt fest, welche Formatierung nicht überschrieben werden darf. Dieses
Schlüsselwort darf jedoch nicht für eine komplette Definition angegeben werden, sondern muss für jede
Formatierung einzeln angewendet werden, z. B. h3 { color: green !important; font-size:14pt
!important; }.
© HERDT-Verlag
21
3
HTML 4 - Zusatzwissen zur Gestaltung von Webseiten
3.3
Definitionen vererben
Verschiedene Klassen festlegen
Um alle Absätze einer Webseite zu formatieren, definieren Sie die Eigenschaften für den Selektor p.
p { color:blue; font-size:10pt; }
Diese Angabe besagt, dass die Inhalte der gesamten Absätze <p> eines Dokuments in der Farbe Blau und der
Schriftgröße 10 pt dargestellt werden. Was ist aber, wenn Sie beispielsweise den Text des ersten Absatzes in
roter Farbe darstellen möchten und wenn die Schriftgröße des zweiten Absatzes verkleinert werden soll? Mit
der Unterteilung von Stylesheets in Klassen ist dies kein Problem.
Das Anlegen von speziellen Klassen eines Stylesheets sieht folgendermaßen aus:
Selektor.Klasse
.Klasse
{ Eigenschaft1: Wert1; Eigenschaft2: Wert2; ...}
{ Eigenschaft1: Wert1; Eigenschaft2: Wert2; ...}
Zuerst geben Sie standardmäßig den entsprechenden Selektor an. Nachfolgend weisen Sie einen Klassennamen zu, den Sie selbst bestimmen können. Der Name der Klasse wird dabei durch einen . von dem Selektor getrennt, beispielsweise p.rot, li.gruen oder p.klein. Dahinter folgt in den geschweiften Klammern
die Vereinbarung zur Formatierung des Elements.
p.rot
{ color:red; }
p.gruen { color:green; }
p.klein { font-size:8pt; }
Für das HTML-Tag <p> wurden drei verschiedene Klassen zur unterschiedlichen Formatierung definiert. Es ist
auch erlaubt, mehrere Selektoren mit dem gleichen Klassennamen zu definieren, beispielsweise p.gelb,
li.gelb und h1.gelb.
Ohne die Angabe des Selektors könnte eine Definition wie nachfolgend aussehen:
.klein { font-size:8pt; }
Diese Form der Klassendefinition ohne Angabe eines speziellen Selektors ist ein Sonderfall, denn sie bezieht
sich nicht auf ein spezielles Tag. Dies bedeutet, jedem Element einer HTML-Seite kann diese Formatierung zugewiesen werden. Dieser Selektor wird auch als Klassenselektor bezeichnet.
Die Namen der Klassen sollten nicht zu lang gewählt werden. Außerdem dürfen sie keine Leerzeichen enthalten. Deutsche Sonderzeichen wie ä, ö, ü bzw. ß sind möglich. Um Inkompatibilitäten vorzubeugen, sollten Sie
diese jedoch nicht verwenden. Beachten Sie ebenfalls, dass Sie zwar auch Zahlen im Klassennamen angeben
können, jedoch der Name der Klasse nicht mit einer Zahl beginnen darf. Schreiben Sie statt p.3 lieber
p.drei oder statt p.2klein lieber p.klein2.
Die unterschiedlichen Klassen weisen Sie dem entsprechenden HTML-Tag über das Attribut class zu.
class="Klassenname"
Eine bestimmte Klasse einer Stylesheet-Definition weisen Sie über das Attribut
class zu. Dieses wird innerhalb des entsprechenden HTML-Tags eingefügt.
Beispiel
<p class="rot"> Text </p>
<p class="klein" align="center"> Text </p>
Das Aussehen des ersten Absatzes wird nach den Festlegungen des Selektors p.rot und des Klassenselektors
.rot bestimmt. Der Inhalt des zweiten, zentriert gesetzten Absatzes wird über p.klein bzw. .klein
formatiert.
22
© HERDT-Verlag
Grundlagen von CSS
3
Beispiel: kap03\style_klassen.html
Sie werden verschiedene Überschriften und Absätze erstellen, denen Sie unterschiedliche Stylesheet-Klassen
zuweisen.





<html>
<head>
<title>Klassen von Stylesheets</title>
<style type="text/css">
body { font-family:Verdana,Arial,sans-serif; }
h1
{ font-size:20pt; color:gray; }
p.hintergrund { background-color:silver; }
p.kursiv
{ font-style:italic; }
.klein
{ font-size:8pt; }
</style>
</head>
<body>
<h1>Stylesheets: Verwenden von Klassen</h1>
<p>body { font-family:Verdana,Arial,sans-serif; }<br>Der Text des
gesamten Dokuments wird standardmäßig in der Schriftart: Verdana
dargestellt.</p>
<p class="hintergrund">p.hintergrund { background-color:silver; }
<br>Dieser Text besitzt einen hellgrauen Hintergrund.</p>
<p class="kursiv">p.kursiv { font-style:italic; }
<br>Dieser Text wird in kursive Schrift gesetzt.</p>
<p class="klein">.klein { font-size:8pt; }
<br>Dieser Text besitzt eine kleinere Schriftgröße.</p>
<h1 class="klein">.klein { font-size:8pt; }
<br>Auch der sonst großen Überschrift h1 kann diese Klasse zugeordnet
werden.</p>
</body>
</html>

Der Inhalt des Tags <body>, also der Text der gesamten Webseite, wird in der Schriftart Verdana dargestellt.

Die Überschrift <h1> wird in der Schriftgröße 20 pt und in grauer Textfarbe dargestellt.

Ein Absatz mit der Klasse hintergrund erhält eine hellgraue Hintergrundfarbe.

Ein Absatz mit der Klasse kursiv wird auch entsprechend kursiv formatiert.

Der Klassenselektor .klein mit der Schriftgröße 8 pt kann jedem HTML-Tag zugewiesen werden.
Definition und Auswirkungen der unterschiedlichen Stylesheet-Klassen
© HERDT-Verlag
23
3
HTML 4 - Zusatzwissen zur Gestaltung von Webseiten
Möchten Sie größeren Textabschnitten, die beispielsweise aus Überschriften, Fließtext und Listen bestehen,
dieselben Formateigenschaften zuweisen, so umschließen Sie diese Elemente mit dem Container-Tag
<div></div>. Anschließend definieren Sie die gewünschte Formatierung als Klassen für das HTML-Tag div.
<style type="text/css">
div.gruen { font-family:Verdana,Arial,sans-serif; color:green; }
</style>
...
<div class="gruen">
<h1>Stylesheets: Verwenden von Klassen</h1>
<p> Text </p>
<p> Text </p>
</div>
Die Überschrift <h1> sowie die Absätze <p> werden in der Schriftart Verdana und in grüner Farbe angezeigt.
Formatabhängige Klassen
Es gibt noch eine weitere Art, Klassen für spezielle Fälle zu definieren. Stellen Sie sich vor, Sie möchten einzelne Wörter innerhalb von Absätzen besonders hervorheben. Bisher können Sie dies über verschiedene physische Textformatierungen wie z. B. <b> realisieren. Wäre es nicht effektiver, wenn dieser Text beispielsweise
automatisch in einer auffälligen Farbe (z. B. Rot) dargestellt würde, und zwar ohne dass Sie eine Formatierung von Hand vornehmen müssen? Diese Klassen werden formatabhängige Klassen genannt.
{ Eigenschaft1: Wert1;
Eigenschaft2: Wert2; ...}
Selektor1.Klasse Selektor2 { Eigenschaft1: Wert1;
Eigenschaft2: Wert2; ...}
.Klasse Selektor
{ Eigenschaft1: Wert1;
Eigenschaft2: Wert2; ...}
Selektor1 Selektor2
Bei der Angabe zweier Selektoren wird die Formatierung nur dann angewendet, wenn sich Selektor2 innerhalb des ersten Selektors befindet, also das zweite Tag vom ersten Tag umschlossen wird.
p b { color:red; }
Diese Formatierung wird erst angewendet, wenn ein Absatz <p> definiert ist. Ist innerhalb des Absatzes ein
Textabschnitt als fett <b> gekennzeichnet, wird er nach den Stylesheet-Angaben formatiert. Trifft eine Angabe nicht zu, wird die Formatierung auch nicht ausgeführt.
td.courier kbd { font-size:12pt; font-family:"Courier New"; }
.normal i
{ background-color:#FFFF00; }
Wenn in einer mit class="courier" definierten Tabellenzelle ein Teil des Inhalts vom Tag <kbd> umschlossen ist, wird dieser Teil des Inhalts in der Schriftart Courier New und einer Größe von 12 pt dargestellt. Im
zweiten Fall muss der Inhalt von <i> umschlossen sein und sich in einem mit normal klassifizierten HTML-Tag
befinden.
Die Formatierung wird von links nach rechts auf Übereinstimmung kontrolliert. Treffen alle Angaben zu, wird
das entsprechende Element wie angegeben formatiert.
24
© HERDT-Verlag
Grundlagen von CSS
3
Beispiel: kap03\style_format.html
Die formatabhängigen Klassen wenden Sie gleich auf ein Beispiel an.




<html>
<head>
<title>Klassen von Stylesheets</title>
<style type="text/css">
body
{ font-family:Verdana,Arial,sans-serif; }
h1
{ font-size:20pt; color:gray; }
p.hintergrund b { background-color:silver; color:red; }
p i
{ font-style:italic; color:red;}
</style>
</head>
<body>
<h1>Stylesheets:<br>Verwenden von formatabhängigen Klassen</h1>
<p>body { font-family:Verdana,Arial,sans-serif; }<br>Der Text des
gesamten Dokuments wird standardmäßig in der Schriftart: Verdana
dargestellt.</p>
<p class="hintergrund">p.hintergrund <b>b</b> { background-color:silver;
color:red; }<br><b>Dieser Text wird rot hervorgehoben und besitzt einen
hellgrauen Hintergrund.</b></p>
<p>p <i>i</i> { font-style:italic; }<br><i>Dieser Text wird in kursive
Schrift gesetzt.</i></p>
</body>
</html>

Bei dieser Formatdefinition wird der Hintergrund der Webseite grau gesetzt und die Schriftfarbe Rot für
den Inhalt verwendet.

Neben der kursiven Formatierung wird auch die rote Schriftfarbe eingesetzt.

Dem Absatz wird die Klasse hintergrund zugewiesen. Der jeweils vom Tag <b> umgebene Text trifft
auf die Selektorangabe  zu und wird deshalb entsprechend eingefärbt.

Hier wirkt die Angabe , sodass der von <i> umgebene Inhalt neben der kursiven Ausrichtung auch in
roter Farbe dargestellt wird.
Formatabhängige Klassen
© HERDT-Verlag
25
3
HTML 4 - Zusatzwissen zur Gestaltung von Webseiten
3.4
Kommentare
Beim Erstellen der verschiedenen Formatierungen und deren Unterklassen ist es ratsam, dass Sie die unterschiedlichen Formatdefinitionen kommentieren. Kommentare werden vom Browser ignoriert und nicht angezeigt.
/* Kommentar */
Kommentare können Sie an jeder beliebigen Stelle innerhalb der CSS-Definition
notieren. Mit /* leiten Sie einen Kommentar ein, und mit */ beenden Sie ihn
wieder. So geben Sie auch einzeilige Kommentare hinter einer Formatdefinition
an.
Beispiel
/* Die Schriftfarbe im ersten
Absatz ist immer Blau */
p.eins { color: blue; }
li { font-family:"Courier New" }
3.5
/* Listen immer in Courier */
Übung
Theoriefrage zu CSS
Übungsdatei: --

Ergebnisdatei: kap03\uebung1.doc
Wie lautet das CSS-Grundgerüst, um Stylesheets im Kopf einer Webseite zu definieren?
Stylesheets definieren
Übungsdatei: --

Ergebnisdateien: kap03\uebung2.html, kap03/layout.css,
kap03\uebung3.html, kap03/uebung4.doc
Erstellen Sie ein HTML-Dokument mit einer Überschrift <h1> sowie einem Absatz <p>.
Folgende Stylesheet-Angaben sind vorgegeben:
h1 { font-family:Verdana,Arial,sans; font-size:18pt; color:red; }
p { font-family:"Courier New",sans-serif; font-size:10pt; color:blue; }
Binden Sie diese Definition als externe Stylesheet-Datei in Ihr Dokument ein.
26

Fügen Sie dem Dokument einen weiteren Absatz hinzu. Dieser soll eine andere Schriftfarbe
besitzen als der erste Absatz. Zeigen Sie anhand zweier Möglichkeiten auf, wie Sie dies
realisieren könnten.

Wie erreichen Sie, dass eine Überschrift dieselbe Schriftgröße, Schriftfarbe und Schriftart
besitzen kann wie ein Textabsatz?
© HERDT-Verlag
Grundlagen von CSS
3
© HERDT-Verlag
27