Mathe und Info

Seite

Stylesheets

Sinn und Zweck

Eine einzelne Website können wir jetzt mit unserem bisherigen Wissen erstellen. Ein Web-Projekt besteht aber in der Regel aus mehreren Websites und verschiedenen Formularen.
Für diese verschiedenen Websites möchte man manchmal gerne ein sogenanntes "Corporate-Identity"-Layout. D.h. alle Seiten sollen ungefähr ähnlich aufgebaut sein und mit den gleichen Formatierungen versehen sein.
Dazu kann man sogenannte Stylesheet-Dateien verwenden. Dann kann man alle Formatierungen in dieser Datei zentral festlegen und diese Datei verschiedene HTML-Seiten einbinden.
Gehen wir einmal von einem unserer bisherigen Beispiele aus:

bisherige Tabellenformatierung

Der folgende Code ist ein Tabellenformatierung, wie wir sie bis hierher gemacht haben.

<table style="width:100%; color:green">
    <tr>
          <td style="border: 2px dotted yellow"> Zelle 1 </td>
          <td style="border: 2px dotted yellow"> Zelle 2 </td>
    </tr>
    <tr>
          <td style="border: 2px dotted yellow"> Zelle 3 </td>
          <td style="border: 2px dotted yellow"> Zelle 4 </td>
    </tr>
</table>

Erläuterung:
Wie wir sehen, haben alle Zellen diegleiche Formatierung und wir müssentrotzdem die style-Anweisung immer wieder erneut tippen. Genau an diesem Problem will man ansetzen.
Alle <td> Elemente sind gleich formatiert, daher stellt sich die Frage, ob man nicht an einer zentralen Stelle die Formatierung für alle auftauchenden <td> festlegen kann. Man kann und zwar mit dem

zentralen style-Bereich zur Formatierung

Im <head> Teil des HTML-Dokumentes kann man einen sogenannten Style-Block einbauen, zum Beispiel so:

<html>
    <head>
       ...
       <style>
             table {width:100%; color:green;}
             td {border: 2px dotted yellow;}
       </style>
    </head>
    <body>
        <table>
          <tr>
            <td> Zelle 1 </td>
              <td> Zelle 2 </td>
          </tr>
          <tr>
              <td> Zelle 3 </td>
              <td> Zelle 4 </td>
            </tr>
        </table>
    </body>
</html>

Erläuterung:
Die Ausgabe dieses HTML-Dokumentes erzeugt genau diesselbe Tabelle, wie das Beipiel oben. Durch die zentrale Angabe des style-Tags werden alle Elemente <td>, die im Body stehen mit dem entsprechenden Style versehen. Dies vereinfacht natürlich enorm die Übersicht und spart jede Menge Code.

Allgemeine Syntax innerhalb des Style-Tag

In dem <style> Bereich kommt eine andere Syntax als bei normalen HTML zum Einsatz. Dies liegt daran, dass innerhalb des style-Tags nur Formatierungen angegeben werden. Eine einzelne Formatierungsanweisung besteht dabei immer aus:

SELEKTOR { Eigenschaft:Wert; ... }

Eine solche Syntax nennt man eine CSS-Syntax. Der Selektor bestimmt, auf welche HTML-Elemente sich die Formatierung(en) in den geschweiften Klammern beziehen. Wie in dem Beispiel oben kann man mehrere Selektoren programmieren, man kann auch mehrfach denselben Selektor benutzen, alle Formatierungen werden von oben nach unten abgearbeitet und wirken kumulativ (d.h. bei mehreren gleichen Selektoren, werden alle Formatierungen angewendet und zwar in der Reihenfolge von oben nach unten), deswegen heißen diese Formatierungen auch cascading stylesheets.

noch ein CSS-Beispiel

angenommen wir haben folgenden Style-Block:
       ...
       <style>
             h1 {color:blue;}
             h2 {color:green; font-style:underline;}
             a {font-size:150%;}
             p {color:red;}
             h2 {color:yellow;}
             p {font-size:75px;}
       </style>
       ...

Erklärung:
Dieser Block wird sich dann wie folgt auswirken:

Alle h1 Elemente erhalten die Farbe blau
Alle a Elemente erhalten die Schriftgröße 150%
Alle p Elemente sind rot und haben die Schriftgröße 75px
Alle h2 Elemente sind unterstrichen und gelb (weil die ursprünglich schwarze Formatierung "überschrieben" wurde)

Damit ist es jetzt möglich an einer zentralen Stelle in einem Dokument mehrere Formatierung zu sammeln. Dann braucht man nicht mehr denselben Code an verschiedenen Stellen zu kopieren. Der gesamte Code wird übersichtlicher und leichter wartbar.

Mehrere HTML-Seiten mit derselben Formatierung

Nachdem wir jetzt besprochen haben, wie man eine zentrale Style-Definition in einer HTML-Datei anlegt, gehen wir direkt zum nächsten Problem.
Ein typisches Web-Projekt besteht aus mehreren HTML-Seiten. Das bedeutet, dass man in jeder dieser HTML-Seiten die Formatierungsanweisungen wieder erneut im <head> definieren muss. Dies ist aber sehr aufwendig und fehlerträchtig.
Betrachten wir folgendes Beispiel:

Ein HTML-Projekt besteht aus 345 HTML-Seiten. Auf allen Seiten tauchen Tabellen auf. In jedem Dokument ist der Style zentral im <head> festgelegt.
Der Abteilungsleiter will aber aus Gründen der Lesbarkeit jetzt alle Inhalte von Tabellen auf font-size:200% stellen.

Daraus ergibt sich ein Problem: Es muss in allen 345 HTML-Seiten das Style-Tag angepasst werden. Das ist viel zu aufwendig, daher macht man folgendes:

Formatierungen können getrennt von HTML verwaltet werden
Änderungen an der Formatierung ohne die HTML-Datei anzufassen
Formatierungen können in mehreren HTML-Dokumenten verwendet werden

Zusammenfassung:

Man spricht im Zusammenhang mit Stylesheets immer von der Trennung von Inhalt und Darstellung:

In der HTML-Datei steht nur noch, wie die Seite aufgebaut ist und welche Inhalte dargestellt werden sollen.
In der zugehörigen styles.css Datei stehen die Formatierungen für die einzelnen HTML-Tags.
Natürlich hat eine solche Trennung Vor- als auch Nachteilen:

Vorteile:

Alle Formatierungsanweisungen stehen in einer zentralen Datei
Formatierungen können für alle HTML-Seitenschnell geändert werden

Nachteile:

Es muss vorher klar sein, welche Formatierungen man haben will
Die Styles-Datei wird von oben nach unten bearbeitet, d.h. man kann styles doppelt definieren und das letzt zählt dann.

Infoblätter und Arbeitsblätter

Styles definieren
Info: Dieses Infoblatt beschreibt die Syntax innerhalb des Style-Tags nochmal und listet typische Fehler auf.

Externe Stylesheets
Info: Hier wird nochmal in kurzen Worten mit einem Beispiel beschrieben, wie ein externes Stylesheet erstellt wird und welche Sachen dort hineingehören.