Bedienfeld „CSS-Stile“

Im Bedienfeld „CSS-Stile“ können Sie die CSS-Regeln und -Eigenschaften verfolgen, die sich auf ein derzeit ausgewähltes Seitenelement auswirken (Modus „Aktuell“), oder alle Regeln und Eigenschaften, die für das Dokument verfügbar sind (Modus „Alle“). Über eine Umschalttaste oben im Bedienfeld können Sie zwischen den beiden Modi wechseln. Im Bedienfeld „CSS-Stile“ können Sie außerdem CSS-Eigenschaften im Modus „Alle“ und „Aktuell“ ändern.

Im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ drei Bereiche: das Bedienfeld „Zusammenfassung für Auswahl“, das die CSS-Eigenschaften für die aktuelle Auswahl im Dokument enthält, das Bedienfeld „Regeln“, das den Speicherort von ausgewählten Eigenschaften (bzw. je nach der Auswahl die Regelhierarchie für das ausgewählte Tag) anzeigt, und das Bedienfeld „Eigenschaften“, mit dem Sie CSS-Eigenschaften der Regel ändern können, die auf die Auswahl angewendet wurde.

Sie können die Größe eines beliebigen Bereichs durch Ziehen des Rahmens zwischen den Bereichen ändern. Die Größe von Spalten wird durch Ziehen der Trennlinien geändert.

Im Bedienfeld „Zusammenfassung für Auswahl“ wird eine Zusammenfassung der CSS-Eigenschaften und zugehörigen Werte für das Element angezeigt, das derzeit im aktuellen Dokument ausgewählt wurde. Die Zusammenfassung enthält die Eigenschaften für alle Regeln, die direkt für die Auswahl gelten. Nur festgelegte Eigenschaften werden angezeigt.

Die folgenden Regeln erstellen beispielsweise einen Klassenstil und einen Tag-Stil (in diesem Fall „paragraph“):

Wenn Sie Absatztext mit dem Klassenstil .foo im Dokumentfenster auswählen, werden im Bedienfeld „Zusammenfassung für Auswahl“ die relevanten Eigenschaften für beide Regeln angezeigt, da beide Regeln für die Auswahl gelten. In diesem Fall werden im Bereich „Zusammenfassung für Auswahl“ folgende Eigenschaften aufgeführt:

Im Bereich „Zusammenfassung für Auswahl“ werden Eigenschaften in aufsteigender Reihenfolge nach Genauigkeit angezeigt. Im obigen Beispiel definiert der Tag-Stil die Schriftgröße und der Klassenstil die Schriftfamilie und die Farbe. (Die vom Klassenstil definierte Schriftfamilie setzt die vom Tag-Stil definierte Schriftfamilie außer Kraft, da Klassenselektoren eine höhere Genauigkeit haben als Tag-Selektoren. Weitere Informationen zur CSS-Genauigkeit finden Sie unter www.w3.org/TR/CSS2/cascade.html.)

Im Bedienfeld „Regeln“ wird abhängig von der Auswahl eine von zwei verschiedenen Ansichten angezeigt: die Ansicht „Über“ oder die Ansicht „Regeln“. In der Ansicht „Über“ (Standardansicht) zeigt das Bedienfeld den Namen der Regel an, die die ausgewählte CSS-Eigenschaft definiert, und den Namen der Datei, die die Regel enthält. In der Ansicht „Regeln“ zeigt das Bedienfeld eine Hierarchie aller Regeln an, die direkt oder indirekt für die aktuelle Auswahl gelten. (Das Tag, für das die Regel direkt gilt, wird in der rechten Spalte angezeigt.) Sie können durch Klicken auf die Schaltflächen „Informationen über ausgewählte Eigenschaft anzeigen“ und „CSS-Regeln für ausgewähltes Tag anzeigen“ in der oberen rechten Ecke des Bedienfelds „Regeln“ zwischen den beiden Ansichten umschalten.

