Create a CSS rule

Search
Adobe Dreamweaver User Guide
Applies to: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer.

You can create a CSS rule to automate the formatting of HTML tags or a range of text identified by class or ID attributes.

  1. Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box:
    • Select Format > CSS Styles > New.
    • In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side of the panel.
    • Select text in the Document window, select New CSS Rule from the Targeted Rule pop-up menu in the CSS Property inspector (Window > Properties); then click the Edit Rule button or select an option from the Property inspector (for example, click the Bold button), to initiate a new rule.
  2. In the New CSS Rule dialog box, specify the selector type for the CSS rule you want to create:
    • To create a custom style that can be applied as a class attribute to any HTML element, select the Class option from the Selector Type pop-up menu and then enter a name for the style in the Selector Name text box.

    Note:

    Class names must begin with a period and can contain any combination of letters and numbers (for example, .myhead1). If you don’t enter a beginning period, Dreamweaver automatically enters it for you.

    • To define the formatting for a tag that contains a specific ID attribute, select the ID option from the Selector Type pop-up menu and then enter the unique ID (for example, containerDIV) in the Selector Name text box.

    Note:

    IDs must begin with a pound (#) sign and can contain any combination of letters and numbers (for example, #myID1). If you don’t enter a beginning pound sign, Dreamweaver automatically enters it for you.

    • To redefine the default formatting of a specific HTML tag, select the Tag option from the Selector Type pop-up menu; then enter an HTML tag in the Selector Name text box or select one from the pop‑up menu.
    • To define a compound rule that affects two or more tags, classes, or IDs simultaneously, select the Compound option and enter the selectors for your compound rule. For example if you enter div p, all p elements within div tags will be affected by the rule. A description text area explains exactly which elements the rule will affect as you add or delete selectors.
  3. Select the location in which you want to define the rule, and then click OK:
    • To place the rule in a style sheet that is already attached to the document, select the style sheet.
    • To create an external style sheet, select New Style Sheet File.
    • To embed the style in the current document, select This Document Only.
  4. In the CSS Rule Definition dialog box, select the style options you want to set for the new CSS rule. For more information, see the next section.
  5. When you are finished setting style properties, click OK.

    Note:

    Clicking OK without setting style options results in a new, empty rule.