CSS-Stylesheet Grundlagen

Bessere Kontrolle über Layouts, Schriftarten, Farben, Hintergrundfarben und andere typografischen Aspekte als je zuvor. Die Möglichkeiten der Layoutgestaltung nähern sich dem professionellen Design.
Eine schnelle Möglichkeit zur kompletten Umgestaltung einer unbegrenzten Anzahl von Web-Seiten, da die Dokumentformatierungen nur noch in eine seperate Datei ausgelagert werden können.
Das gleich bleibende Erscheinungsbild einer Web-Seite in den verschiedenen Browsern auf verschiedenen Computern wurde verbessert.
Zur Formatierung von HTML-Elementen sind weniger Angaben notwendig. Das bedeutet, kleinere Dateigrößen und somit einen schnelleren Download der Web-Seiten.

Das erste Stylesheet

Beispiel:

<html> <head> <title>Mein erstes Stylesheet</title> <style type="text/css">  </style> </head> <body> <h1>Stylesheets: Fast alles ist möglich</h1> <p>Erfreuen Sie sich an den Möglichkeiten.</p> </body> </html>

So sieht das aus

Schauen Sie sich das Beispiel einmal etwas genauer an.

h1{font-family:Verdana;font-size:24pt;color:green;}

Diese Zeile teilt dem Browser mit, dass ein Text, der als Überschrift 1. Ordnung <h1>...</h1> deklariert ist, folgendermaßen darzustellen ist:

Schriftart: Verdana
Schriftgröße: 24 Points
Textfarbe: grün

Allgemeiner Aufbau einer Stylesheet-Definition:

Befehl{Attribut1:Wert; Attribut2:Wert; Attribut3:Wert;...}

Eigentlich ist es erlaubt, innerhalb der Formatdefinition Leerzeichen anzugeben. Jedoch erweist sich der Netscape Navigator in dieser Hinsicht als sehr fehleranfällig und ignoriert dann die Angaben. Verzichten Sie deshalb innerhalb von Formatierungen auf das Leerzeichen.

Stylesheets einbinden

Sie können Stylesheets auf vier verschiedene Arten in Ihr Dokument einbinden:

als Definition im Kopf des HTML-Dokuments
als Definition in einer seperaten Datei
als importierte Definition
als Definition für ein bestimmtes Element

Stylesheets im Dokumentenkopf festlegen

Beispiel:
<style type="text/css">  </style>

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, so müssen Sie die Stylesheets in einer externen Datei definieren und in die HTML-Dateien einbinden.

Stylesheets aus einer Datei laden

Beispiel:
<link type="text/css" rel="stylesheet" href="layout.css"> oder <link rel="stylesheet" type="text/css" href="layout.css">

Die Stylesheet-Datei darf sich auch in einem anderen Verzeichnis befinden. Dann müssen Sie die Pfadangabe als relative oder absolute Adressen anpassen.

Aufgabe:

Erstellen Sie die nachfolgende Datei mit den Formatdefinitionen:
h1 {font-family:Verdana;font-size:24pt;color:red;} p {font-family:"Courier New";background:gray;color:white;font-size:12pt;}
Speichern Sie die Datei unter dem Namen layout.css.
Ändern Sie Ihr erstes Stylesheet so ab, dass Sie die Formatdefinitionen aus der seperaten Datei layout.css laden.
Dazu fügen Sie folgende Zeile ein:
<link rel="stylesheet" type="text/css" href="layout.css"

So sieht das aus

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.

Beispiel:
<style type="text/css">  </style>
Eingebaut in das letzte Beispiel sieht das so aus

Stylesheet für ein Element festlegen

Sie können wie in HTML-Formatierung, jedem Element einzeln eine Formatierung zuweisen. Dazu geben Sie die Stylesheetinformationen innerhalb des Elementes ein.

style=" " Die Formatierung wird als Attribut dem entsprechenden Element hinzugefügt. Zu beachten ist hierbei, dass Sie die Anführungszeichen setzen müssen. 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.

Beispiel:

<div style="color:red;font-size:14pt"> Das ist ein roter Text mit 14 pt </div>

Das ist ein roter Text mit 14 pt

<p style="color:blue;font-size:12pt;font-family:Verdana,Arial"> Das ist ein blauer Text mit 12 pt in der Schriftart Verdana </p>

Das ist ein blauer Text mit 12 pt in der Schriftart Verdana

Der Nachteil dieser Formatierung ist jedoch, dass Sie jedes einzelne Element einer Webseite mit den Informationen formatieren müssen, wenn Sie dies wünschen.

Schnellformatierung von Teilen eines Elements

<span></span> <span> ist dem Befehl <div> sehr ähnlich. Dieser Befehl stellt eine besondere Markierung für den Browser dar, die speziell formatiert werden kann.
Die Formatierung können Sie auf zwei verschiedene Arten erzwingen:

<span style=""> Die Formatierung wird an der Markierung definiert

<span class=""> Der Markierung wird eine Klasse, die bestimmte Formatierungen enthält, zugewiesen

Beispiel:

<p> Dies ist ein Absatz, der nicht formatiert wurde und demzufolge in der Standardschrift und -größe angezeigt wird. <span style="font-family:Kauflinn,Arial;color:red;font-size:16pt"> Die Formatierung mit <span style="color:blue"><span></span> ändert mitten im Absatz das Aussehen des Textes. </span> Das schließende <span style="color:blue"></span> </span> hebt die Formatierung wieder auf. </p>