Wenn Sie im Bedienfeld „Zusammenfassung für Auswahl“ eine Eigenschaft auswählen, werden alle Eigenschaften der definierenden Regel im Bedienfeld „Eigenschaften“ angezeigt. (Die definierende Regel wird auch im Bedienfeld „Regeln“ ausgewählt, sofern diese Ansicht den Fokus besitzt.) Wenn z. B. die Regel .maintext vorhanden ist, die eine Schriftfamilie, Schriftgröße und Farbe definiert, werden durch Auswählen einer dieser Eigenschaften im Bedienfeld „Zusammenfassung für Auswahl“ alle Eigenschaften angezeigt, die von der Regel .maintext im Bedienfeld „Eigenschaften“ definiert werden, sowie die ausgewählte.maintext-Regel im Bedienfeld „Regeln“. (Darüber hinaus werden im Bedienfeld „Regeln“ die Eigenschaften der Regel im Bedienfeld „Eigenschaften“ angezeigt.) Sie können im Bedienfeld „Eigenschaften“ den CSS-Code schnell ändern, unabhängig davon, ob er im aktuellen Dokument eingebettet oder über ein angefügtes Stylesheet verknüpft wurde. Standardmäßig werden im Bedienfeld „Eigenschaften“ nur die bereits festgelegten Eigenschaften in alphabetischer Reihenfolge angezeigt.

Das Bedienfeld „Eigenschaften“ kann in zwei weiteren Ansichten angezeigt werden. In der Kategorieansicht werden Eigenschaften in Kategorien, wie z. B. Schriftart, Hintergrund, Block, Rand usw., gruppiert und die festgelegten Eigenschaften am oberen Rand jeder Kategorie als blauer Text angezeigt. In der Listenansicht wird eine alphabetische Liste aller verfügbaren Eigenschaften angezeigt, wobei ebenfalls die festgelegten Eigenschaften oben in blauem Text angezeigt werden. Um zwischen den Ansichten zu wechseln, klicken Sie unten links im Bedienfeld „Eigenschaften“ auf die Schaltfläche „Kategorieansicht zeigen“, „Listenansicht zeigen“ oder „Nur festgelegte Eigenschaften anzeigen“.

Die festgelegten Eigenschaften werden in allen Ansichten blau angezeigt. Die für diese Auswahl irrelevanten Eigenschaften sind rot durchgestrichen. Wenn Sie den Mauszeiger auf einer irrelevanten Regel positionieren, wird eine Meldung angezeigt, weshalb diese Eigenschaft irrelevant ist. Gewöhnlich ist eine Eigenschaft irrelevant, weil sie außer Kraft gesetzt wurde oder keine geerbte Eigenschaft ist.

Änderungen, die Sie im Bedienfeld „Regeln“ vornehmen, werden sofort übernommen, sodass Sie die Änderungen während Ihrer Arbeit in einer Vorschau verfolgen können.

Bedienfeld „CSS-Stile“ im Modus „Alle“

Im Modus „Alle“ enthält das Bedienfeld „CSS-Stile“ zwei Bereiche: „Alle Regeln“ (oben) und „Eigenschaften“ (unten). Im Bedienfeld „Alle Regeln“ wird eine Liste der Regeln angezeigt, die im aktuellen Dokument definiert sind, sowie alle Regeln, die in den mit dem aktuellen Dokument verknüpften Stylesheets definiert wurden. Im Bedienfeld „Eigenschaften“ können Sie CSS-Eigenschaften für eine ausgewählte Regel im Bedienfeld „Alle Regeln“ bearbeiten.

Sie können die Größe jedes Bereichs durch Ziehen des Rahmens zwischen den Bereichen ändern. Die Größe von Eigenschaftenspalten wird durch Ziehen der Trennlinie geändert.

