Grundlegendes zu Cascading Style Sheets
Cascading Style Sheets (CSS) sind eine Reihe von Formatierungsregeln, die das Erscheinungsbild von Webseiteninhalten steuern. Wenn Sie CSS zum Formatieren einer Seite verwenden, trennen Sie den Inhalt von der Präsentation. Der Inhalt der Seite (d. h. der HTML-Code) befindet sich in der HTML-Datei selbst, während sich die CSS-Regeln, die die Darstellung des Codes definieren, in einer anderen Datei (einem externen Stylesheet) oder in einem anderen Teil des HTML-Dokuments befinden ( normalerweise der Dateiheader). Die Verwendung von CSS bietet Ihnen große Flexibilität und eine bessere Kontrolle über das genaue Erscheinungsbild Ihrer Seite, von der präzisen Layoutpositionierung bis hin zu bestimmten Schriftarten und Stilen.
Mit CSS können Sie viele Eigenschaften steuern, die HTML allein nicht steuern kann. Beispielsweise können Sie für den ausgewählten Text unterschiedliche Schriftgrößen und Einheiten (Pixel, Punktgrößen usw.) festlegen. Durch die Verwendung von CSS zum Festlegen von Schriftgrößen in Pixeln stellen Sie außerdem einen konsistenteren Ansatz für das Seitenlayout und das Erscheinungsbild in mehreren Browsern sicher.
Zusätzlich zum Formatieren von Text können Sie CSS verwenden, um die Formatierung und Positionierung von Elementen auf Blockebene auf einer Webseite zu steuern. Sie können beispielsweise Ränder und Ränder für Elemente auf Blockebene festlegen, Text um anderen Text herum schweben lassen und vieles mehr.
CSS-Formatierungsregeln bestehen aus zwei Teilen: Selektoren und Deklarationen. Ein Selektor ist ein Begriff, der ein Formatelement identifiziert (z. B. P, H1, Klassenname oder ID), und die Deklaration wird verwendet, um den Stil des Elements zu definieren. Im folgenden Beispiel ist H1 der Selektor und alles zwischen Klammern ({}) ist eine Deklaration:
H1 {
Schriftgröße: 16 Pixel;
Schriftfamilie:Helvetica;
Schriftstärke:bold
}
Eine Deklaration besteht aus zwei Teilen: Eigenschaften (z. B. Schriftfamilie) und Werten (z. B. Helvetica). Die obige CSS-Regel erstellt einen bestimmten Stil für H1-Tags: Der Text aller mit diesem Stil verknüpften H1-Tags hat eine Größe von 16 Pixel, die Schriftart Helvetica und ist fett.
Der Begriff Kaskadierung bezieht sich auf die Möglichkeit, mehrere Stile auf dasselbe Element anzuwenden. Sie können beispielsweise eine CSS-Regel zum Anwenden von Farben und eine andere CSS-Regel zum Anwenden von Rändern erstellen und dann beide auf denselben Text auf der Seite anwenden. Die definierten Stile „kaskadieren“ bis zu den Elementen auf Ihrer Webseite und erzeugen letztendlich das gewünschte Design.
Der Hauptvorteil von CSS besteht darin, dass es praktische Aktualisierungsfunktionen bietet. Wenn Sie eine CSS-Regel an einer Stelle aktualisieren, wird die Formatierung aller Dokumente, die diesen definierten Stil verwenden, automatisch auf den neuen Stil aktualisiert.
Die folgenden Stiltypen können in Dreamweaver definiert werden:
Mit benutzerdefinierten CSS-Regeln (auch Klassenstile genannt) können Sie Stileigenschaften auf jeden Textbereich oder Textblock anwenden. (Siehe Anwenden von Klassenstilen.)
HTML-Tag-Stile definieren die Formatierung bestimmter Tags (z. B. h1) neu. Wenn Sie den CSS-Stil eines h1-Tags erstellen oder ändern, wird der gesamte mit dem h1-Tag formatierte Text sofort aktualisiert.
CSS-Selektorstile (erweiterte Stile) definieren die Formatierung für bestimmte Kombinationen von Elementen oder für andere Selektorformen, die CSS zulässt, neu (z. B. wenden Sie den Selektor td h2 an, wenn ein h2-Header in einer Tabellenzelle erscheint). Erweiterte Stile können auch die Formatierung von Tags neu definieren, die ein bestimmtes ID-Attribut enthalten (z. B. kann ein durch #myStyle definierter Stil auf alle Tags angewendet werden, die das Attributwertpaar id="myStyle" enthalten).
CSS-Regeln können sich an den folgenden Orten befinden:
Ein externes CSS-Stylesheet ist eine Reihe von CSS-Regeln, die in einer separaten externen CSS-Datei (.css) (keine HTML-Datei) gespeichert sind. Das Dokument ist über Links im Kopfteil der Dokumentdatei mit einer oder mehreren Seiten der Website verknüpft.
Ein internes (oder eingebettetes) CSS-Stylesheet ist eine Reihe von CSS-Regeln, die im Style-Tag im Header eines HTML-Dokuments enthalten sind.
Inline-Stile werden im gesamten HTML-Dokument in einer bestimmten Instanz eines Tags definiert.
Dreamweaver erkennt in vorhandenen Dokumenten definierte Stile, sofern sie den CSS-Stilrichtlinien entsprechen.
Tipp
Um das in Dreamweaver enthaltene O'Reilly CSS-Referenzhandbuch anzuzeigen, wählen Sie „Hilfe“ > „Referenz“ und anschließend im Popup-Menü im Referenzfenster die Option „O'Reilly CSS-Referenz“.
Eine manuell festgelegte HTML-Formatierung überschreibt die über CSS angewendete Formatierung. Damit CSS-Regeln die Absatzformatierung steuern können, müssen alle manuell festgelegten HTML-Formatierungen entfernt werden.
Dreamweaver rendert die meisten Stileigenschaften, die Sie direkt im Dokumentfenster anwenden. Sie können das Dokument auch in einem Browserfenster in der Vorschau anzeigen, um zu sehen, wie die Stile angewendet werden. Einige CSS-Stileigenschaften werden in Microsoft Internet Explorer, Netscape Navigator, Opera und Apple Safari anders angezeigt und einige werden derzeit von keinem Browser unterstützt.