Themen

Projekte

Links

Software

Themen

Erste Schritte mit CSS

Theoretische Informatik

Etwas mehr Style bitte

Bisher haben wir uns auf XHTML konzentriert, um die Struktur einer Webseite aufzubauen. Jetzt ist es an der Zeit unseren Seiten ein bißchen mehr Stil zu verleihen. Mit CSS lässt sich die Darstellung von Webseiten vollkommen steuern. Man braucht dazu das XHTML nicht mehr zu verändern. Kann das wirklich so einfach sein? Du wirst schon eine neue Sprache lernen müssen. Webville ist schließlich eine mehrsprachige Stadt.

So sollen unsere Projektseiten einmal aussehen:

Die folgenden Abschnitte bieten eine Einführung in CSS, die genau die Mittel bereit stellt, die man benötigt um solche Designs herzustellen.

CSS mit XHTML verwenden

Wir haben bereits ein bißchen CSS kennen gelernt. Schauen wir uns eine Stilregel trotzdem noch einmal ein bißchen genauer an:

p {
background-color: red;
}

Diese Regel sorgt dafür, dass alle Absätze eine rote Hintergrundfarbe erhalten.

Der erste Teil der Regel - das was vor der öffnenden geschweiften Klammer steht, hier das p-Element - wirkt als Selektor. Mit dem Element-Selektor wählt man ein Element aus, auf das die Regel wirken soll. Innerhalb der geschweiften Klammern folgt nun ein Menge an Eigenschaftsdefinitionen. Es geht immer nach demselben Schema: Erst kommt der Name der Eigenschaft die formatiert werden soll, dann ein Doppelpunkt als Trennzeichen und schließlich der Wert, den die gewählte Eigenschaft annehmen soll. Abgeschlossen wird eine Eigenschaftsdefinition mit einem Semikolon.

Man kann einer Stilregel natürlich auch mehrere Eigenschaftsdefinitionen verpassen:

p {
background-color: red;
border: 1px solid gray;
}

Alle Absätze werden nun durch einen 1px dicke, durchgezogene, graue Rahmenlinie eingefasst.

CSS in XHTML einbetten

Es gibt mehrere Möglichkeiten CSS ind XHTML einzubetten. Bis jetzt haben wir unser CSS immer mit Hilfe des <style>-Elements im Kopfbereich des XHTML-Dokumentes notiert.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>KopfüBar</title>

    <style type="text/css">

      p {
        color: maroon;
      }

    </style>

  </head>
  <body>
    <h1>Willkommen in der neuen und verbesserten KopfüBar</h1>
    <p>
      <img src="bilder/getraenke.gif" alt="Getränke" />
    </p>
    <p>
      Kommen Sie einfach mal vorbei. Bei uns finden Sie jeden Abend erfrischende
      <a href="getraenke/elixir.html">Elixire</a>, 
      Unterhaltung, und vielleicht interessiert Sie auch die eine oder andere Runde
      <em>Dance, Dance, Revolution</em>. Wireless-Zugang ist jederzeit verfügbar,
      aber BSIEWSM (Bringen Sie Ihren eigenen Webserver mit).
    </p>
    <h2>Wegweiser</h2>
    <p>
      Sie finden uns unmittelbar im Zentrum der Altstadt von Webville.
      Falls Sie Probleme haben uns zu finden, werfen
      Sie einen Blick auf unsere
      <a href="info/wegbeschreibung.html">Wegbeschreibung</a>.
      Kommen Sie mal vorbei!
    </p>
  </body>
</html>

CSS-Regeln, die innerhalb eines style-Bereichs im Dokumentkopf notiert werden, wirken auf das gesamte Dokument. Im Beispiel wird also die Schriftfarbe für jeden Absatz auf der Webseite auf die Farbe 'maroon' (= kastanienbraun) gesetzt.

