CSS-Einbindung

Wie Sie im letzten Artikel gesehen haben, können Sie in fast alle HTML-Tags mit style eine Formatierung, Einrückung etc. einbauen. Vorallem bei sogenannten Bereichs-Tags wie <div>, <p>,<span> ist style ein gutes Mittel, um einzelne Formatierungen durchzuführen.

Nehmen wir an, Sie wollen die einzelnen Zeilen auf Ihrer Seite unterschiedlich färben. Dann müssen Sie immer abwechselnd bei jeder Zeile beim p-Tag einen unterschiedlichen Style angeben. Nun, übersichtlich wird das wohl nicht werden. Außderdem ist es viel Schreibarbeit.

Wäre es nicht besser, man könnte für die einzelnen Zeilen einmal sagen: „Du gerade Zeile, schreibst dich in grün, und du ungerade in blau?“ Um solche feststehenden Formatierungen zu definieren gibt es das Attribut class=“name“.

Alle Zeilen, die grün zu schreiben sind, haben die class=“gruen“ und die anderen class=“blau“.  Und genau sowas kann man mit CSS definieren.

<p class=“blau“>adkasldkasldkaldkalskd</p>

<p class=“gruen“>adkasldkasldkaldkalskd</p>

Aber mit der Definition alleine ist es nicht getan. Wo soll man das denn dann auf der Seite hinstellen ? Die Definition ist ja CSS und nicht HTML

Bevor wir zur eigentlichen Definition kommen, zu nächst zum Platz auf der Seite, wo man diese CSS-Definitionen hinstellen kann, und da gibt es mehrere  Arten:

  1. Interne Einbindung
  2. Externe Einbindung

1. Man kann CSS-Vereinbarungen im HTML-Code ablegen (also Interne Einbindung) und zwar am Besten in den Header der Seite also zwischen <head > und </head>

Die Struktur der Seite sieht dann etwa so aus:

<DOCTYPE…….>
<html>
<head>
<title>..</title>
<style type=“text/css“>
………. Definitionen
</style>
</head>
<body>
</body>

Mit <style> wird CSS eingeleitet. Dieser Tag kann auch innerhalb von <body>..</body> stehen.

Sie sollten diesen ersten Teil der Einbindung immer dann benutzen, wenn Sie für eine spezielle Seite Formatierungen wünschen, die aber auch nur auf dieser Seite verwendet werden. Zusätzlich können Sie auch immer das style-Attribut im Tag verwenden. Über die Prioritäten, wann was zum Tragen kommt, werden wir später noch sehen.

2.) Externe Anbindung.

Für Seiten, die immer den gleichen Aufbau und die gleichen Formatierungsarten (Klassen) haben, wäre es besser für die Wartbarkeit der Seite, wenn man derartige CSS-Anweisungen nur einmal hätte. Mit der externen Anbindung, erstellen Sie eine Datei (meist mit der Endung .css) und die binden Sie in alle Ihre Seiten ein. Wie?

Im Header der Seite können Sie folgenden Link einbauen:

<link rel=“stylesheet“ type=“text/css“ href=“pfad/zum/stylesheet“ />

Alle CSS-Anweiungen stehen dann in der Datei „pfad/zum/stylesheet“. Achten Sie mal darauf, indem Sie sich den Quellcode einiger Seiten anschauen, dass viele Seiten solche Einträge haben.

So jetzt wissen wir, wie wir ein Stylesheet einbinden. Aber wie sieht so ein Stylesheet aus?

CSS hat eine eigene Syntax, die zwar leicht zu schreiben ist, doch die Semantik (Bedeutung) der Sprache ist nicht ganz einfach und füllt Bücher.

Gehen wir auf einige Sprachelemente ein. Man spricht bei CSS von Regeln:

  1. Kommentar:   /*..hier stehen Kommentare….*/
  2. Regel:          SELECTOR  { DEKLARATIONEN  }

Tja das ist schon alles, leicht oder? Nun im Detail liegt die Würze!

Machen wir ein Beispiel:

Eine Regel könnte lauten:

p {color:#00ff00; font-size:15pt}

Das bedeutet: Der Selector ist p, was soviel heißt wie: Er gilt für alle <p>-Tags in unserer Seite.

Es folgt immer in geschweiften Klammern eingefaßt die sog. Deklarationen, die untereinander mit „;“ getrennt werden.

(Im Beispiel werden also alle Absätze unserer Seite mit der Farbe grün und der Schriftgröße 15pt angezeigt).

Das ist zwar ganz nett, aber wir wollten ja eine Unterscheidung der Zeilen in obigen Beispiel. Dafür müssen wir den Selector verändern.  Wir können eine Klasse definieren, indem wir .klassennamen als Selector schreiben.

.gruen {color:#00ff00; font-size:15pt}

Nun haben wir eine Klasse gruen definiert. Bitte verwenden Sie hier keine Umlaute, denn es könnten einige Browser nicht verstehen! Tja dann brauchen wir noch die Klasse blau! Also

.blau {color:#0000ff; font-size:15pt}

Jetzt würden obige farbigen Zeilen funktionieren.

Fassen wir also zusammen:

Wir bauen eine Datei mit dem Namen style.css mit folgendem Inhalt

.gruen {color:#00ff00; font-size:15pt}
.blau {color:#0000ff; font-size:15pt}

Dann gehen wir in unsere HTML-Datei und schreiben in den Header:

Das Ergebnis:

Ist doch viel übersichtlicher als vorherigen Anweisungen mit den <p style=“…“>, oder

Sie können in den meisten Composern wie z.B. NVU derartige Stylesheets einbinden. Es macht das Leben einfacher.

In den weiteren Beiträgen zum CSS werde ich Ihnen dann zeigen, was es mit der sonstigen Syntax von CSS auf sich hat.

Bis dann und viel Erfolg beim Probieren

Bernd Klüppelberg

Link zum Download des Beispiels Beispiel 1

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar