Globale Stile
Globale Stile werden im Fenster Gobale Stile für das gesamte SPS Design definiert und im Fenster Gobale Stile unter dem Eintrag "Global" aufgelistet. Sie werden an die Authentic View-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 Gobale 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 "Gobale Stile" den Eintrag "Global" aus (Abbildung unten).
| 2. | Klicken Sie auf die Schaltfläche Hinzufügen links oben in der Symbolleiste des Fensters Gobale Stile (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 "Gobale 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 "Gobale 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.)
Bearbeiten und Löschen von globalen Stilen
Sie können im Fenster "Globale Stile" sowohl den Stil-Selektor als auch seine Eigenschaften bearbeiten.
•Um einen Selektor zu editieren, doppelklicken Sie auf den Selektornamen und platzieren Sie anschließend den Cursor in das Textfeld und editieren Sie es.
•Informationen zum Definieren und Editieren der Eigenschaftswerte eines Stils finden Sie unter Definieren von Stilwerten. (Die Stileigenschaften können in drei möglichen Ansichten angezeigt werden. Eine Beschreibung dieser Ansichten und wie Sie zwischen diesen Ansichten wechseln, finden Sie unter Ansichten von Definitionen.
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 "Gobale 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 View-Ansicht und im HTML-Dokument aufgelistet sind, entspricht der Reihenfolge, in der sie im Fenster Gobale Stile unter "Global" aufgelistet sind. Die Reihenfolge in der Authentic View -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 Seletoren in .red. .green h1 h2 ändern würden, wären h1 und h2 dennoch grün.