JavaScript - Schritt für Schritt

307

Kapitel 15

JavaScript und CSS

In diesem Kapitel:

Was ist CSS? 308

Die Beziehung zwischen JavaScript und CSS 311

Übungen 320

308

Kapitel 15: JavaScript und CSS

Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:



die Grundlagen von Cascading Style Sheets (CSS) zu verstehen



die Beziehung zwischen JavaScript und CSS zu verstehen



mit JavaScript das Format eines einzelnen Elements zu ändern



mit JavaScript das Format einer Gruppe von Elementen zu ändern



mit JavaScript visuelles Feedback auf einem Webformular mithilfe von CSS zu realisieren

Was ist CSS?

Mithilfe von CSS können Sie das Erscheinungsbild einer Webseite spezifizieren: Auf die Elemente einer

Seite lassen sich Farben, Schriften und Layout anwenden.

Abbildung 15.1 zeigt eine einfache Webseite, die recht langweilig aussieht – zumindest gilt das für das

Layout.

Abbildung 15.1 Eine einfache Webseite, bei der

keine Formate angewandt wurden

CSS bietet die Möglichkeit, Formatierungen (Stile) anzuwenden, die das Aussehen der Seite in Abbildung

15.1 verbessern, ohne den Inhalt der Seite zu verändern, indem Sie zum Beispiel die Schrift für die Über-

schrift anpassen und einen bestimmten Abschnitt der Seite durch fette Textauszeichnung hervorheben, wie

es Abbildung 15.2 zeigt.

Was ist CSS?

309

Abbildung 15.2 Dieselbe Webseite wie in

Abbildung 15.1, auf die CSS-Formate angewandt

wurden

Eigenschaften und Selektoren verwenden

In der Grundstruktur von CSS wird eine Eigenschaft mit einem nachfolgenden Doppelpunkt und daran

anschließend dem Wert der Eigenschaft aufgelistet. Zum Beispiel:

property: value

Die Formateigenschaft (style) ist eine der vielen unterschiedlichen Eigenschaften, die Sie festlegen können.

Zum Beispiel ist in Abbildung 15.2 die Formateigenschaft font-weight dafür verantwortlich, dass die Schrift

in der zweiten Zeile fett erscheint. Eine vollständige Liste der Eigenschaften und ihrer zulässigen Werte

finden Sie auf der W3C-Website unter http://www.w3.org/TR/CSS21/propidx.html.

Anwenden können Sie CSS-Formateigenschaften auf eine Gruppe von Dokumentelementen basierend auf

dem Elementtyp (<p>, <h1>, <a> usw.) oder einzelne Elemente, indem Sie die class- oder id-Attributwerte

des Elements festlegen. Insgesamt bezeichnet man die Gruppierungen als Selektoren.

Ein Selektor teilt CSS mit, auf welches Element oder welche Elemente die festgelegten Eigenschaften und

Werte angewandt werden sollen. CSS-Anweisungen mit einem Selektor haben folgende Grundstruktur:

selector { property: value; }

Zum Beispiel können Sie mit folgendem Code (den Sie auch in der Begleitdatei ex1.css finden) die Schrift

Arial allen <h1>-Elementen innerhalb des Dokuments zuweisen:

h1 { font-family: arial; }

Obwohl die Anwendung eines Formats auf einen ganzen Elementtyp oftmals nützlich ist, kommen Sie auch

in Situationen, in denen Sie das Format auf einige Elemente eines bestimmten Typs, jedoch nicht auf andere

anwenden oder Elemente desselben Typs in unterschiedlicher Weise formatieren möchten. Diese eher

gezielte Formatierung realisieren Sie mit den class- oder id-Attributen eines Elements. Mit diesen Attributen

lässt sich die Anzeige beliebiger Elemente im Dokument feinstufig steuern. Zum Beispiel könnte das Doku-

ment viele <p>-Elemente enthalten, doch Sie möchten nur bestimmte <p>-Elemente mit Fettschrift verse-