http://jendryschik.de / archiv / einfuehrung / raggett-css.html
Was bedeutet eigentlich "Styling"?
Es wird Sie nicht überraschen, wenn ich Ihnen vorschlage, sich zunächst in Dave Raggetts Einführung in CSS einzulesen, bevor Ihre Einführung hier komplettiert wird.
Dave Raggett erläutert in seiner Einführung sehr schön den logischen Aufbau von Style-Angaben und wie man seine Seite langsam von der Bestimmung der Seitenränder bis zu Farbzuweisungen formatiert. Ihnen wird schnell klar werden, nach welchem Prinzip CSS funktioniert und wie sich langsam einem immer besseren Layout annähern.
Das Thema CSS ist jedoch umfangreicher als Dave Raggett es in seiner Einführung behandeln kann. Diese ist jedoch die einzig wirklich korrekte und fehlerfrei Einführung zum Thema CSS, die mir bekannt ist. Vor allem die Erläuterungen in SelfHTML zum Thema CSS sind recht fehlerhaft und daher nur bedingt zu empfehlen. Ich werde jedoch versuchen, Ihnen all das, was sie über CSS wissen müssen, in dieser Einführung zu vermitteln. Die folgenden Seiten sind wie recht einfach aufgebaut. Ich stelle Ihnen Abschnittsweise CSS-Angaben zu einem bestimmten Gebiet listenartig vor und erläutere diese kurz. Hin und wieder zeige ich Ihnen die Anwendung der Styles. Jedoch möchte ich Ihnen hier lediglich einen kurzen Überblick darüber geben, was mit CSS möglich ist. Sie sollten durch Ausprobieren oder weiterführende Litaratur herausfinden, wie sie CSS einzusetzen haben.
Jedoch zunächst einmal Dave Raggetts Einführung zum Einstieg. Bitte überlesen Sie vollständig den abschließenden Abschnitt "Was ist mit Browsern, die CSS nicht unterstützen?"
Es gibt drei Möglichkeiten, CSS-Definitionen in ein Dokument einzubinden: Entweder die Definitionen werden direkt in den Dokumentenkopf gesetzt oder sie werden in eine externe Datei ausgelagert, auf die im Dokumentenkopf verwiesen wird, oder sie werden direkt in das HTML-Element eingebunden.
Die Einbindung in den Dokumentenkopf gestaltet sich wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
<style type="text/css">
... Style Sheet Angaben ...
</style>
</head>
<body>
</body>
</html>
Bei der Angabe type="text/css" handelt es sich um die Formatdefinition, die keinesfalls weggelassen werden darf.
Eine zweite Möglichkeit wäre es, die CSS-Definitionen in eine externe Datei auszulagern. Dabei empfiehlt sich ein Unterverzeichnis mit dem Namen "stylesheets" und ein entsprechender Dateiname mit der Endung ".css", zum Beispiel default.css. Diese Datei wird dann wie folgt in das HTML-Dokument eingebunden:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Mein erstes HTML-Dokument</title> <link rel="stylesheet" href="stylesheets/default.css" type="text/css"> </head> <body> </body> </html>
Das rel-Attribut muss den Wert "stylesheet" enthalten, damit das Dokument weiß, dass ein Stylesheet eingebunden wird. Das href-Attribut gibt den Dateipfad an und type hier ebenfalls die Formatdefinition.
Vor allem bei Style-Angaben, die mehrere Dokumente beschreiben sollen (wie zum Beispiel in dieser Einführung) ist eine externes Stylesheet vorzuziehen.
Wenn Sie CSS-Angaben nicht extern oder im Dokumentkopf realisieren wollen (vielleicht wenn diese nur einmal an einer bestimmten Stelle vorkommen), können Sie sie auch direkt in den Tag einbinden. Diese dritte Möglichkeit würde dann zum Beispiel so aussehen:
<p style="text-align : right; font weight : bold"> Dieser Text ist fett formatiert und rechtsbündig.</p>
Die Textfarbe eines Dokumentes gibt man mit folgender Regel an:
p {color: black}
Eine Regel besteht aus zwei Teilen: Dem Selektor p und der Deklaration color: black, die in geschweiften Klammern angegeben wird. Die Deklaration setzt sich aus der Eigenschaft color und dem Wert black zusammen.
Mit CSS lassen sich alle Elemente beeinflussen, indem ihnen in dieser Form Deklarationen zugewiesen werden. Mehrere Deklarationen werden durch ein Semikolon voneinander getrennt. Aufgrund besserer Übersichtlichkeit schreibt man dann:
body {
color: black;
background: white;
margin: 1em;
}
Sollen Deklarationen für mehrere Selektoren gelten, können Sie diese durch Kommata getrennt in dieser Form aufzählen:
h1, h2, h3, h4 {color: blue}
Sie können Elemente abhängig von ihrer Position im Dokument deklarieren. Dabei verschachteln sie die Style-Angaben exakt so, wie sie die Elemente in ihrem HTML-Dokument verschachteln. Beispiel: Sie möchten das Element strong innerhalb einer Überschrift anders gestalten als auf dem Rest der Seite. Schreiben Sie daher:
strong {color: blue}
h1 strong {color: red}
Wie in HTML gibt es auch bei CSS-Definitionen die Möglichkeit, Kommentare einzubinden. Diese sehen wie folgt aus:
/* Hier steht ein Kommentar */
An sich eine sehr einfache Sache.
"id" und "class" dienen beide dazu, besondere Formatierungen in eine bestimmte Stelle eines Dokumentes einzubinden.
Als Beispiel: Wir haben eine Kopfzeile eines Dokumentes, deren Markup wie folgt aussieht:
<p>Hier lernen Sie die Handhabung von HTML und CSS</p>
Wir möchten dem Element <p> einen besonderen Hintergrund geben. Die Wörter "HTML" und "CSS" sollen durch eine bestimmte Farbe verdeutlicht und betont erscheinen. Die CSS-Regeln dazu sehen wie folgt aus:
#kopfzeile {
background : #ddf;
color : black;
}
em.verdeutlichung {
color : blue;
background : transparent;
}
Für die Wahl zwischen id und class fragt man sich nach dem Konzept, welches man in HTML ausdrücken möchte. Habe ich ein Konzept, das nur einmal in einem Dokument vorkommt? Vielleicht sogar je einmal in vielen Dokumenten? Dann sollte id gebraucht werden. Der Wert des id-Attributes bezeichnet ein einzelnes ganz bestimmtes Element im Dokument.
class hingegen dient für Konzepte, die mehrmals auftauchen können, wie eben "Verdeutlichung" oder "externer Link".
In diesem Fall gibt es das Konzept "kopfzeile" in dem gesamten Dokument nur einmal, das Konzept "verdeutlichung" kommt zwei Mal darin vor. Der HTML-Code sieht also wie folgt aus:
<p id="kopfzeile">Hier lernen Sie die Handhabung von <em class="verdeutlichung">HTML</em> und <em class="verdeutlichung">CSS</em>.</p>
| Letzte Änderung: 07. März 2001 |
