033.1 Lektion 1

Der einfachste Weg, den Stil eines bestimmten Elements zu ändern, besteht darin, ihn mit dem Attribut style direkt in das Element-Tag zu schreiben. Alle sichtbaren HTML-Elemente erlauben ein style-Attribut, dessen Wert eine oder mehrere CSS-Regeln sein können, auch bekannt als Eigenschaften oder Properties. Beginnen wir mit einem einfachen Beispiel, einem Absatzelement:

Die grundlegende Syntax einer benutzerdefinierten CSS-Eigenschaft lautet Eigenschaft: Wert, wobei Eigenschaft der bestimmte Aspekt ist, den Sie in dem Element ändern möchten, und Wert den Ersatz für die vom Browser vorgenommene Standardoption definiert. Einige Eigenschaften gelten für alle Elemente, andere Eigenschaften nur für bestimmte Elemente. Ebenso gibt es für jede Eigenschaft passende Werte, die zu verwenden sind.

Um die Farbe unseres einfachen Absatzes zu ändern, verwenden wir zum Beispiel die Eigenschaft color. Die Eigenschaft color bezieht sich auf die Vordergrundfarbe, d.h. die Farbe der Buchstaben des Absatzes. Die Farbe selbst steht im Werteteil der Regel und kann in vielen verschiedenen Formaten angegeben werden, einschließlich einfacher Namen wie red, green, blue, yellow usw. Um also die Schrift des Absatzes lila zu färben, fügen Sie die angepasste Eigenschaft color: purple zum Attribut style des Elements hinzu:

Andere benutzerdefinierte Eigenschaften können in der gleichen Eigenschaft style enthalten sein, müssen aber jeweils durch Semikolon getrennt werden. Um etwa auch die Schrift zu vergrößern, fügen Sie font-size: larger zur Eigenschaft style hinzu:

Um das Ergebnis dieser Änderungen zu sehen, speichern Sie den folgenden HTML-Code in einer Datei und öffnen Sie diese dann in einem Webbrowser (Figure 1):

Stellen Sie sich jedes Element auf der Seite als ein Rechteck oder einen Kasten vor, dessen geometrische Eigenschaften und Gestaltung Sie mit CSS manipulieren. Der Rendering-Mechanismus verwendet zwei Standardkonzepte für die Platzierung von Elementen: Block-Platzierung und Inline-Platzierung. Block-Elemente nehmen den gesamten horizontalen Platz ihres übergeordneten Elements ein und werden von oben nach unten gesetzt. Ihre Höhe (ihre vertikale Dimension, nicht zu verwechseln mit ihrer Top-Position auf der Seite) hängt im Allgemeinen von der Menge ihres Inhalts ab. Inline-Elemente folgen der Links-nach-Rechts-Methode, ähnlich wie in westlichen Schriftsprachen: Elemente werden horizontal von links nach rechts platziert, bis auf der rechten Seite kein Platz mehr ist, woraufhin das Element in einer neuen Zeile direkt unter der aktuellen Zeile fortgesetzt wird. Elemente wie p, div und section werden standardmäßig als Blöcke platziert, während Elemente wie span, em, a und einzelne Buchstaben inline platziert werden. Diese grundlegenden Platzierungsmethoden können Sie über CSS-Regeln grundlegend ändern.

Das Rechteck, das dem Element p im Body des HTML-Beispiels entspricht, wird sichtbar, wenn Sie die Eigenschaft background-color zur Regel hinzufügen (Figure 2):

Wenn Sie dem Attribut style neue benutzerdefinierte CSS-Eigenschaften hinzufügen, werden Sie feststellen, dass der Code insgesamt unübersichtlich wird. Zu viele CSS-Regeln im style-Attribut weichen die Trennung von Struktur (HTML) und Darstellung (CSS) auf. Außerdem nutzen verschiedene Elemente dieselben Stile, und es ist nicht ratsam, sie in jedem Element zu wiederholen.

Statt die Elemente direkt in ihren style-Attributen anzupassen, ist es viel praktischer, dem Browser sämtliche Elemente zu nennen, für die ein benutzerdefinierter Stil gilt. Das geschieht über einen sogenannten Selektor, den wir den benutzerdefinierten Eigenschaften hinzufügen. Er gleicht Elemente nach Typ, Klasse, ID, relativer Position usw. ab. Die Kombination aus einem Selektor und Eigenschaften — auch als Deklarationen bezeichnet — nennt man CSS-Regel. Die grundlegende Syntax einer CSS-Regel lautet Selektor { Eigenschaft: Wert }. Wie beim Attribut style können durch Semikolon getrennte Eigenschaften gruppiert werden, wie in p { color: purple; font-size: larger }. Diese Regel passt zu jedem p-Element auf der Seite und wendet die angepassten Eigenschaften color und font-size an.

Eine CSS-Regel für ein übergeordnetes Element wird automatisch auf alle seine untergeordneten Elemente angewendet. Das bedeutet, dass wir die benutzerdefinierten Eigenschaften auf den gesamten Text der Seite anwenden können, unabhängig davon, ob er sich innerhalb oder außerhalb eines <p>-Tags befindet, indem wir stattdessen den Selektor body verwenden: body { color: purple; font-size: larger }. Diese Strategie erspart es uns, dieselbe Regel für alle Kinder zu schreiben, wobei es notwendig sein kann, zusätzliche Regeln zu schreiben, um die geerbten Regeln zu ändern oder zu “ignorieren”.