Nun können wir auch weitere Elemente stylen, indem wir entsprechende Regeln notieren. Zum Beispiel für die Überschriften:

    ...
    <style type="text/css">

      p {
        color: maroon;
      }

      h1 {
        font-family: sans-serif;
        color: gray;
      }

      h2 {
        font-family: sans-serif;
        color: gray;
      }

    </style>
    ...

Es fällt sofort auf, dass die Regeln für das <h1>-Element und das <h2>-Element vollkommen identisch sind. Man kann deshalb einfacher schreiben:

    ...
    <style type="text/css">

      p {
        color: maroon;
      }

      h1, h2 {
        font-family: sans-serif;
        color: gray;
      }

    </style>
    ...

Wenn man eine Regeln für mehrere Elemente schreibt, trennt man sie also jeweils mit einem Komma voneinander. Auch die Angabe h1,h2 wirkt also als Selektor. Selektiert werden die beiden Elemente <h1> und <h2>. Wir werden sehen, dass CSS-Stilregeln alle mögliche Arten von Selektoren enthalten können, die jeweils festlegen, auf welche Elemente die Styles angewandt werden.

Schließlich soll die Begrüßung noch unterstrichen werden. Die Begrüßung steckt in einem <h1>-Element. Also fügen wir noch eine weitere Regel hinzu, die für die Unterstreichung sorgt und nur auf das <h1>-Element wirkt:

    ...
    <style type="text/css">

      p {
        color: maroon;
      }

      h1, h2 {
        font-family: sans-serif;
        color: gray;
      }

      h1 {
        border-bottom: 1px solid black;
      }

    </style>
    ...

Das ganze sieht jetzt ungefähr so aus:

Eine externe CSS-Datei erstellen

Toll, das "bar.html" jetzt schon ein bißchen besser aussieht. Aber was ist nun mit "wegbeschreibung.html" und "elixire.html"? Das Aussehen dieser Seiten sollte eigentlich mit dem der Hauptseite übereinstimmen. Kein Problem ... wir können doch einfach das Style-Element und alle Regeln in alle Dateien kopieren, oder? Nicht so schnell. Wenn wir das so machen würde, müssten wir jedes Mal, wenn wir eine Stilregel der Webseite ändern wollen, die Stilregeln in jeder einzelnen Datei ändern - nicht gerade das was wir wollen. Es gibt einen besseren Weg. Wir erstellen eine neue Datei nur für unsere Stilregeln und binden diese Datei dann auf jeder Projektseite ein. Genauer werden wir folgendes machen:

Wir nehmen die Regeln aus "bar.html" und packen sie in eine Datei namens "bar.css".
Wir erstellen in "bar.html" einen externen Link auf diese Datei.
Den gleichen externen Link erstellen wir auch in "elixir.html" und "wegbeschreibung.html".

"bar.css" erstellen

Wir erstellen "bar.css" als eine einfache Textdatei im Wurzelverzeichnis unseres Projektes, also in demselben Ordner wie "bar.html". Die Datei enthält nur die Stilregeln, nicht die <style>- bzw. </style>-Tags, hat also genau folgenden Inhalt:

      p {
        color: maroon;
      }

      h1, h2 {
        font-family: sans-serif;
        color: gray;
      }

      h1 {
        border-bottom: 1px solid black;
      }

Aus "bar.html" auf die externe CSS-Datei verweisen

Jetzt müssen wir dem Browser sagen, dass er die Seite mit den Styles aus der externen Stylesheet-Datei darstellen soll. Das können wir mit einem XHTML-Element namens <link>. So verwenden wir das <link>-Element in unserem Dokument:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>KopfüBar</title>

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

  </head>
  <body>

    ...

  </body>
</html>

Aus "elixir.html" und "wegbeschreibung.html" auf die externe CSS-Datei verweisen

Jetzt werden wir die externe Stylesheet-Datei genau so in "elixir.html" und "wegbeschreibung.html" einbinden. Dabei müssen wir nur eine Sache beachten: "elixir.html" befindet sich im Ordner "getraenke" und "wegbeschreibung.html" in Ordner "info". Beide müssen also den relativen Pfad "../bar.css" verwenden, da wir von Speicherort dieser Dateien aus um eine Ordnerebene nach oben gehen müssen, um unsere externe Stylesheet-Datei "bar.css" zu finden.

Also müssen die beiden Dateien so aussehen:

Das ist "elixir.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>KopfüBar-Elixire</title>
    <link type="text/css" rel="stylesheet" href="../bar.css" />
  </head>
  <body>
    ...
  </body>

</html>

Und hier kommt "wegbeschreibung.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>KopfüBar Wegbeschreibung</title>
    <link type="text/css" rel="stylesheet" href="../bar.css" />
  </head>
  <body>
    ...
  </body>
</html>

"elixir.html" eine Klasse hinzufügen

Nun könnte man auf die Idee kommen, die Schriftfarbe der Absätze so anzupassen, dass sie jeweils der Farbe des Getränks entsprechen. Das Problem ist, dass eine Regel mit einem "p"-Selektor sich auf alle <p>-Elemente auswirkt. Wie also kann man diese Absätze einzeln auswählen?

Das ist der Punkt, an dem Klassen ins Spiel kommen. Wenn wir XHTML und CSS verwenden, können wir eine Klasse von Elementen definieren und dann Stilregeln auf alle Elemente anwenden, die zu dieser Klasse gehören.

Zunächst weisen wir dem <p>-Element des Absatzes "Tee - grün und kühl" eine Klasse namens "gruenertee" zu. Das funktioniert folgendermaßen:

  <p class="gruenertee">
      <img src="../bilder/gruen.jpg" alt="Tee - grün und kühl" />
      Ein Vitamin- und Mineralienschock. Dieses Elixir
      kombiniert die gesunden Vorteile grünen Tees mit einem
      Hauch Kamillenblüten und Ingwer.
  </p>

Wenn man ein Element zu einer Klasse hinzufügen möchte, fügt man ihm einfach das Attribut "class" mit dem Namen der Klasse, beispielsweise "gruenertee" als Wert hinzu. Und da der Absatz für den grünen Tee jetzt zur Klasse gruenertee gehört, müssen wir einfach nur noch ein paar Regeln ergänzen, um die Elemente dieser Klasse zu stylen:

      p.gruenertee {
        color: green;
      }

Um eine Klasse auszuwählen, verwendet man den Klassen-Selektor. Dieser Selektor wählt alle Absätze aus, die zu der Klasse "gruenertee" gehören. Dazu schreibt man zunächst den Namen des Elements (hier: "p"), dann folgt ein "." und abschließend der Klassenname (hier: "gruenertee"). Wie gewohnt folgt auf den Selektor ein Block (in geschweiften Klammern) mit einer Menge an Stilregeln.

Der nächste Schritt mit Klassen...

Wir haben nun eine Regel geschrieben, die die Klasse gruenertee verwendet, um die Schriftfarbe für jeden Absatz der Klasse in "green" zu ändern. Aber was ist, wenn man mit allen <blockquote>-Elementen das Gleiche machen möchte? Man könnte folgendes tun:

      blockquote.gruenertee, p.gruenertee {
        color: green;
      }

Und das XHTML sieht dann so aus:

      <blockquote class="gruenertee">

Das ist sehr umständlich. Daher gibt es eine bessere Möglichkeit. Wenn alle Elemente, die in der Klasse gruenertee sind, den gleichen Style haben sollen, kann man die Regel einfach so schreiben:

      .gruenertee {
        color: green;
      }

Wenn man die Elementnamen weglässt und einfach nur einen Punkt verwendet, auf den der Klassenname folgt, wird die Regel auf alle Mitglieder der Klasse angewendet.

» drucken: pdf | html