Dreamweaver MX CSS Usage Tutorial overview

css|dreamweaver| Tutorial

Site original content, reproduced please indicate the source Web page teaching network .

　　 A. CSS Overview

Now the layout of the Web page is becoming more and more complex, many effects need to be implemented through CSS, Dreamweaver MX 2004 has made great improvements in the design of CSS functions. Today to give you a concrete talk about how to use the Dreamweaver MX CSS features, I believe that when you read this tutorial you will feel that CSS use is so simple, and the creation of the effect is amazing.

Modern Web page production is inseparable from CSS technology, the use of CSS technology, can effectively the layout of the page, font, color, background and other effects to achieve more precise control. CSS can not only make beautiful neat and tidy to make visitors pleasing to the Web page, but also to add a lot of magical effects.

The process of creating CSS stylesheets is the process of setting up various CSS properties, so it's important to understand and master property settings. The CSS style in DW MX 2004 contains all the CSS1 attributes defined by the format of the consortium, which are divided into eight parts: type, background, block, box, border, list, positioning, extension, and the following figure:

The DW MX 2004 Implementation CSS property Settings feature is fully visualized without the need to write code. Below we explain in detail separately. To make it easier to understand, start by creating a new CSS style sheet:

"Create a new CSS style"

Place the insertion point in the document, and then do one of the following to open the new CSS Style dialog box:

In the CSS Styles Panel (Window > CSS styles), click the new CSS Style button in the lower-right corner area of the panel, as shown in the following illustration:

In the Text property inspector, choose Manage styles from the style pop-up menu, and then click New in the dialog box that appears.

On the Related CSS tab (select Window > Label Inspector, and then click the Related CSS tab), right-click and choose New Rule from the context menu.

Select the Text menu > CSS styles > New (N) ....

The New CSS Style dialog box appears, as shown in the following illustration:

Define the type of CSS style you want to create:

To create a custom style that can be applied as a class attribute to a text range or text block, select Create custom Style (Class), and then enter the name of the style in the Name text box.

Note: The class name must begin with a period and can contain any combination of letters and numbers (for example,. mycss). If you do not enter a beginning period, DW MX 2004 will be entered automatically for you.

To redefine the default format for a particular HTML tag, select Redefine label, and then enter an HTML tag in the Label field, or select a label from the pop-up menu.

To define a format for a specific label combination or for all labels that contain a specific Id attribute, select Use CSS selector, and then enter one or more HTML tags in the selector text box, or select a label from the pop-up menu. The selector provided in the pop-up menu (called the perjury selector) includes a:active, A:hover, A:link, and a:visited.

Select a location to define the style:

To create an external style sheet, select New style sheet file.

To embed a style in the current document, select "only for this document."

Click OK.