Mit dem <style>-Tag schreiben wir CSS-Regeln innerhalb der HTML-Seite, die wir gestalten. Es ermöglicht es dem Browser, den CSS-Code vom HTML-Code zu unterscheiden. Das <style>-Tag steht im head-Abschnitt des Dokuments:

Das type-Attribut teilt dem Browser mit, welche Art von Inhalt sich innerhalb des <style>-Tags befindet, d.h. den MIME-Typ. Da jeder Browser, der CSS unterstützt, davon ausgeht, dass der Typ des <style>-Tags standardmäßig text/css ist, ist die Angabe des Attributs type optional. Es gibt auch ein media-Attribut, das das Medium angibt — z.B. Bildschirm oder Ausdruck — für das die CSS-Regeln im <style>-Tag gelten. Standardmäßig gelten die CSS-Regeln für jedes Medium, auf dem das Dokument dargestellt wird.

Wie im HTML-Code ändern Zeilenumbrüche und Einrückungen nichts daran, wie der Browser die CSS-Regeln interpretiert:

liefert dasselbe Ergebnis wie:

Die zusätzlichen Bytes, die durch die Leerzeichen und Zeilenumbrüche anfallen, machen nur einen geringen Unterschied in der Dokumentgröße und haben keine nennenswerten Auswirkungen auf die Ladezeit der Seite, so dass die Wahl des Layouts eine Frage des Geschmacks ist. Beachten Sie das Semikolon nach der letzten Deklaration (font-size: larger;) der CSS-Regel. Dieses Semikolon ist nicht zwingend erforderlich, aber es erleichtert das Hinzufügen einer weiteren Deklaration in der nächsten Zeile, ohne dass man sich Gedanken über fehlende Semikola machen muss.

Die Deklarationen in separaten Zeilen machen es einfacher, einzelne Deklarationen auszukommentieren. Um eine Deklaration zum Beispiel zur Fehlersuche vorübergehend zu deaktivieren, schließen Sie die entsprechende Zeile mit /* und */ ein:

oder:

So geschrieben, ignoriert der Browser die Deklaration font-size: larger. Achten Sie darauf, die Kommentare richtig zu öffnen und zu schließen, da der Browser die Regeln sonst möglicherweise nicht interpretieren kann.

Kommentare sind auch nützlich, um die Regeln zu erläutern:

Zusätze wie in diesem Beispiel sind in Stylesheets mit wenigen Regeln entbehrlich, aber sie sind unerlässlich, um über Stylesheets mit Hunderten (oder mehr) Regeln den Überblick zu behalten.

Obwohl das style-Attribut und das <style>-Tag für das Testen benutzerdefinierter Stile geeignet und in bestimmten Situationen nützlich sind, werden sie nicht häufig verwendet. Stattdessen werden die CSS-Regeln üblicherweise in einer separaten Datei gespeichert, auf die im HTML-Dokument verwiesen wird.

Die bevorzugte Methode, CSS-Definitionen mit einem HTML-Dokument zu verknüpfen, besteht darin, das CSS in einer separaten Datei zu speichern. Diese Methode bietet zwei wesentliche Vorteile gegenüber den vorherigen Methoden:

CSS-Dateien haben die Endung .css und lassen sich wie HTML-Dateien mit einem beliebigen Texteditor bearbeiten. Im Gegensatz zu HTML-Dateien haben CSS-Dateien keine Struktur auf oberster Ebene mit hierarchischen Tags wie <head> oder <body>. Vielmehr ist die CSS-Datei nur eine Liste von Regeln, die der Browser in einer bestimmten Reihenfolge abarbeitet. Die gleichen Regeln, die in einem <style>-Tag stehen, könnten auch in einer CSS-Datei stehen.

Die Verbindung zwischen dem HTML-Dokument und den in einer Datei gespeicherten CSS-Regeln wird nur im HTML-Dokument definiert. Für die CSS-Datei spielt es keine Rolle, ob es Elemente gibt, die ihren Regeln entsprechen, so dass es nicht notwendig ist, in der CSS-Datei die HTML-Dokumente aufzuzählen, mit denen sie verknüpft ist. Auf der HTML-Seite wird jedes verknüpfte Stylesheet auf das Dokument so angewandt, als wären die Regeln in einem <style>-Tag enthalten.

Das HTML-Tag <link> definiert ein externes Stylesheet, das im aktuellen Dokument verwendet werden soll. Es sollte im head-Abschnitt des HTML-Dokuments stehen:

Jetzt können Sie die zuvor verwendete Regel für das Element p in die Datei style.css einfügen. Die Ergebnisse, die der Besucher der Webseite sieht, werden die gleichen sein. Wenn sich die CSS-Datei nicht im selben Verzeichnis wie das HTML-Dokument befindet, geben Sie ihren relativen oder vollständigen Pfad im Attribut href an. Das <link>-Tag kann auf verschiedene Arten von externen Ressourcen verweisen, so dass klar sein muss, welche Beziehung die externe Ressource zum aktuellen Dokument hat. Für externe CSS-Dateien wird die Beziehung in rel="stylesheet" definiert.

Das Attribut media nutzen Sie auf die gleiche Weise wie das <style>-Tag: Es gibt das Medium an, auf das die Regeln in der externen Datei angewendet werden sollen, z.B. Computerbildschirm oder Druckausgabe.

CSS kann ein Element vollständig verändern, aber es ist trotzdem wichtig, das richtige Element für die Komponenten der Seite zu verwenden. Andernfalls können unterstützende Technologien wie Screenreader die richtigen Abschnitte der Seite möglicherweise nicht erkennen.