Dies ist ein Absatz, der nicht formatiert wurde und demzufolge in der Standardschrift und -größe angezeigt wird. Die Formatierung mit <span> ändert mitten im Absatz das Aussehen des Textes. Das schließende </span> hebt die Formatierung wieder auf.

Überschreiben von Stylesheets

Die Browser nutzen zum Anzeigen der Formatierungen eine bestimmte Reihenfolge zur Darstellung der Stylesheets. Es wird immer die zuletzt angegebene Definition eines Elements benutzt.

Beispiel:

Definition der Formatierung in der Datei layout.css
body {font-family:Arial;font-size:10pt;color:black;} h1 {font-family:Arial;font-size:18pt;color:green;} p {font-family:"Courier New";background:gray;color:white;} Das HTML-Dokument mit Formatänderungen <html> <head> <title> Überschreiben von Stylesheets</title>  <link rel="stylesheet" type="text/css" href="layout.css">   <style type="text/css">  </style>  </head> <body> <h1><h1>-Formatierung aus externer Datei </h1> <p>Im Dokumentkopf überschriebene <p>-Formatierung</p> Textdarstellung wie in der Datei <b>layout.css</b> festgelegt <h1 style="font-size:12pt;color:red"> Überschriebene <h1>-Formatierung</h1> <p style="font-family:Kauflinn;font-size:16pt">Geänderte Schriftart am Tag <p></p> </body> </html>

So sieht das aus

Definitionen vererben

Die Formatdefinition p {color:blue;font-size:10pt;} bewirkt, dass alle Abschnitte <p>...</p> eines Dokuments in der Farbe blau und der Schriftgröße 10pt dargestellt werden

Durch Klasseneinteilungen lassen sich Formatdefinitionen flexibler auf ein Dokument anwenden.

Beispiel:

Für den HTML-Befehl <p> werden drei verschiedene Klassen zur unterschiedlichen Formatierung definiert:

Formatdefinition (Klasse) Formatierung Ansicht

p.rot {color:red;} <p class="rot">roter Text</p> roter Text

p.gruen {color:green;} <p class="gruen">grüner Text</p> grüner Text

p.blau {color:blue;} <p class="blau">blauer Text</p> blauer Text

Diese Formatdefinitionen gelten nur für den Tag </p>. Sollen Formatdefinitionen für alle HTML-Befehle gelten, so sind die Klassen anders zu definieren.

Beispiel:

Diese Klasse gilt für alle HTML-Befehle.

Formatdefinition (Klasse) Formatierung Ansicht

.klein {font-size:10pt;} <p class="klein">kleiner Text</p> kleiner Text

<b class="klein">kleiner Text</b> kleiner Text

<i class="klein">kleiner Text</i> kleiner Text

Das ist ein <span class="klein"> kleiner Text</span> Das ist ein kleiner Text

Wie man mit Formatdefinitionen bei Stylescheets umgeht, ist eine individuelle Sache. In Anbetracht der vielseitigen Möglichkeiten besteht leicht die Gefahr, den Überblick zu verlieren. Eine mögliche Variante ist folgende:

In einer zentralen Datei werden alle Formatdefinitionen festgelegt

Diese Datei wird in jedes HTML-Dokument eingebunden

Es werden nur Klassen ohne Angabe eines speziellen HTML-Befehls definiert

Alle Formatierungen erfolgen somit durch <befehl class="klasse">.....</befehl>

Gleiche Formate

Möchten Sie für mehrere HTML-Befehle gleichartige Formatierungen definieren, so geben Sie alle gewünschten Tags an und trennen diese durch Kommas voneinander.

Es bedeutet dieselbe Formatierung, wenn Sie angeben:

h1 {font-family:Verdana,Arial;color:#808080;}
h2 {font-family:Verdana,Arial;color:#808080;}

oder wenn Sie definieren:

h1,h2 {font-family:Verdana,Arial;color:#808080;}

Sie fassen ganz einfach die gleichen Angaben eines HTML-Befehls zu einer einzigen zusammen.

Formatabhängige Klassen

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, so wird er nach den Stylesheet-Angaben formatiert. Trifft eine Angabe nicht zu, wird die Formatierung nicht ausgeführt.

Beispiel:

<html> <head> <title> Klassen von Stylesheets </title>  <style type="text/css">  </style>  </head> <body> <h1>Stylesheets:<br> Verwenden von formatabhängigen Klassen</h1> <p>body {font-family:Arial,Verdana;}<br> Der Text des gesamten Dokuments wied standardmäßig in der Schriftart Arial dargestellt.</p> <p class="hintergrund">p.hintergrund <b> </b>{background-color:lightgray;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 Schriftart gesetzt</i></p> </body> </html>

So sieht das aus

Kommentare

Beim Erstellen von verschiedenen Formatierungen und deren Unterklassen ist es ratsam, dass Sie die unterschiedlichen Definitionen kommentieren.

/* Kommentar */ Kommentare können Sie vor oder direkt hinter den jeweiligen Definitionen angeben. Mit /* leiten Sie einen Kommentar ein, und mit */ beenden Sie ihn wieder. Kommentare werden von den Browsern ignoriert und nicht angezeigt.

Beispiel:
p.eins {color:blue;} /* erster Absatz immer blau */ /* Listen immer in Courier */ li {font-family:"Courier New";}