Externe Stylesheets
In diesem Abschnitt wird beschrieben, wie Sie externe CSS Stylesheets über die StyleVision-Benutzeroberfläche verwalten können. Der Abschnitt ist in die folgenden Unterabschnitte gegliedert:
•Hinzufügen eines externen CSS Stylesheet zum SPS
•Anzeigen und Ändern der Struktur der externen CSS Stylesheets
•Ändern der Vorrangigkeit der externen CSS Stylesheets
•Wechseln zwischen der dem vollständigen CSS Stylesheet-Satz und einem einzigen CSS Stylesheet
Externe CSS Stylesheets können über zwei Seitenleisten verwaltet werden: die Seitenleiste "Globale Stile und die Seitenleiste "Design-Übersicht". Wenn ein Aspekt der externen Stylesheets in beiden Seitenleisten angezeigt werden kann (z.B. die relative Vorrangigkeit mehrerer Stylesheets), so werden Änderungen, die in einer Seitenleiste vorgenommen wurden, automatisch auch in der anderen Seitenleiste angezeigt.
Hinzufügen eines externen CSS Stylesheet zum SPS
Um dem SPS ein externes CSS Stylesheet zuzuweisen, gehen Sie folgendermaßen vor:
1.Wählen Sie in der Design-Ansicht im Fenster "Gobale Stile" den Eintrag "Extern" aus (Abbildung unten).
| 2. | Klicken Sie links oben in der Symbolleiste des Fensters Gobale Stile auf die Schaltfläche Hinzufügen (siehe Abbildung oben). |
| 3. | Suchen Sie im Dialogfeld "Öffnen" die gewünschte CSS-Datei, wählen Sie sie aus und klicken Sie auf Öffnen. Die CSS-Datei wird in der Baumstruktur zum Eintrag "Extern" hinzugefügt (siehe Liste der Struktur und Abbildung unten). |
| 4. | Um ein weiteres externes CSS Stylesheet hinzuzufügen, wiederholen Sie die Schritte 1 bis 3. Das neue CSS Stylesheet wird unterhalb von allen zuvor hinzugefügten externen CSS Stylesheets zur externen Struktur hinzugefügt. |
| Anmerkung: | Sie können ein externes Stylesheet auch über die Seitenleiste Design-Übersicht hinzufügen. |
Anzeigen und Ändern der Struktur der externen CSS Stylesheets
Die Struktur der externen CSS Stylesheets ist folgendermaßen gegliedert (siehe auch Abbildung unten):
- CSS-1.css (File location appears on mouseover)
- Media (can be defined in Style Repository window)
- Rules (non-editable; must be edited in CSS file)
- Selector-1
- Property-1
- ...
- Property-N
- ...
- Selector-N
+ ...
+ CSS-N.css
Das Medium, auf das dieses jeweilige Stylesheet angewendet werden kann, kann im Fenster "Gobale Stile" bearbeitet werden; klicken Sie dazu auf den Nach-unten-Pfeil rechts vom Eintrag und wählen Sie in der Dropdown-Liste das gewünschte Medium aus. Die im externen CSS Stylesheet definierten Regeln werden im Fenster "Gobale Stile" angezeigt, können aber nicht bearbeitet werden. Das Stylesheet, die Regeln und die einzelnen Selektor-Einträge in der Struktur können durch Klicken auf das + und - Symbol links von jedem Eintrag erweitert und reduziert werden (siehe Abbildung unten).
Um ein externes Stylesheet zu löschen, wählen Sie das Stylesheet aus und klicken Sie in der Symbolleiste "Gobale Stile" auf die Schaltfläche Zurücksetzen.
Ändern der Vorrangigkeit der externen CSS Stylesheets
Die im Fenster "Gobale Stile" zugewiesenen externen CSS Stylesheets werden mittels der Anweisung @import in die HTML-Ausgabedatei importiert. Dies würde in der HTML-Datei in etwa folgendermaßen aussehen:
<html>
<head>
<style>
<!--
@import url("ExternalCSS-1.css");
@import url("ExternalCSS-2.css")screen;
@import url("ExternalCSS-3.css")print;
-->
</style>
</head>
<body/>
</html>
Die Reihenfolge, in der die Dateien in der HTML-Datei aufgelistet sind, entsprechen der Reihenfolge, in der sie im Fenster "Gobale Stile" und in der Seitenleiste "Design-Übersicht" in der CSS-Dateistruktur unter "Extern" aufgelistet sind. Um die Reihenfolge der CSS Stylesheets im der Seitenleiste "Globale Stile" unter "Extern" zu ändern, wählen Sie das Stylesheet aus, für das sie die Priorität ändern möchten. Verschieben Sie das Stylesheet anschließend mit Hilfe der Nach oben 
oder Nach unten 
Schaltflächen der Symbolleiste der Seitenleiste "Gobale Stile" an die gewünschte Stelle in der Struktur. In der Seitenleiste "Design-Übersicht" müssen Sie dazu auf die Bearbeiten-Schaltfläche eines CSS Stylesheet klicken und je nach Bedarf den Befehl Nach oben oder Nach unten auswählen.
Wichtig: Beachten Sie, dass das niedrigste Stylesheet die höchste Import-Priorität hat und dass die Import-Priorität mit jedem Stylesheet, das weiter oben in der Liste steht, abnimmt. Die Import-Prioritäten in der Liste oben sind: (i) ExternalCSS-3.css; (ii) ExternalCSS-2.css; (iii) ExternalCSS-1.css. Wenn in zwei CSS-Regeln in zwei verschiedenen Stylesheets derselbe Selektor verwendet wird, wird die Regel im Stylesheet mit der höheren Import-Priorität angewendet.
Wechseln zwischen allen CSS-Dateien und einer einzigen CSS-Datei
Sie können auswählen, ob entweder (i) die Regeln aus allen CSS-Dateien angewendet werden sollen, wobei die Regeln für kaskadierende Stylesheets die Vorrangigkeit festlegen, oder (ii) ob nur die Regeln aus einer einzigen ausgewählten CSS-Datei angewendet werden sollen. Die gewünschte Option können Sie in der Seitenleiste "Design-Übersicht" (siehe Abbildung unten) auswählen. Klicken Sie auf die Bearbeitungsschaltfläche einer der aufgelisteten CSS-Dateien und wählen Sie entweder den Befehl Stile ... gemischt verwenden oder Eine CSS-.Datei... auswählen. Diese Option steht auch in den Globalen Stilen (oder jedem der externen Stylesheets) zur Verfügung.
Bei Auswahl des Befehls Eine CSS-Datei mittels XPath auswählen erscheint ein Dialogfeld, in dem Sie den XPath-Ausdruck eingeben können (Abbildung unten). Das Ergebnis des XPath-Ausdrucks muss der Namen einer der CSS-Dateien im SPS sein, und zwar genau in der Form, wie sie im oberen Bereich des Dialogfelds aufgelistet sind. Wenn Sie den Dateinamen als String eingeben, so muss der String wie alle Strings in XPath-Ausdrücken innerhalb von einfachen Anführungszeichen stehen.
Beachten Sie bitte die folgenden Punkte:
•Wenn eine einzige CSS-Datei ausgewählt ist: In der Authentic- und der HTML-Ausgabe werden alle Regeln aus der ausgewählten CSS-Datei angewendet. Diese Regeln werden in allen Design-Komponenten unterstützt. In der RTF-, PDF- und Word 2007+-Ausgabe werden nur die Klassen-Selektor-Regeln aus der ausgewählten CSS-Datei angewendet. Andere Regeln als Klassen-Selektor-Regeln werden aus allen CSS-Dateien angewendet, wobei Konflikte auf Basis des Vorrangs der CSS-Datei gelöst werden. Diese Regeln können in der der RTF-, PDF- und Word 2007+-Ausgabe auf die folgenden Design-Komponenten angewendet werden: automatische Berechnungen, den Platzhalter (Inhalt), Absatz (Block)-Komponenten und Tabellenzellen.
•Wenn Stile gemischt werden und aus allen CSS-Dateien verwendet werden: In der Authentic- und der HTML-Ausgabe werden alle Regeln aus allen CSS-Dateien angewendet und für alle Design-Komponenten unterstützt. Konflikte werden auf Basis des Vorrangs der CSS-Datei gelöst. In der der RTF-, PDF- und Word 2007+-Ausgabe werden nur alle anderen als Klassen-Selektor-Regeln angewendet, wobei Konflikte auf Basis des Vorrangs der CSS-Datei gelöst werden.