某些 Creative Cloud 应用程序、服务和功能在中国不可用。
Opomba:
In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer.
The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or all of the rules and properties that are available to the document (All mode). A toggle button at the top of panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and Current mode.
In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the current selection in the document, a Rules pane that displays the location of selected properties (or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS properties for the rule applied to the selection.
You can resize any of the panes by dragging the borders between the panes, and can resize columns by dragging dividers.
The Summary for Selection pane displays a summary of CSS properties and their values for the item currently selected in the active document. The summary shows the properties for all rules that directly apply to the selection. Only set properties are shown.
For example, the following rules create a class style and a tag (in this case paragraph) style:
.foo{
color: green;
font-family: ‘Arial’;
}
p{
font-family: ‘serif’;
font-size: 12px;
}
When you select paragraph text with a class style of .foo in the Document window, the Summary for Selection pane displays the relevant properties for both rules, because both rules apply to the selection. In this case, the Summary for Selection pane would list the following properties:
font-size: 12px font-family: ‘Arial’ color: green
The Summary for Selection pane arranges properties in increasing order of specificity. In the above example, the tag style defines the font size and the class style defines the font family and the color. (The font family defined by the class style overrides the font family defined by the tag style because class selectors have higher specificity than tag selectors. For more information on CSS specificity, see www.w3.org/TR/CSS2/cascade.html.)
The Rules pane displays two different views—About view or Rules view—depending on your selection. In About view (the default view), the pane displays the name of the rule that defines the selected CSS property, and the name of the file containing the rule. In Rules view, the pane displays a cascade, or hierarchy, of all rules that apply directly or indirectly to the current selection. (The tag to which the rule directly applies appears in the right column.) You can toggle between the two views by clicking the Show Information and Show Cascade buttons in the upper-right corner of the Rules pane.
When you select a property in the Summary for Selection pane, all of the properties for the defining rule appear in the Properties pane. (The defining rule is also selected in the Rules pane, if Rules view is selected.) For example, if you have a rule called .maintext that defines a font family, font size, and color, then selecting any of those properties in the Summary for Selection pane will display all of the properties defined by the .maintext rule in the Properties pane, as well as the selected .maintext rule in the Rules pane. (Additionally, selecting any rule in the Rules pane displays that rule’s properties in the Properties pane.) You can then use the Properties pane to quickly modify your CSS, whether it is embedded in the current document or linked by means of an attached style sheet. By default, the Properties pane shows only those properties that have already been set, and arranges them in alphabetical order.
You can choose to display the Properties pane in two other views. Category view displays properties grouped into categories, such as Font, Background, Block, Border, and so on, with set properties at the top of each category, displayed in blue text. List view displays an alphabetical list of all available properties, and likewise sorts set properties to the top, displaying them in blue text. To switch between views, click the Show Category View, Show List View, or Show Only Set Properties button, located at the lower-left corner of the Properties pane.
In all views, set properties are displayed in blue; properties irrelevant to a selection are displayed with a red strike-through line. Holding the mouse over a rule that is irrelevant displays a message explaining why the property is irrelevant. Typically a property is irrelevant because it’s overridden or not an inherited property.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.
In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document. The Properties pane lets you edit CSS properties for any selected rule in the All Rules pane.
You can resize either pane by dragging the border between the panes, and can resize the Properties columns by dragging their divider.
When you select a rule in the All Rules pane, all of the properties that are defined in that rule appear in the Properties pane. You can then use the Properties pane to quickly modify your CSS, whether it is embedded in the current document or linked in an attached style sheet. By default, the Properties pane shows only those properties that have been previously set, and arranges them in alphabetical order.
You can choose to display properties in two other views. Category view displays properties grouped into categories, such as Font, Background, Block, Border, and so on, with set properties at the top of each category. List view displays an alphabetical list of all available properties, and likewise sorts set properties to the top. To switch between views, click the Show Category View, Show List View, or Show Only Set Properties button, located at the lower-left corner of the Properties pane. In all views, set properties are displayed in blue.
Any changes you make in the Properties pane are applied immediately, letting you preview your work as you go.
In both All and Current modes, the CSS Styles panel contains three buttons that let you alter the view in the Properties pane (the bottom pane):
A. Category View B. List View C. Set Properties View
Category View
Divides the Dreamweaver-supported CSS properties into eight categories: font, background, block, border, box, list, positioning, and extensions. Each category’s properties are contained in a list that you expand or collapse by clicking the Plus (+) button next to the category name. Set properties appear (in blue) at the top of the list.
List View
Displays all of the Dreamweaver-supported CSS properties in alphabetical order. Set properties appear (in blue) at the top of the list.
Set Properties View
Displays only those properties that have been set. Set Properties view is the default view.
In both All and Current modes, the CSS Styles panel also contains the following buttons:
A. Attach Style Sheet B. New CSS Rule C. Edit Style D. Disable/enable CSS property E. Delete CSS rule
Attach Style Sheet
Opens the Link External Style Sheet dialog box. Select an external style sheet to link to or import into your current document.
New CSS Rule
Opens a dialog box in which you can select the type of style you’re creating—for example, to create a class style, redefine an HTML tag, or to define a CSS selector.
Edit Style
Opens a dialog box in which you can edit the styles in the current document or in an external style sheet.
Delete CSS Rule
Removes the selected rule or property from the CSS Styles panel, and removes the formatting from any element to which it was applied. (It does not, however, remove class or ID properties referenced by that style). The Delete CSS Rule button can also detach (or “unlink”) an attached CSS style sheet.
Opomba:
Right-click (Windows) or Control‑click (Macintosh) the CSS Styles panel to open a context menu of options for working with CSS style sheet commands.