Programmierung dynamischer Internetseiten

Technikerschule
Nördlingen

Startseite

Termine

Sinn und Zweck von CSS Stylesheets

CSS Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung eine Schriftgröße von 18 Punkt haben, in der Schriftart Helvetica, aber nicht fett erscheinen, und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit reinem HTML nicht möglich.

Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Möglichkeiten. So können Sie HTML-Elemente - egal ob Textabsätze, Listen, Tabellenzellen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausstatten. Sie können Elemente pixelgenau im Anzeigefenster des WWW-Browsers positionieren.

Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können Sie beispielsweise im Kopf einer HTML-Datei zentrale Definitionen zum Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen der entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner.

Sie können Ihre Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.

CSS Stylesheets unterstützen also erstens die professionelle Gestaltung beim Web-Design, und zweitens helfen sie beim Corporate Design für große Projekte oder für unternehmensspezifsche Layouts.

Aus: Stefan Münz, selfhtml

Artikel zu CSS

Grundprinzipienen eines Webdsigns mit CSS (Aus: Internet Professional 4/2005)

Seite 1
Seite 2
Seite 3

Praktische Umsetzung eines Projekts mit CSS (Aus: Internet Professional 4/2005)

Seite 1
Seite 2

Einbau in eine HTML Seite

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
body { background-color:#FFFFCC;
     margin-left:100px; }
h1 { font-size:48pt;
     color:#FF0000;
     font-style:italic;
     border-bottom:solid thin black; }
p,li  { font-size:12pt;
        line-height:14pt;
        font-family:Helvetica,Arial,sans-serif;
        letter-spacing:0.2mm;
        word-spacing:0.8mm;
        color:blue; }
-->
</style>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung</h1>
<p>ein normaler Textabsatz</p>
<ul>
<li>Ein Listenpunkt</li>
<li>Ein anderer Listenpunkt</li>
</ul>
</body>
</html>

Und so sieht die Datei im Browser aus.

Erläuterung:
Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps, und zwar ohne spitze Klammern. Im obigen Beispiel werden body (Dokument), h1 (Überschriften 1. Ordnung), p (Textabsätze) und li (Listeneinträge) auf diese Weise notiert. Wenn Sie ein Format für mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p,li.

Es bedeutet also das gleiche, wenn Sie notieren:
h1 { font-family:Helvetica,sans-serif; }
h2 { font-family:Helvetica,sans-serif; }
oder wenn Sie notieren:
h1, h2 { font-family:Helvetica,sans-serif; }

