Gewusst wie: Verwenden der Fenster "Stile übernehmen" und "Stile verwalten"
Aktualisiert: November 2007
Mit den Fenstern Stile übernehmen und Stile verwalten können Sie Stile übernehmen, ändern, umbenennen und löschen. Außerdem können Sie Verknüpfungen zu externen Cascading Stylesheets (CSS) herstellen bzw. lösen, alle Instanzen eines Stils auswählen und den Code suchen, der den Regelsatz eines Stils enthält.
Jedes Fenster dient bestimmten Zwecken. Übernehmen Sie mit dem Fenster Stile übernehmen einzelne oder mehrere Stile für ein Seitenelement. Im Fenster Stile übernehmen werden die Stile entsprechend ihren Stilregeln angezeigt. Dadurch können Sie den gewünschten Stil einfach anhand seiner Darstellung im Fenster schnell identifizieren.
Ändern Sie die Position oder die Reihenfolge der Stile im Fenster Stile verwalten. Sie können Stile zwischen externem und internem CSS verschieben, oder Sie können die Position eines Stils innerhalb eines Stylesheets oder Style-Blocks ändern.
Beide Tools verwenden Symbole zum Darstellen, wie ein Stil definiert ist. In der folgenden Tabelle werden die Symbole dargestellt und beschrieben.
Symbol |
Beschreibung |
.gif) |
Ein ID-basierter Stil wird mit einem roten Punkt angezeigt. |
.gif) |
Ein klassenbasierter Stil wird mit einem grünen Punkt angezeigt. |
.gif) |
Ein elementbasierter Stil wird mit einem blauen Punkt angezeigt. |
.gif) |
Ein Inlinestil wird mit einem gelben Punkt angezeigt. |
.gif) |
Ein auf der aktuellen Seite verwendeter Stil wird mit einem Kreis um einen Punkt angezeigt. |
.gif) |
Ein importiertes externes Cascading Stylesheet wird mit einem @-Zeichen angezeigt. |
Arbeiten mit dem Fenster "Stile übernehmen"
Im Fenster Stile übernehmen werden alle für eine Seite definierten CSS-Stilregeln aufgelistet. Hierzu gehören Stilregeln, die in externen Stylesheets, als Inlinestile oder als in der aktuellen Seite angegebene Stile definiert sind. Klassen- und ID-basierte Stilregeln werden unter dem Namen der externen CSS-Datei angezeigt, die den Stil enthält. Eine in der Seite definierte Stilregel wird unter Aktuelle Seite angezeigt. Elementbasierte Stilregeln sind auf dieselbe Weise organisiert, sie werden jedoch unter der getrennten Überschrift Kontextbezogene Selektoren angezeigt.
Sie können festlegen, dass im Fenster alle Stilregeln aufgelistet werden. Wahlweise können Sie die Liste auf die Stilregeln einschränken, die in der aktuellen Webseite oder im gerade ausgewählten Bereich der Seite verwendet werden. Unabhängig von der ausgewählten Option werden elementbasierte Stilregeln und Inlinestilregeln im Fenster nur unter zwei Bedingungen angezeigt: entweder zeigen Sie mit dem Mauszeiger auf ein Seitenelement, das den Stil verwendet, oder Sie wählen Inhalte aus, in denen der Stil verwendet wird.
Sie können die Liste der Stile, die im Fenster Stile übernehmen angezeigt wird, ebenfalls sortieren.
Wenn ein bestimmter Stil vor dem Fensterhintergrund schwer zu erkennen ist, können Sie eine Farbe auswählen, die im Fenster hinter den Stilen angezeigt wird, die keine Eigenschaft für die Hintergrundfarbe enthalten.
.gif "Hinweis") Hinweis: |
|---|
Zeigen Sie mit dem Mauszeiger im Fenster Stile übernehmen auf einen Stil, um vorübergehend alle Regeln des Stils in einem Popupfenster anzuzeigen. |
Übersicht über das Fenster "Stile übernehmen"
Die Benutzeroberfläche des Fensters Stile übernehmen weist die folgenden Features auf:
Neuer Stil: Ermöglicht den Zugriff auf das Dialogfeld Stile.
Stylesheet anfügen: Ermöglicht das Auswählen eines Stylesheets, um es der aktuellen Seite zuzuweisen.
Formatvorlagen löschen: Entfernt alle klassenbasierten Stilregeln und Inlinestilregeln aus der aktuellen Auswahl.
Aktuelle Seite: Listet die klassen- und ID-basierten Stilregeln der aktuellen Seite und der importierten externen CSS-Dateien auf.
Eine externe CSS-Datei (am @-Zeichen erkennbar), die alle Stilregeln anzeigt, die in die aktuelle Webseite importiert werden.
Eine externe CSS-Datei, die mit der aktuellen Webseite verknüpft ist und in einem getrennten Abschnitt angezeigt wird.
Ein durchgehender rechteckiger Rahmen um einen Stil, der angibt, dass dieser Stil in der aktuellen Auswahl verwendet wird.
Kontextbezogene Selektoren: Listen elementbasierte Stilregeln auf, die im derzeit ausgewählten Bereich verwendet werden.
Inlinestil: Zeigt die Stilregeln an, die dem ausgewählten Inlineelement zugewiesen wurden.
Ein Kontextmenü für jede Stilregel, über das Sie viele stilbezogene Aufgaben ausführen können.
.png)
Verwenden des Fensters "Stile übernehmen"
Mithilfe des Fensters Stile übernehmen können Sie einem Seitenelement schnell einzelne oder mehrere Stile zuweisen.
So weisen Sie mithilfe des Fensters "Stile übernehmen" einem Seitenelement Stile zu
Zum Anzeigen des Fensters Stile übernehmen klicken Sie im Menü Format auf CSS-Stile und dann auf Stile übernehmen.
Wählen Sie in einer Webseite in der Entwurfsansicht oder der Quellansicht das Element aus, dem Sie einen Stil zuweisen möchten, und führen Sie dann im Fenster Stile übernehmen einen der folgenden Schritte aus:
Um eine einzelne vorhandene Stilregel zuzuweisen, klicken Sie auf den Klassen- oder ID-Stil, den Sie zuweisen möchten.
Um mehrere vorhandene Stilregeln zuzuweisen, klicken Sie bei gedrückter STRG-Taste auf die einzelnen Stile, die Sie zuweisen möchten.
Sie können die Reihenfolge der Stile und die angezeigten Stile ändern sowie die Anzeige des Fensters an Ihre Wünsche anpassen.
So sortieren Sie die Stile mithilfe des Fensters "Stile übernehmen"
Klicken Sie im Fenster Stile übernehmen auf Optionen, und führen Sie dann einen der folgenden Schritte aus:
Um die Stilregeln in der Reihenfolge aufzulisten, in der sie im CSS stehen, klicken Sie auf Nach Reihenfolge kategorisieren.
Um Stile alphabetisch und nach Stiltyp (klassen- oder ID-basiert) aufzulisten, klicken Sie auf Nach Typ kategorisieren.
Sie können Stilregeln im Fenster Stile übernehmen anzeigen oder ausblenden. Elementbasierte Stile und Inlinestilregeln werden im Fenster Stile übernehmen nur angezeigt, wenn Sie mit dem Mauszeiger auf einen Bereich zeigen oder einen Bereich auswählen, in dem der Stil verwendet wird.
So zeigen Sie Stile mithilfe des Fensters "Stile übernehmen" an oder blenden diese aus
Klicken Sie im Fenster Stile übernehmen auf Optionen, und führen Sie dann einen der folgenden Schritte aus:
Um alle Stilregeln aufzulisten, die im externen und internen CSS sowie im Inline-CSS der aktuellen Webseite enthalten sind, klicken Sie auf Alle Stile anzeigen.
Um lediglich die Stilregeln aufzulisten, die in der aktuellen Webseite verwendet werden, klicken Sie auf Auf der aktuellen Seite verwendete Stile anzeigen.
Um lediglich die Stilregeln aufzulisten, die im gerade ausgewählten Bereich der Webseite verwendet werden, klicken Sie auf In Auswahl verwendete Stile anzeigen.
Wenn in einer Stilregel keine Hintergrundfarbe definiert ist, können Sie eine Farbe zuweisen, damit der Stilname im Fenster Stile übernehmen leichter zu erkennen ist. Wenn ein Stil über eine Stilregel für den Hintergrund verfügt, wird der Hintergrund dementsprechend angezeigt.
So zeigen Sie im Fenster "Stile übernehmen" einen farbigen Hintergrund an
Klicken Sie im Fenster Stile übernehmen auf Optionen und dann auf Vorschau der Hintergrundfarbe anzeigen.
Wählen Sie im Dialogfeld Weitere Farben eine Farbe aus, und klicken Sie dann auf OK.
Arbeiten mit dem Fenster "Stile verwalten"
Im Fenster Stile verwalten werden alle Stilregeln aufgelistet, die im externen Cascading Stylesheet (CSS) der Seite definiert sind. Außerdem werden die in der Seite definierten Stilregeln (mit Ausnahme der Inlinestile) aufgelistet. Sie können das Fenster Stile verwalten verwenden, um Stile zwischen einem externen Stylesheet und dem style-Element der Seite zu verschieben. Außerdem können Sie das Fenster verwenden, um die Position eines Stils innerhalb der CSS-Stilregeln zu ändern.
Sie können festlegen, dass im Fenster alle Stilregeln aufgelistet werden, oder nur die Stilregeln, die in der aktuellen Webseite oder im gerade ausgewählten Bereich der Seite verwendet werden. Alle klassen-, element- und ID-basierten Stilregeln werden unter dem Namen der externen CSS-Datei angezeigt, die die Stilregel enthält. Wenn sich die Stilregel in der aktuellen Seite befindet, wird sie unter Aktuelle Seite angezeigt.
| Hinweis: |
|---|
Zeigen Sie mit dem Mauszeiger im Fenster Stile übernehmen auf einen Stil, um vorübergehend alle Regeln des Stils in einem Popupfenster anzuzeigen. |
Übersicht über das Fenster "Stile verwalten"
Die Benutzeroberfläche des Fensters Stile verwalten weist die folgenden Features auf:
Neuer Stil: Ermöglicht den Zugriff auf das Dialogfeld Stile.
Stylesheet anfügen: Ermöglicht das Auswählen eines Stylesheets, um es mit der aktuellen Seite zu verknüpfen.
Aktuelle Seite: Listet die klassen- und ID-basierten Stilregeln der aktuellen Seite und aller importierten externen CSS-Dateien auf.
Eine Registerkarte für jede externe CSS-Datei, die mit der aktuellen Webseite verknüpft ist.
Standardmäßige Gruppierung der Selektoren, durch die die Selektoren für jeden Stil anzeigt werden, der in einer Gruppe mehrere Selektoren enthält. Sie können die Selektoren einzeln auflisten, indem Sie auf Optionen und dann auf Gruppierte Selektoren trennen klicken.
.png)
Um im Fenster Stile verwalten für einen ausgewählten Stil eine Vorschau anzuzeigen, klicken Sie auf Optionen und dann auf Vorschau für ausgewählten Stil anzeigen.
Verwenden des Fensters "Stile verwalten"
Sie können die Reihenfolge der Stile ändern und die Anzeige des Fensters an Ihre Wünsche anpassen. Wenn Sie einen Stil in der Liste nach oben oder unten verschieben, wird der Stil auch im Stylesheet verschoben. Diese Änderung kann beeinflussen, wie sich Stileigenschaften überlagern. Wenn ein Eigenschaftenattribut beispielsweise in zwei verschiedenen Stilen festgelegt wird, hat der letzte Stil Vorrang.
| Hinweis: |
|---|
Wenn das Fenster Stile verwalten auf Nach Element kategorisieren oder Nach Typ kategorisieren festgelegt ist, können Sie einen Stil in der Liste nicht an eine beliebige Stelle verschieben. In beiden Fällen können Sie einen Stil nur zwischen einem externen CSS und einem anderen externen CSS oder der aktuellen Seite verschieben, indem Sie den Stil auf den Namen des externen CSS oder auf Aktuelle Seite ziehen. |
So verschieben Sie einen Stil mithilfe des Fensters "Stile verwalten"
Klicken Sie im Menü Format auf CSS-Stile und dann auf Stile verwalten, um das Fenster Stile verwalten anzuzeigen.
Klicken Sie im Fenster Stile verwalten auf Optionen, klicken Sie auf Nach Reihenfolge kategorisieren, und gehen Sie dann wie folgt vor:
Um die Position eines Stils im CSS zu ändern, ziehen Sie den Stil in der Liste nach oben oder unten. Sie können beispielsweise die Stile verschieben, die Sie am häufigsten verwenden, sodass sie übersichtlich nebeneinander angezeigt werden.
Um einen Stil aus einer Seite in ein externes, mit der Seite verknüpftes CSS zu verschieben, ziehen Sie den Stil aus der Liste unter Aktuelle Seite auf den Namen des externen CSS oder an eine bestimmte Stelle in der Liste der Stile im externen CSS.
Um einen Stil aus einem externen CSS auf eine Seite zu verschieben, ziehen Sie den Stil aus der Liste unter dem Namen des externen CSS auf Aktuelle Seite oder an eine bestimmte Stelle in der Liste der Stile unter Aktuelle Seite. Wenn Aktuelle Seite nicht angezeigt wird, fügen Sie der Webseite im head-Element ein style-Element hinzu.
Um einen Stil aus einem externen CSS in ein anderes externes CSS zu verschieben, ziehen Sie den Stil auf den Namen des gewünschten externen CSS oder an eine bestimmte Stelle in der Liste der Stile im externen CSS.
Obwohl sich das Fenster Stile verwalten am besten zum Verwalten von Stilen eignet, können Sie es auch zum Zuweisen eines Stils auf ein Seitenelement verwenden.
So weisen Sie mithilfe des Fensters "Stile verwalten" einem Seitenelement einen Stil zu
Wählen Sie in einer Webseite in der Entwurfsansicht oder der Quellansicht das Element aus, dem Sie einen Stil zuweisen möchten.
Klicken Sie mit der rechten Maustaste auf den gewünschten Klassen- oder ID-Stil, und klicken Sie im Kontextmenü auf Stil übernehmen.
Sie können Stile auch mithilfe der Auswahlmöglichkeiten unter der Schaltfläche Optionen sortieren.
So sortieren Sie Stile mithilfe des Fensters "Stile verwalten"
Klicken Sie im Fenster Stile verwalten auf Optionen, und führen Sie dann einen der folgenden Schritte aus:
Klicken Sie auf Nach Reihenfolge kategorisieren, um die Stile in der Reihenfolge aufzulisten, in der sie sich im CSS befinden.
Klicken Sie auf Nach Element kategorisieren, um die Stile unter dem HTML-Element aufzulisten, dem sie jeweils zugewiesen wurden.
Klicken Sie auf Nach Typ kategorisieren, um die Stile alphabetisch und nach Stiltyp aufzulisten.
Sie können gruppierte Stile trennen, um leichter mit ihnen arbeiten zu können.
So listen Sie die Selektoren von Stilen, die mehrere Selektoren enthalten, getrennt auf
- Klicken Sie im Fenster Stile verwalten auf Optionen und dann auf Gruppierte Selektoren trennen.
Sie können auch angeben, welche Stile im Fenster Stile verwalten angezeigt werden.
So zeigen Sie Stile im Fenster "Stile verwalten" an oder blenden diese aus
Klicken Sie im Fenster Stile verwalten auf Optionen, klicken Sie auf Nach Reihenfolge kategorisieren, und gehen Sie dann wie folgt vor:
Klicken Sie auf Alle Formatvorlagen anzeigen, um alle Stile aufzulisten, die in externen Stylesheets enthalten sind, die sich auf der Seite befinden und Inlinestilregeln der aktuellen Seite sind.
Klicken Sie auf In der aktuellen Seite verwendete Formatvorlagen anzeigen, um nur die Stile aufzulisten, die in der aktuellen Seite verwendet werden.
Klicken Sie auf In der Auswahl verwendete Formatvorlagen anzeigen, um nur die Stile aufzulisten, die im gerade ausgewählten Bereich der Seite verwendet werden.