CSS-Regeln definieren die Formatierung für eine bestimmte Klasse oder definieren die Formatierung eines bestimmten HTML-Tags (p, body, h1 usw.) neu.
Sie können neue CSS-Regeln erstellen, um die Formatierung von HTML-Tags oder Textobjekten mit bestimmten Klassenattributen zu automatisieren. Beim Hinzufügen einer neuen CSS-Regel müssen Sie entscheiden, ob Sie eine benutzerdefinierte Formatvorlage erstellen oder ein bestehendes HTML-Tag neu definieren möchten. Wenn Sie eine neue benutzerdefinierte Formatvorlage erstellen, erscheint die CSS-Regel in der Seiten-Ansicht auf der Eigenschaftenfenster in der Dropdown-Liste „Benutzerdefinierte Formatvorlage" und kann in der Seiten-Ansicht auf jedes Objekt angewendet werden. Die neue CSS-Regel erscheint außerdem in der Selektoren-Ansicht in der Spalte „Selektoren" und ihr Inhalt wird in der CSS-Code-Ansicht angezeigt (außer bei site-spezifischen CSS-Regeln).
Eine neue CSS-Regel kann den folgenden Elementen hinzugefügt werden:
Dem Ordner „Aktive SiteStyles" im Styles-Explorer (in der Seiten-Ansicht oder Design-Ansicht): Die CSS-Regel ist dann für die ganze Site verfügbar, egal welcher SiteStyle verwendet wird (NetObjects Fusion erzeugt die Datei „Site.css", die alle CSS-Regeln enthält).
Einem SiteStyle: Die CSS-Regel ist dann für diesen SiteStyle verfügbar und wird in die Datei „Styles.css" für diesen SiteStyle aufgenommen.
Einer CSS-Datei: Die CSS-Regel ist dann nur in dieser CSS-Datei verfügbar.
So fügen Sie eine CSS-Regel zum Ordner „Aktive SiteStyles" hinzu:
Klicken Sie im Styles-Explorer mit der rechten Maustaste auf den Ordner „Aktive SiteStyles".
Klicken Sie im Kontextmenü auf „CSS-Regel hinzufügen". Das Dialogfeld „CSS-Regel hinzufügen" wird angezeigt.
Wählen Sie eine von zwei möglichen Optionen in der Dropdown-Liste „Typ":
- Um eine neue benutzerdefinierte Formatvorlage zu erstellen, die als Klassenattribut auf ein Objekt angewandt werden kann, wählen Sie „Style mit eigenem Namen" und geben Sie im Feld „Name" einen Namen ein.
- Um die Formatierung eines bestehenden HTML-Tags neu zu definieren, wählen Sie „HTML-Tag neu definieren" und wählen Sie in der Dropdown-Liste „Name" ein HTML-Tag aus.
Zur erweiterten Formatierungsdefinition klicken Sie auf die Schaltfläche „Aufbau" und verwenden Sie die Optionen im Dropdown-Menü:
ID (#): zuerst ein Rautenzeichen (#), dann der ID-Name und die Deklaration. Mit dem ID-Selektor identifizieren Sie ein Element als „eindeutige Instanz" in einem Dokument. Sie weisen diesem Element einen Namen zu, der in einem Dokument nur einmal verwendet werden kann. Die CSS-Regel mit dem ID-Selektor kann nur auf ein einziges Element angewandt werden.
Klasse (.): zuerst ein Punkt, dann der Klassenname und die Deklaration. Sie können eine Klasse in einem Dokument oder auf einer Seite auf alle Elemente mehrfach anwenden. Mit Klassen können Sie HTML-Tags neu definieren.
Pseudoklassen bieten die Möglichkeit, die Darstellung der Links auf einer Seite auf Basis von Interaktionen des Besuchers zu ändern. Die folgenden Optionen sind verfügbar:
- :first-child. Weist dem ersten Kindelement eines anderen Elements eine Formatierung zu.
- :link. Weist noch nicht besuchten Links eine Formatierung zu.
- :visited. Weist bereits besuchten Links eine Formatierung zu.
- :hover. Weist Elementen eine Formatierung zu, wenn sich der Mauszeiger darüber befindet.
- :active. Weist aktivierten Elementen eine Formatierung zu.
- :focus. Weist Elementen eine Formatierung zu, wenn sie den Fokus haben.
- :lang. Ermöglicht es, die für ein Element zu verwendende Sprache festzulegen.
Pseudoelemente bieten die Möglichkeit, einen Teil eines Elements anzusprechen. (Zum Beispiel nur die erste Zeile eines Absatzes, sodass immer die erste Zeile die gewünschte Formatierung erhält, auch wenn der Besucher die Größe des Fensters ändert.) Die folgenden Optionen sind verfügbar:
- :first-line. Weist der ersten Textzeile eines Elements eine Formatierung zu.
- :first-letter. Weist dem ersten Buchstaben des Texts eine Formatierung zu.
- :before. Fügt Inhalt vor einem Element ein.
- :after. Fügt Inhalt nach einem Element ein.
Neue Gruppe (,): Erstellt eine neue Gruppe von Selektoren. So können Sie sicherstellen, dass Elemente, die die gleichen Eigenschaften besitzen sollen, dies auch wirklich tun. Dies verringert die Wahrscheinlichkeit, dass falsche Eigenschaften oder Werte zugewiesen werden. Sie können beliebig viele Selektoren durch Kommas getrennt in einer Gruppe zusammenfassen.
Universalselektor (*): Wählt alle Tag- oder Elementtypen aus.
Nachfahrenselektor (Leerzeichen): Ermöglicht die Feinabstimmung der Darstellung einer Seite. Der Selektor kann zum Beispiel verwendet werden, wenn Sie einem Element, das in einem anderen Element enthalten ist, eine besondere Formatierung zuweisen möchten. Er weist die Formatierung jedem Element zu, das in Element X enthalten bzw. ein Nachfahre von Element X ist. Syntax: Eine Liste anderer Selektoren, durch Leerzeichen getrennt.
Kindselektor (>): Ermöglicht eine zielgenauere Auswahl von Elementen als der Nachfahrenselektor. Dieser Selektor weist allen Kindelementen eines anderen Elements eine Formatierung zu. Syntax: Zuerst das Elternelement, dann das Zeichen „>", dann das Kindelement.
Geschwisterselektor (+): Eine Liste von Elementen, die im Quellcode aufeinander folgen müssen. Die Elemente werden durch das Zeichen „+" getrennt.
Tag-Attribut ([name="wert"]): Eine komplexere Version des Klassen- und ID-Selektors. Dieser Selektor weist allen Elementen mit einem bestimmten Attribut eine Formatierung zu. Er besteht aus zwei Teilen: einem Selektor, der ein Element identifiziert, und einer Bedingung für die Attribute des Elements.
Klicken Sie auf „OK".
Die hinzugefügte CSS-Regel wird in der Selektoren- und CSS-Code-Ansicht angezeigt.
Die neue CSS-Regel ist jetzt in der Selektoren- und CSS-Code-Ansicht verfügbar. Außerdem kann die Regel im Dialogfeld „Formatvorlagen verwalten" bearbeitet oder über die Dropdown-Liste „Benutzerdefinierte Formatvorlage" im Fenster „Objekt-Eigenschaften" auf ein Objekt angewendet werden.