Übungsblatt zum Thema CSS

Mit den Übungen des letzten Übungsblattes haben Sie die klassische Methode der Gestaltung von Webseiten mit Hilfe von HTML-Tabellen kennengelernt.

Wegen der hinsichtlich Barrierefreiheit, asynchronem Arbeiten und dynamischen Webseiten angesprochenen Nachteile dieser Methode, besteht das Bestreben, das Layouten von Webseiten mit Hilfe von Tabellen durch das Gestalten mit Hilfe von Cascading Style Sheets (CSS) zu ersetzen. Dies ist das Thema dieses Übungsblattes, welches zu diesem Zweck ein Exzerpt der relevanten Abschnitte von SelfHTML darstellt.

Die Aufgabe der Cascading Style Sheets besteht darin, die Gestaltungsbefehle von HTML zu ersetzen und zu erweitern, um auf diese Weise u. a. die Gestaltung von Webseiten unabhängig von deren Redaktion durchführen zu können. Lesen Sie hierzu den Abschnitt Sinn und Zweck von CSS Stylesheets.

Die Umsetzung von CSS in den gängigen Webbrowsern erfolgte in der Vergangenheit sehr langsam und inkonsistent. Mit jeder neuen Browsergeneration verbessert sich allerdings die Situation. Dennoch gilt nach wie vor, dass auf CSS-Basis gestaltete Webauftritte mit allen avisierten Browsern getestet werden müssen, um herauszufinden, ob die benutzten Funktionen im Einzelfall auch tatsächlich unterstützt werden. Neben dieser speziellen CSS-Problematik existieren bei der Gestaltung von Webseiten auch grundsätzliche Probleme, wie z. B. die uneinheitliche Darstellung von Schriftgrößen und Farben. Lesen Sie hierzu ggf. den Abschnitt Stylesheets, Web-Browser und Anwender.

Bei der klassischen Seitengestaltung und Textformatierung mittels HTML-Befehlen wurden diese direkt in den jeweiligen Textabschnitt eingefügt. So konnte z. B. dem Text eines Absatzes dadurch ein neuer Zeichensatz zugewiesen werden, indem dieser mit dem Element <font>...</font> ausgezeichnet wurde. Hierdurch verschmolzen allerdings die Formatierungselemente mit denen zur Textstrukturierung. Bei CSS wird ein anderer Ansatz verfolgt. Hier werden Formate unabhängig von den Textpassagen definiert und diesen dann bei Bedarf zugewiesen. Dies bedeutet z. B., dass für Textabsätze ein bestimmter Zeichensatz und eine bestimmte Zeichengröße definiert und diese Definition beim Darstellungsvorgang benutzt wird. Wie dies im Einzelnen funktioniert ist Thema dieses Übungsblattes.

Die Definition der Formate, die bei der Darstellung einer HTML-Seite benutzt werden sollen, kann an unterschiedlichen Stellen erfolgen:

  1. In einer eigenen CSS-Datei. Dies wird primär dann gemacht, wenn Formate für mehrere HTML-Dateien bzw. einen kompletten Webauftritt gültig sein sollen.
  2. Im Kopfbereich der HTML-Dateien. Dies erfolgt dann, wenn Formate nur für diese Datei gültig sein sollen. Gleichnamige Formate besitzen dabei Vorrang vor jenen, die in einer externen Datei definiert sind.
  3. Innerhalb eines HTML-Elementes, z. B. für einen bestimmten Absatz. Diese Definitionen besitzen Vorrang gegenüber denen im Kopfbereich und in externen Dateien. Sie werden dann benutzt, wenn die Definition nur für einen kurzen Textabschnitt gültig sein soll bzw. wenn eine bestimmte Definition temporär abgeschaltet werden soll.

Daneben ist es ebenfalls möglich, separate Formate für unterschiedliche Ausgabemedien zu definieren. So kann z. B. für die Bildschirmdarstellung eine andere Formatierung gewählt werden, als für den Ausdruck, die Darstellung auf dem Mobiltelefon bzw. dem PDA oder die Braille-Zeile für Blinde.

Im folgenden Beispiel sehen Sie, wie CSS-Anweisungen im Kopf einer HTML-Datei benutzt werden können, um HTML-Elementen Formate zuzuweisen. So kann z. B. durch den Eintrag 