Dahinter folgen die gewünschten Definitionen. Im obigen Beispiel wird dem body-Element eine hellgelbe Hintergrundfarbe (background-color:#FFFFCC;) und ein linker Randabstand von 100 Pixeln (margin-left:100px;) zugewiesen. Überschriften 1. Ordnung (h1) erhalten eine Schriftgröße von 48 Punkt (font-size:48pt;), die Schriftfarbe rot (color:#FF0000;) und den Schriftstil kursiv (font-style:italic;). Textabsätze (p) und Listenpunkte (li) sollen in 12 Punkt Schriftgröße (font-size:12pt;) mit einer Zeilenhöhe von 14 Punkt (line-height:14pt;) in Schriftart Helvetica, oder wenn nicht verfügbar, dann in Arial, und wenn ebenfalls nicht verfügbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (font-family:Helvetica,Arial,sans-serif;). Außerdem werden auch noch Angaben zum Zeichenabstand (letter-spacing), Wortabstand (word-spacing) und zur Textfarbe gemacht.

Formatdefinitionen mit dem style-Attribut

Sie können einzelne HTML-Elemente innerhalb des sichtbaren HTML-Dokuments mit Hilfe von Stylesheet-Eigenschaften formatieren. Die Formatdefinitionen gelten dann genau für den Geltungsbereich des betreffenden HTML-Elements, und nach den Regeln der natürlichen Formatvererbung auch für Kindelemente des betreffenden Elements. Sinnvoll ist diese Möglichkeit, wenn Sie entweder sonst auf CSS verzichten und es nur mal für ein paar Ausnahmen benötigen, oder wenn Sie zentrale Formate verwenden, einzelne Elemente aber anders als mit den dort definierten Formatdefinitionen gestalten möchten.

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
body { background-color:#000000; color:#E0E0E0 }
-->
</style>
</head>
<body>
<h1>Die Seite mit dem besonderen Element</h1>
<p>Hier sind zwar zentrale Formatdefinitionen vorhanden,
aber das folgende Element soll was besonderes sein:</p>

<p style="background-color:#808040; color:#D8FD02;
               font-family:'Century Schoolbook',serif; font-size:24pt; letter-spacing:3px;
               padding:40px; border:double #D8FD02 4px;"
               title="Zitat von Francis Picabia">
               Unser Kopf ist rund, damit das Denken die Richtung wechseln kann!
               </p>

</body>
</html>

Und so sieht die Datei im Browser aus.

Erläuterung:

Sie können Formate für ein HTML-Element definieren, indem Sie innerhalb des einleitenden HTML-Tags das Attribut style= und dahinter die gewünschten Formatdefinitionen notieren. Innerhalb der Formatdefinitionen sind CSS-Eigenschaften erlaubt. Dabei gilt die gleiche Syntax wie innherhalb der geschweiften Klammern bei zentralen Formaten. Jede Eigenschaft besteht aus einem Namen, z.B. color (Schriftfarbe) und einem Wert, z.B. #D8FD02, getrennt durch einen Doppelpunkt. Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der letzten Formatdefinition vor dem abschließenden Anführungszeichen darf der Strichpunkt entfallen.

Im obigen Beispiel werden die individuellen Formatangaben auf ein gewöhnliches p-Element angewendet. Es erhält mit Hilfe der CSS-Eigenschaften für Hintergrundfarbe (background-color), Schriftfarbe (color), Schriftart (font-family), Schriftgröße (font-size), Zeichenabstand (letter-spacing), Innenabstand zum Rand (padding) und einem Rahmen (border) ein Aussehen, das überhaupt nicht mehr an einen "Textabsatz" erinnert.

Formate für Klassen definieren

Sie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem Universalattribut class=. So können Sie beispielsweise für Überschriften 1. Ordnung zwei Varianten erzeugen. Dazu vergeben Sie Namen für die Klassen.

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
*.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
-->
</style>
</head>
<body>
<h1>H1 ganz normal nur etwas formatiert</h1>
<h1 class="hinterlegt">H1 knallgelb hinterlegt</h1>
<h2>H2 ganz normal <span class="hinterlegt">und aber <b class="extra">auch</b> hinterlegt</span></h2>
</body>
</html>

Und so sieht die Datei im Browser aus.

Erläuterung:

Es gibt zwei Möglichkeiten, Klassen für HTML-Elemente zu notieren: entweder für einen bestimmten HTML-Elementtyp, oder für keinen bestimmten. In jedem Fall bestimmen Sie eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Punkt notieren und unmittelbar dahinter einen Namen für die Klasse angeben. Im obigen Beispiel wird mit h1.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h1 gilt: also z.B. auf HTML-Elemente wie <h1 class="hinterlegt"> anwendbar ist. Mit *.hinterlegt wird im Beispiel demonstriert, dass Sie durchaus den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden können. Der Stern gilt als Platzhalterzeichen und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen. Im Beispiel .extra können Sie das sehen. Ein h1-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor h1.hinterlegt bestimmt werden. Ein p-Element mit <p class="hinterlegt"> erhält dagegen die Formatierungen, die mit *.hinterlegt bestimmt weden.

Die Namen hinter dem Punkt können Sie frei vergeben. Die Namen sollten nicht zu lang sein und keine Leerzeichen und keine deutschen Umlaute enthalten.

Formate zentral in separater CSS-Datei definieren

In vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres Projekts haben wollen. In diesem Fall brauchen Sie die Angaben nicht in jeder Datei zu wiederholen. Stattdessen können Sie die Formate in einer separaten Textdatei definieren und diese Datei einfach in jeder gewünschten HTML-Datei einbinden. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei eingebunden ist.

<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!--
  ... hier können zusätzliche datei-spezifische Formate eingefügt werden ...
-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

Im Dateikopf einer HTML-Datei können Sie mit <link...> eine CSS-Datei referenzieren, die CSS-Formatdefinitionen enthält (link = Verweis). Innerhalb des <link>-Tags müssen die Angaben rel="stylesheet" type="text/css" stehen (rel = relation = Bezug, type = Mime-Typ). Beim Attribut href= geben Sie die gewünschte Datei an (href = hyper reference = Hypertext-Referenz). Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, müssen Sie an dieser Stelle Pfadangaben oder absolute URIs notieren. Das funktioniert genauso wie etwa beim Einbinden von Grafiken.

Bei der referenzierten Datei muss es sich um eine reine Textdatei handeln, die die Endung .css haben sollte. Die Datei darf nichts anderes als Definitionen zentraler Formate und Kommentare enthalten. Eine solche CSS-Datei können Sie mit jedem einfachen Texteditor erstellen.

Beachten Sie:
Wenn Sie mit <link...> eine Datei mit CSS-Formatdefinitionen referenzieren, brauchen Sie keinen Bereich <style...>...</style>. Im obigen Beispiel wird dennoch ein solcher Bereich definiert. Das soll zeigen, dass Sie beide Arten, Formate zu definieren, miteinander kombinieren können. Wenn Sie beide Arten benutzen, haben Formate, die direkt innerhalb von <style...>...</style> definiert werden, im Konfliktfall Vorrang vor den referenzierten Formaten. So können Sie etwa immer wieder verwendete Formate importieren und einige davon mit dateispezifischen Formaten ergänzen oder überschreiben.

Aus: Stefan Münz, selfhtml

Zurück

Home