Wenn Sie im Bedienfeld „Alle Regeln“ eine Regel auswählen, werden alle Eigenschaften, die in dieser Regel definiert sind, im Bedienfeld „Eigenschaften“ angezeigt. Sie können im Bedienfeld „Eigenschaften“ den CSS-Code schnell ändern, unabhängig davon, ob er im aktuellen Dokument eingebettet oder in einem angefügten Stylesheet verknüpft wurde. Standardmäßig werden im Bedienfeld „Eigenschaften“ nur die zuvor festgelegten Eigenschaften in alphabetischer Reihenfolge angezeigt.

Eigenschaften können in zwei weiteren Ansichten angezeigt werden. In der Kategorieansicht werden Eigenschaften in Kategorien, wie z. B. Schriftart, Hintergrund, Block, Rand usw., gruppiert und die festgelegten Eigenschaften am oberen Rand jeder Kategorie angezeigt. In der Listenansicht wird eine alphabetische Liste aller verfügbaren Eigenschaften angezeigt, wobei ebenfalls die festgelegten Eigenschaften oben angezeigt werden. Um zwischen den Ansichten zu wechseln, klicken Sie unten links im Bedienfeld „Eigenschaften“ auf die Schaltfläche „Kategorieansicht zeigen“, „Listenansicht zeigen“ oder „Nur festgelegte Eigenschaften anzeigen“. Die festgelegten Eigenschaften werden in allen Ansichten blau angezeigt.

Änderungen, die Sie im Bedienfeld „Regeln“ vornehmen, werden sofort übernommen, sodass Sie die Änderungen während Ihrer Arbeit in einer Vorschau verfolgen können.

Schaltflächen und Ansichten des Bedienfelds „CSS-Stile“

Sowohl im Modus „Alle“ als auch im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ drei Schaltflächen, mit denen Sie die Ansicht im Bedienfeld „Eigenschaften“ (dem unteren Bedienfeld) ändern können:

Unterteilt die von Dreamweaver unterstützten CSS-Eigenschaften in acht Kategorien: Schriftart, Hintergrund, Block, Rahmen, Box, Liste, Positionierung und Erweiterungen. Die Eigenschaften jeder Kategorie sind in einer Liste aufgeführt, die Sie erweitern bzw. reduzieren können, indem Sie auf die Schaltfläche mit dem Pluszeichen (+) neben dem Kategorienamen klicken. Festgelegte Eigenschaften werden (in blau) ganz oben in der Liste angezeigt.

Zeigt alle von Dreamweaver unterstützten CSS-Eigenschaften in alphabetischer Reihenfolge an. Festgelegte Eigenschaften werden (in blau) ganz oben in der Liste angezeigt.

Zeigt nur die zuvor festgelegten Eigenschaften an. Dies ist die Standardansicht.

Sowohl im Modus „Alle“ als auch im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ die folgenden Schaltflächen:

Öffnet das Dialogfeld „Externes Stylesheet verknüpfen“. Wählen Sie ein externes Stylesheet aus, das mit dem aktuellen Dokument verknüpft oder in das Dokument importiert werden soll.

Öffnet ein Dialogfeld, in dem Sie die Art des zu erstellenden Stils auswählen. Wenn Sie beispielsweise einen benutzerdefinierten Stil erstellen möchten, definieren Sie entweder ein HTML-Tag neu oder definieren einen CSS-Selektor.

Öffnet ein Dialogfeld, in dem Sie die Stile im aktuellen Dokument oder in einem externen Stylesheet bearbeiten können.

Entfernt die ausgewählte Regel oder Eigenschaft aus dem Bedienfeld „CSS-Stile“ und entfernt die Formatierung von allen Elementen, auf die sie angewendet wurde. (Es werden jedoch keine Klassen- oder ID-Eigenschaften entfernt, auf die der Stil verweist.) Mit der Schaltfläche „CSS-Regel löschen“ kann auch die Verknüpfung eines angefügten CSS-Stylesheets aufgehoben werden.

Bedienfeld „CSS-Stile“ öffnen

Sie können im Bedienfeld „CSS-Stile“ CSS-Stile anzeigen, erstellen, bearbeiten und entfernen sowie externe Stylesheets an Dokumente anfügen.