Style Editor

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, diesen Artikel aus dem Englischen zu übersetzen

Der Style Editor ermöglicht:

  • alle Stylesheets einer Seite anzuschauen und zu bearbeiten
  • komplett neue Stylesheets zu erstellen und diese auf eine Seite anzuwenden
  • bestehende Stylesheets zu importieren und auf eine Seite anzuwenden

To open the Style Editor choose the "Style Editor" option from the "Web Developer" menu (which is a submenu in the "Tools" menu on the Mac). The Toolbox will appear at the bottom of the browser window, with the Style Editor activated:

On the left (or the top, if your window is very narrow) is a list of all the style sheets used by the document, and on the right (or the bottom, if your window is narrow) is the source for the style sheet you've currently selected in that style sheet pane.

The style sheet pane

The style sheet pane, on the left, lists all the style sheets being used by the current document. You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. You can save any changes you've made to the style sheet to your local computer by clicking the Save button in the bottom-right corner of each sheet's entry in the list.

The editor pane

On the right is the editor pane. This is where the source for the selected style sheet is available for you to read and edit. Any changes you make are applied to the page in real time. This makes it really easy to experiment with, revise, and test changes to your page's appearance. Once you're satisfied with your changes, you can save a copy locally by clicking the Save button on the sheet's entry in the sheet pane.

The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. See Using the Source Editor for documentation about the editor itself, including useful keyboard shortcuts.

A particularly handy feature to the Style Editor: it automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.

Creating and importing style sheets

You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles apply in real time just like changes to the other sheets.

You can load a style sheet from disk and apply it to the page by clicking the Import button.

See also