<html>
  <head>
    <style type="text/css">
    <!--
    body {background-color:#EEEEFF}
    -->
    </style>
  </head>

  <body>
  </body>
</html>

dem Hintergrund der Datei über das HTML-Element <body>...</body> eine neue Farbe zugewiesen werden. Steht die CSS-Anweisung 

    body {background-color:#EEEEFF}

in einer externen CSS-Datei, z. B. mit dem Namen formate.css, so gilt diese Hintergrundfarbe für alle HTML-Dateien, die diese CSS-Datei im Kopfelement mit der Anweisung 

<link rel="stylesheet" type="text/css" href="formate.css">

einbinden. Dabei bedeutet link Verweis. rel steht für Relation bzw. Bezug. Die Einträge besagen, dass es sich bei der einzubindenden Datei um eine Formatdefinition des Typs CSS handelt.

Der HTML-Kommentar <!--...--> im obigen Beispiel dient dazu, älteren Browsern, die kein CSS verstehen, die Anzeige der Seite zu gestatten. Diese Browser "überlesen" dann einfach die CSS-Anweisungen. Die Link-Anweisung darunter kann allerdings nicht in einem HTML-Kommentar stehen. Sonst wird die CSS-Datei nicht eingelesen.

Um CSS-Anweisungen zu kommentieren, können keine HTML-Kommentare benutzt werden. Da Kommentare wichtig sind, um CSS-Definitionen temporär ausschalten oder diesen Erläuterungen hinzufügen zu können, sehen die Cascading Style Sheets hierfür eine eigene Syntax vor, die sich an die Kommentare der C-Programmiersprachfamilie anlehnt. Entsprechend dieser Syntax werden Kommentare durch die Zeichenfolge /* eingeleitet und durch */ abgeschlossen.

Beispiel: /* Dies ist ein CSS-Kommentar */

In der Beispieldatei oben ist die einzusetzende Farbe in Hexadezimaler-Notation angegeben. Bei dieser Darstellung werden der Rot-, Grün- und Blauanteil der Farbe als ein hexadezimaler Zahlenwert angegeben: EEEEFF. Dieser weist je ein Byte für den Rot-, Grün- und Blauanteil auf: RRGGBB. Dass es sich bei dem Zahlenwert um einen Hexadezimalwert handelt, wird durch das vorangestellte Gatterzeichen # ausgedrückt.

Daneben können auch vordefinierte Farben benutzt werden. Die CSS-Anweisung h1 {color:red} weist z. B. Überschriften erster Ordnung die Farbe Rot zu. Schließlich ist es ebenfalls möglich, Farben als RGB-Werte zu definieren. Der hexadezimale Farbwert oben entspricht dem Eintrag rgb(238,238,255) in RGB-Notation: 

    body {background-color:rgb(238,238,255)}

Der Bereich, aus dem die Farbwerte genommen werden können, ist 0..255, da auch hier die Codierung jeweils durch ein Byte erfolgt. Alternativ können auch Prozentangaben zwischen 0% und 100% verwendet werden. Weiteres hierzu im Abschnitt Maßeinheiten, Farbangaben von SelfHTML.

Schaut man sich die Anweisung h1 {color:red} genauer an, so besteht diese aus mehreren Teilen:

  1. Dem "Selektor": Dies ist der Teil vor den geschweiften Klammern. Der Selektor legt fest, für welches HTML-Element die folgenden Definitionen gelten sollen. Im obigen Beispiel gelten die Formate für alle Überschriften 1. Ordnung (h1-Elemente).

  2. Der "Definition": Diese legt fest, welche Eigenschaften des HTML-Elementes zu ändern sind. Da dies mehr als eine Eigenschaft sein kann, stehen alle Definitionen, durch Strichpunkt ; getrennt, in einem Satz geschweifter Klammern { und }. Im obigen Beispiel wird etwa die CSS-Eigenschaft color (Schriftfarbe) geändert. Eine Anweisung, die sowohl die Farbe, als auch die Schriftgöße (font-size) ändert, würde wie folgt aussehen:

    h1 {color:red;font-size:36pt}

    Der Eigenschaft color wird der Wert red zugewiesen, der Eigenschaft font-size der Wert 36 Punkt, mit der Schriftgröße in Punkten. Zwischen Eigenschaft und Wertzuweisung muss stets ein Doppelpunkt stehen. Bei der letzten Definition vor der schließenden geschweiften Klammer kann der Strichpunkt entfallen.

Aufgaben:

Eine Auflistung der vorhandenen Möglichkeiten für die Formatierung von HTML-Elementen mittels CSS-Eigenschaften finden Sie in SelfHTML.

Bei der Definition von CSS-Eigenschaften kann der Fall auftreten, dass diese nicht nur für ein HTML-Element, sondern für mehrere gültig sein sollen. Im obigen Beispiel hätte z. B. der Fall eintreten können, dass die Definition nicht nur für das Element h1, sondern zusätzlich auch für das Element h2 gültig sein soll. Um Codeduplikation zu vermeiden, ist es deshalb möglich, im Selektor mehrere, durch Kommata getrennte Elementtypen anzugeben. Die Anweisung

h1, h2 {color:red;font-size:36pt}

legt dann z. B. die Eigenschaften für beide Überschriftsarten fest.

In HTML-Dateien stehen HTML-Elemente häufig im Bereich eines anderen HTML-Elementes. Im folgenden Beispiel enthält eine Liste z. B. mehrere Absatzelemente: 


<ul>
  <li>
  <p>
  Absatz Nr. 1
  </p>
  </li>

  <p>
  <li>
  Absatz Nr. 2
  </li>
  </p>
</ul>

Dabei steht ein Absatzelement in einem Listeneintrag und ein Listeneintrag umgekehrt in einem Absatzelement. Warum das so ist, sehen wir weiter unten.

Mit der CSS-Anweisung li {color:red} können wir Listeneinträgen z. B. die Farbe Rot zuweisen. Was geschieht dann mit den eingeschachtelten Absatzelementen? Hinsichtlich verschachtelter HTML-Elemente sieht die CSS-Spezifikation vor, dass das HTML-Element, welches innerhalb eines anderen HTML-Elements vorkommt, dessen Eigenschaften übernimmt und seine eigenen Eigenschaften nur hinzufügt. Sofern eine Eigenschaft doppelt definiert ist, setzt die für das innere Element gültige Definition die des äußeren außer Kraft, sodass die des inneren Elements zur Anwendung kommt.

Aufgabe:

Sie können mit Hilfe von Style-Sheets jedoch bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines anderen HTML-Elements vorkommt. Um dies zu erreichen, können Sie den Bezeichner des eingeschachtelten HTML-Elements dem Selektor des äußeren Elements hinzufügen. Mit dem Code

li p {color:green}

kann so z. B. angegeben werden, dass Absätze, die in einem Listenelement vorkommen, grün gesetzt werden sollen. Alle übrigen Absätze erscheinen in ihrer ursprünglichen Farbe. Beachten Sie das fehlende Komma im Selektor. Mit Komma wäre dies eine Definition, die für Listen- und Absatzelemente gilt. Ohne Komma gilt diese Definition nur für Absatzelemente in Listenelementen. Das innere Element steht rechts vom äußeren Element.

Aufgabe:

Hinsichtlich der Verschachtelung von HTML-Elementen existieren noch weitere Möglichkeiten, den Gültigkeitsbereich von CSS-Anweisungen zu beschränken. Darüber hinaus ist es möglich, die Gültigkeit von CSS-Anweisungen an die Existenz bestimmter Attribute bzw. Attributwerte zu koppeln.

Aufgabe:

Bis jetzt können wir jedem HTML-Element nur ein Format zuweisen. Es könnte allerdings der Fall eintreten, dass unterschiedlich formatierte Varianten eines HTML-Elements benötigt werden. So könnte es z. B. sein, dass Textabsätze, die eine bestimmte, erläuternde Funktion besitzen, sich von anderen abheben sollen und daher mit einer anderen Farbe zu hinterlegen sind. Dasselbe könnte beispielsweise für Überschriften unterschiedlicher Art, aber gleicher Hierarchieebene gelten.

Um dies zu ermöglichen, können HTML-Elemente klassifiziert werden. Dies geschieht über das Attribut class, welches in das einleitende Tag eingefügt wird. Der Wert, der dem Attribut zugewiesen wird, kann frei gewählt werden, d. h. es können eigene Klassennamen definiert werden. Auf diese Weise kann es z. B. normale Absätze <p>...</p> geben und Absätze der Klasse hinterlegt, die eine eigene Formatierung aufweisen:

<p class="hinterlegt">...</p>.

Um derartige Klassen zu formatieren, sehen die CSS einen modifizierten Selektor vor. Bei diesem wird der Klassenname mit einem Punkt an den Bezeichner des HTML-Elements angefügt: 

p.hinterlegt { background-color:#FFFF00 }

Die obige CSS-Anweisung weist den Absätzen der Klasse hinterlegt eine andere Hintergrundfarbe zu, als den normalen Absätzen. Letztere werden in der üblichen Weise formatiert.

Tritt der Fall ein, dass mehrere HTML-Elemente einer Klasse hinterlegt zugeordnet werden sollen, z. B. neben dem Element p auch noch das Element h1, so müsste für jedes derartige Element eine entsprechende CSS-Anweisung vorgesehen werden. Um unnötige Schreibarbeit zu vermeiden gibt es für diesen Fall eine abkürzende Notation: 

*.hinterlegt { background-color:#FFFF00 }

Der Stern an Stelle des Elementbezeichners bedeutet soviel wie: die folgende Anweisung gilt für alle HTML-Elemente mit dieser Klassenzugehörigkeit. Er kann auch entfallen, d. h. die obige Anweisung könnte auch wie folgt notiert werden: 

.hinterlegt { background-color:#FFFF00 }

Aufgabe:

Eine wichtige Aufgabe bei der Gestaltung eines Webauftrittes ist die Aufteilung der Webseiten in Bereiche, die jeweils eine andere Funktion besitzen. Mit dem letzten Übungsblatt haben wir die klassische Methode gesehen, bei der die Aufteilung mit Hilfe von HTML-Tabellen geschieht.

Da das Seitenlayout einen wichtigen Aspekt bei der Entwicklung der Cascading Style Sheets darstellt, ist es mit diesen z. B. möglich, Elemente pixelgenau im Anzeigefenster des Webbrowsers zu positionieren und die Position von Elementen untereinander festzulegen. Dazu gehören Angaben zum absoluten und relativen Positionieren von Elementen, Angaben zu deren Ausdehnung, zum Umfließen von Elementen und Angaben zum Überlappen und Anzeigen von Elementen.

Eine wichtige Rolle spielen in diesem Zusammenhang die HTML-Elemente <div> und <span>, mit denen gesonderte Bereiche in einer Webseite ausgezeichnet werden können. Mit Hilfe dieser Elemente lässt sich z. B. Text klassifizieren, ohne dass die Klasse an ein bestimmtes Textstrukturelement, wie z. B. <p>, gebunden werden muss. Der Unterschied zwischen <div> und <span> besteht darin, dass <div> im Textfluss einen Zeilenwechsel erzwingt, wohingegen <span> überhaupt keine spezifischen Eigenschaften besitzt.

Auf der Grundlage dieser beiden Elemente ist es möglich, ganz neue Formate zu definieren, oder sogar HTML-Elemente zu ersetzen. Das folgende Beispiel zeigt, wie das <p>-Element durch eine eigene Definition ersetzt werden könnte. 

<html>
  <head>
    <style type="text/css">
       <!--
       .Absatz {
         font-family:Arial,sans-serif;
         font-size:11pt;
         color:black;
         margin-top:6px;    /* Abstand zum vorherigen Absatz */
         margin-bottom:6px; /* Abstand zum nachfolgenden Absatz */
       }
       -->
    </style>
  </head>

  <body>

    <div class="Absatz">Absatz 1</div>
    <div class="Absatz">Absatz 2</div>

  </body>
</html>

Aufgaben:

Neben der Möglichkeit, mit Hilfe von Klassen neue Textformate festzulegen, können ebenfalls sogenannte "Individualformate" definiert werden. Diese Formate werden nicht über das Universalattribut class= angesprochen, sondern über das Universalattribut id=. Individualformate erlauben es, die Seitenaufteilung selbst zu steuern, wodurch dem Browser die Kontrolle über den Textumbruch entzogen wird. Skalierungen des Browserfensters führen in den Bereichen, die einem Individualformat unterliegen, nicht mehr automatisch zu einer neuen Aufteilung des Texts. Das Browserfenster fungiert nur noch als Fenster in diesen Bereich. Bei Skalierung des Fensters wird nur noch der sichtbare Teil des Bereichs bzw. des in diesem Bereich vorhandenen Texts angezeigt. Mit Hilfe von Individualformaten lässt sich also der Seitenaufbau eines Webauftrittes bzw. -portals frei konfigurieren.

Mit dem folgenden Code kann z. B. für die Seitenüberschrift ein Bereich definiert werden, innerhalb dessen die Überschrift erscheinen soll. 

<html>
  <head>
    <style type="text/css">
       <!--
       #Überschriftsbereich {
         position:absolute; 
         top:10px;
         left:10px; 
         width:500px; 
         height:40px; 
         background-color: rgb(128,255,255);
         font-family:Arial,sans-serif;
         font-size: 24pt;
         padding-top:5px;
         text-align:center
       }
       
    -->
    </style>
  </head>

  <body>

    <div id="Überschriftsbereich">Überschrift</div>

  </body>
</html>

position:absolute bedeutet hierbei, dass sich die folgenden Positionsangabentop und left auf den Rand des Elternelementes, hier <body>, d. h. die Seite selbst, beziehen. width und height legen die Größe des Bereiches in Form von Bildelementen, d. h. Pixel px, fest. background-color definiert die Hintergrundfarbe des Bereiches. Mit padding-top wird der Abstand zwischen dem Text und dem oberen Rand des Bereiches festgelegt. Mit text-align die gewünschte Textausrichtung, hier: zentriert. Individualformate beginnen im Selektor mit dem Gatterzeichen #, gefolgt von dem Namen.

Aufgaben:

Eine Übersicht der vielfältigen Möglichkeiten zur Formatierung mit CSS finden Sie in der Kurzreferenz: CSS von SelfHTML. Detailliertere Beschreibungen der einzelnen Eigenschaften unter CSS-Eigenschaften.

Wie Sie an den Beispielen oben sehen, kann eine Webseite mit Hilfe von CSS-Anweisungen in einzelne Bereiche aufgeteilt werden. Hierauf fußt die Gestaltung von Webseiten mittels Cascading Style Sheets. Die Bereiche werden als Boxen bezeichnet. Boxen lassen sich sowohl verschachteln, als auch nebeneinander legen. Sie werden üblicherweise HTML-Elementen zugeordnet, z. B. dem <div>-Element. Die Wurzel der dabei entstehenden Hierarchie bildet das Body-Element. Es enthält alle anderen Elemente bzw. Boxen der Seite.

Eine fortlaufende Anzahl von <div>-Elementen mit zugehörender Box erzeugt eine ebenfalls fortlaufende Anordnung dieser Boxen in vertikaler Richtung auf der Webseite. Diese Art Boxen werden auch als Block-Boxen bezeichnet. Den HTML-Elementen <div>, <p> und <body> werden immer Block-Boxen zugeordnet.

Anders ist die Situation bei Benutzung der HTML-Elemente <span> und <a>. Diesen Elementen werden sogenannte Inline-Boxen zugewiesen. Diese Boxen darf der Webbrowser umbrechen. Sie können über mehrere Zeilen laufen.

Das Box-Modell unterscheidet zwischen Polsterung (engl.: padding), Rahmen (engl.: border) und Rand (engl.: margin). Zwischen dem Inhalt einer Box, z. B. einem Text, und ihrem Rahmen (border) sitzt ein Polster (padding). Ein Rand (margin) isoliert die Box samt Rahmen von ihrer Umgebung. Polster, Rahmen und Rand lassen sich in allen vier Richtungen (top, bottom, left, right) einzeln einstellen, z. B. margin-top oder padding-top. Eine Reihe von diesen Eigenschaften haben wir im Rahmen dieses Übungsblattes bereits benutzt.

Die Werte der vier Richtungen lassen sich auch in einem gemeinsamen Attribut zusammenfassen, wobei die Seiten im Uhrzeigersinn verteilt werden. Die folgenden Werte würden jeden Absatz oben (12 Uhr) mit 12pt, rechts mit 3pt, unten mit 6pt und links mit 9pt umranden:

p { margin: 12pt 3pt 6pt 9pt}

Mit dem Beispiel aus der letzten Übung haben wir das Fenster des Browsers in zwei Bereiche eingeteilt: ein Überschriftsbereich, unter dem ein Textbereich angeordnet ist. Zu einem Webauftritt gehört üblicherweise zusätzlich eine Menüleiste, die z. B. am linken Fensterrand angeordnet ist.

Aufgaben:

Zum Schluss dieser Ausführungen kehren wir dorthin wieder zurück, wo wir hinsichtlich der Seitenaufteilung begannen: bei der Tabelle. Genauso, wie Tabellen benutzt werden können, um Webseiten in einzelne Bereiche aufzuteilen, können CSS-Formate benutzt werden, um eine einfache Tabelle zu erzeugen. Schauen Sie sich hierzu den Abschnitt zum Thema Anzeige von Elementen an.

Aufgabe: