Globale Stile
Globale Stile werden im Fenster "Globale Stile" für das gesamte SPS-Design definiert und im Fenster "Globale Stile" unter dem Eintrag "Global" aufgelistet. Sie werden an die Authentic-Ansicht und das HTML-Ausgabedokument als CSS-Regeln übergeben. Im HTML-Dokument werden diese CSS-Regeln in das Element /html/head/style geschrieben.
Im Fenster 'Globale Stile" ist ein globaler Stil eine einzige CSS-Regel, die aus einem Selektor und CSS-Eigenschaften für diesen Selektor besteht. Die Erstellung eines globalen Stils erfolgt daher in zwei Schritten:
•Hinzufügen eines neuen Stils und Deklarieren des CSS-Selektors dafür
•Definieren der CSS-Eigenschaften für den Selektor
Unterstützte Selektoren
Die folgenden Selektoren werden unterstützt:
•Universaler Selektor: wird als * angegeben
•Typ-Selektoren: Elementnamen, wie z.B. h1
•Attribut-Selektoren: z.B. [class=maindoc]
•Klassen-Selektoren: z.B. .maindoc
•ID-Selektoren: z.B. #header
Hinzufügen eines globalen Stils
Um einen globalen Stil zum SPS-Design hinzuzufügen, gehen Sie folgendermaßen vor:
1.Wählen Sie in der Design-Ansicht im Fenster "Globale Stile" den Eintrag "Global" aus (Abbildung unten).
| 2. | Klicken Sie links oben in der Symbolleiste des Fensters "Globale Stile" auf die Schaltfläche Hinzufügen (siehe Abbildung oben). Daraufhin wird unter dem Eintrag "Global" ein globaler Stil mit einem * Selektor eingefügt (der Selektor wählt alle HTML-Elemente aus); der Stern-Selektor ist der Standardselektor für alle neu eingefügten globalen Stile. |
| 3. | Um den Selektor vom Standardselektor zu ändern, doppelklicken Sie auf den Selektor und bearbeiten Sie ihn. |
| 4. | Definieren Sie nun die CSS-Eigenschaftswerte für den Selektor. Eine Anleitung dazu finden Sie im Abschnitt Definieren von Stilwerten. |
| 5. | Um einen weiteren globalen Stil hinzuzufügen, wiederholen Sie die Schritte 1 bis 4. Der neue globale Stil wird in der Baumstruktur unter dem Eintrag "Global" unterhalb aller zuvor hinzugefügten globalen Stile hinzugefügt. |
Anmerkung:
•Sie können globale Stile unter dem Eintrag "Global" auch durch Klicken auf die Einfügen-Schaltfläche im Fenster "Globale Stile" vor einem ausgewählten globalen Stil einfügen. Die Schaltflächen Hinzufügen und Einfügen stehen auch über das Kontextmenü zur Verfügung, das aufgerufen wird, wenn Sie mit der rechten Maustaste auf einen globalen Stil klicken.
•Ein globaler Stil mit einem Selektor, der ein HTML-Element ist, kann durch Rechtsklick auf einen Eintrag unter "Global" und Auswählen von Selektor hinzufügen | HTML | HTMLElementName hinzugefügt werden.
Bearbeiten und Löschen von globalen Stilen
Sowohl der Stilselektor als auch seine Eigenschaften können im Fenster "Globale Stile" bearbeitet werden.
•Um einen Selektor zu bearbeiten, doppelklicken Sie auf den Selektornamen, platzieren Sie den Cursor in das Textfeld und bearbeiten Sie ihn.
•Informationen zum Definieren und Bearbeiten der Eigenschaftswerte eines Stils finden Sie unter Definieren von Stilwerten. (Die Stileigenschaften können in drei möglichen Ansichten angezeigt werden. Diese Ansichten, bzw. wie man zwischen diesen wechselt, sind im Abschnitt Ansichten von Eigenschaftsdefinitionen näher beschrieben.)
Um einen globalen Stil zu löschen, wählen Sie den Stil aus und klicken Sie in der Symbolleiste der globalen Stile auf Zurücksetzen.
Ändern der Priorität von globalen Stilen
Globale Stile, die im Fenster "Globale Stile" zugewiesen werden, werden als CSS-Regeln in das Element /html/head/style platziert. In der HTML-Datei würden Sie ungefähr folgendermaßen aussehen:
<html>
<head>
<style>
<!--
h1 { color:blue;
font-size:16pt;
}
h2 { color:blue;
font-size:14pt;
}
.red { color:red;}
.green { color:green;}
.green { color:lime;}
-->
</style>
</head>
<body/>
</html>
Die Reihenfolge, in der die globalen Stile in der Authentic-Ansicht und im HTML-Dokument aufgelistet sind, entspricht der Reihenfolge, in der sie im Fenster "Globale Stile" unter "Global" aufgelistet sind. Die Reihenfolge in der Authentic-Ansicht und im HTML-Dokument ist von Bedeutung. Wenn von zwei Selektoren derselbe Node ausgewählt wird, so hat derjenige Selektor, der weiter unten in der Liste der globalen Stile aufgelistet ist, Vorrang. Angenommen Sie haben ein HTML-Dokument mit der oben gezeigten Liste. Gäbe es darin ein Element <h1 class="green">, so würden diesem Element drei globale Stile entsprechen: der Stil mit dem Selektor h1 und die beiden Selektoren für die Klasse .green. Es wird die Farbeigenschaft des .green-Selektors mit der Farbe lime verwendet, weil dieser nach dem .green-Selektor mit der Farbe green aufgelistet ist und daher Vorrang vor dem Selektor h1 hat. (Klassenselektoren haben immer Vorrang vor Node-Selektoren, daher haben beide .green-Selektoren Vorrang vor dem h1-Selektor, unabhängig von ihrer jeweiligen Position im Verhältnis zum h1-Selektor.) Auf das <h1>-Element wird jedoch die Schriftgröße des h1-Stils angewendet, weil es keinen Selektor mit einer höheren Priorität gibt, der für das <h1>-Element definiert ist und für den eine Schriftgröße definiert wurde.
Um die Priorität eines globalen Stils zu ändern, wählen Sie den Stil aus und verschieben Sie den globalen Stil in der Struktur der globalen Stile mit Hilfe der Schaltflächen Nach oben und Nach unten. Wenn Sie z.B. den globalen Stil .green an eine Stelle vor den globalen Stil .red verschieben, hätte die Farbeigenschaft des Stils .red Vorrang vor der des Stils .green.
Beachten Sie, dass Klassenselektoren immer Vorrang vor Typselektoren haben. Wenn Sie z.B. die Reihenfolge der Selektoren in .red. .green h1 h2 ändern würden, wären h1 und h2 dennoch grün.