CSS Quick Guide (4)

5. Use dw4 to create CSS

1. CSS styles panel

Through the previous chapters, I believe you have a certain understanding of CSS. This chapter comprehensively explains how to use dreamweaver4 to create and operate CSS. Run dreamweaver4 first. After startup, select Windows> CSS styles (or press shitf + F11) under the menu. the CSS styles Management Panel is displayed, as shown in:

The CSS styles panel displays all custom CSS styles (class delimiters starting with vertices, dreamweaver4 uses the class selector starting with a vertex as a custom style). You can use the Apply button to apply these CSS styles to the text or document area of the page at will.
Note: There is a check box in front of the application button. When selected, the button becomes unavailable in gray, indicating automatic application. As long as you click the custom CSS style, it will be automatically applied to the current element on the page; if the check box is not selected, click Apply. When a custom style is applied to an object, it is equivalent to adding class = "..." after the current HTML Tag "...". In addition, there is an "S" symbol in front of the style, indicating that the internal style is defined; if it is a symbol, it means that the style is linked to the external style table file.

Note: The CSS styles Panel only displays custom (class) CSS styles. The redefined HTML Tag and other CSS selector styles do not appear on the CSS styles panel, this is because they can be automatically applied to HTML Tag-controlled areas. (Redefinition of HTML Tag refers to the CSS style with a single HTML tag as the selector. The reason is that it is redefined and changed the style of the original HTML Tag .)

There are four small buttons in the lower right corner, which are the most common commands:
Attach style sheet: (link to style sheet) after clicking it, a select style sheet dialog box is displayed. Select the previously created external style sheet and click OK to link it to the external style sheet. When adding external style sheets, use relative paths whenever possible.
New Style: (create a style) This button is usually used to create a CSS style sheet.
Edit style sheet: (edit style sheet) the edit style sheet dialog box is displayed, showing all existing internal and external style sheets, you can create, edit, and delete styles in this dialog box.
Delete: (delete style) Select the custom CSS style to be deleted, and click this button to delete the style.

Click the triangle above or right-click to bring up a menu. The menu functions are as follows:
Edit: (edit) edit the currently selected custom CSS style. After you click it, the "Edit definition style" dialog box is displayed.
Duplicate: (copy) copy the currently selected custom CSS style class.
Delete: (delete) Delete the currently selected custom CSS style, which has the same effect as the button.
Apply: (Application) applies the selected CSS class to the current element on the page. The same as the Apply button.
New Style: (New Style) is equivalent to button.
Edit style sheet: (edit style sheet) is equivalent to a button.
Attach style sheet: (link to external style sheet) is equivalent to button.
Export style sheet: (export a style sheet) export the internal style sheet on this page as an external style sheet file. Note: In addition to this method, you can use the file-> export CSS styles in the main menu to export the style sheet.

2. Create a style sheet

Before creating a style sheet, we will first introduce three style sheet types in dreamweaver4. click the button in the CSS styles Panel (or the CSS styles panel menu New Style) to bring up the New Style dialog box, as shown in:

In define, you can select an external style table or an internal style table:
L select new style sheet file. The system will first save the style sheet file and then define the style sheet file. The style of the entire page will follow the style sheet file you created. Then you can link this external style sheet file to another page, this allows a style sheet file to control multiple pages.
L if you choose this document only (this document exists only), you create an internal style sheet, dreamweaver4 will automatically put the content of the style table you created in the <style> tag of the

There are three types of style sheets available in type:
L make custon style (class): (create a custom style) to customize a style, which can be applied to the page as a class attribute.
L redefine HTML Tag: (redefines HTML tags) redefines the default format of the specified HTML Tag.
L use CSS selector: (use CSS selector) to define the format of a specific tag combination or all tags with the specified ID attribute.

Before defining CSS, we must first consider where the defined style will be used? What are the effects? Is the style defined in one page or multiple pages under control? Then define the appropriate style sheet as needed.

3. Create a custom Style

On pages, we sometimes want to make some important text or content eye-catching. We need to define a style separately for these important words or content to distinguish general text, you can create custom styles to define CSS for important content separately. Suppose that we need to define the color of important text and content in red and bold to achieve the goal of eye-catching.

Click Create style. The create dialog box is displayed. In the create Style dialog box, select make custon style (class) as the style table type. Here, we create an internal style table and select this document only, enter the name of the style you defined in the name drop-down box above. emphases "press OK, for example:

Note: You can set the name of a custom style at will. Generally, the name is based on the style effect. There must be a number before the name. If it is missing, the system will automatically fill it in.

In the pop-up style definition dialog box, select type in category, set the color to red, weight to bold, and press OK,

Then a custom style named emphases is added to the CSS styles panel, so that we can define a new style:

Let's take a look at the original code section. We can see that the following style table code is added in the <Style type = "text/CSS">
<! --
. Emphases {font-weight: bold; color: # ff0000}
-->
</Style>

After the style is defined, we can apply the custom style to the desired place, select text on the webpage, and click emphases style in the style panel. See if you want the effect.
Note: If the selected content is a table or paragraph, the text in the entire table or paragraph is defined with the emphases style, from the original code, we can see that the class = "emphases" parameter is added after the <Table> or <p> mark, for example:
<Table class = "emphases">
......
Or
<P class = "emphases">
......
When we add a style to the selected text, the text itself is not surrounded by HTML tags, and the <span> tag is automatically added, for example:
...... <SPAN class = "emphases"> emphasis </span> ......
Note: The span tag does not have any meaning. It specifies a selection range for the style sheet and a div for the area specified for the style sheet.

4. Create a redefinition style sheet

Redefinition of a style sheet is to redefine the format of an HTML Tag. For example, we want to reformat the section on the page. Each section has two spaces before it, and set the text size and line spacing.

Click Create style. In the New Style dialog box that appears, select redefine HTML tag for the style sheet type. We still create an internal style sheet and select this document only. When redefine HTML Tag is selected as the style sheet type, the name in the above drop-down box is changed to a tag, indicating that the input content is an HTML Tag. Click the drop-down button, we can see that all HTML tags are in the tag drop-down box. Here we select section tag P:

Press OK to enter the style definition dialog box. In type, we set the font size to 12 pixels and the line spacing to 150% of the text size, for example:

In the block section, we set the text indent. because the size of the text is 12 pixels, the space of the two words is 24 pixels:

After you press OK, The redefinition style is complete. At this time, the text size of each section on the page is 12 pixels, and the line spacing is 150%. However, we cannot see the indent effect in the Dreamweaver editor. It doesn't matter, as long as we save the file, then, open the browser to see the effect. The original code of the CSS style sheet is:
<Style type = "text/CSS">
<! --
. Emphases {font-weight: bold; color: # ff0000}
P {font-size: 12px; line-Height: 150%; text-indent: 24px}
-->
</Style>

5. Create a dynamic link style sheet

Next we will create a set of links in different States. Click Create style. The create dialog box is displayed. In the create Style dialog box, select use CSS selector for the style sheet type. We still create an internal style sheet and select this document only. When you select use CSS selector as the style sheet type, the name of the drop-down box above is set to selector, indicating that the input content is a CSS selector. Click the drop-down button to view the four statuses of dynamic links:

A: select the hyperlink status in active mode.
A: hover move the cursor to the hyperlink status
A: The Link hyperlink is normal.
A: The hyperlink status accessed by visited
Next, we will set these statuses separately. First, select a: link and OK. Then, the style definition dialog box is displayed. We will set the color to orange, for example:

We use the same method to set a: visited, with no underline and yellow, such:

Next, set a: hover with an underline and an upper line. The color is orange and the background is yellow:

We do not set a: active here. According to the cascade Rule A: active, the style will automatically follow a: hover. In this way, we have set the effects of all dynamic links, and pay attention to the order of settings. In the browser, we can see that the unaccessed links on this page are not underlined, orange; the accessed links are not underlined, yellow; the mouse points to the link with upper, underline, orange, and the background is yellow. The original code of the style sheet is:
<Style type = "text/CSS">
<! --
. Emphases {font-weight: bold; color: # ff0000}
P {font-size: 12px; line-Height: 150%; text-indent: 24px}
A: link {color: # ff9900; text-Decoration: None}
A: visited {color: # FFFF00; text-Decoration: None}
A: hover {color: # ff9900; text-Decoration: underline overline; Background-color: # FFFF00}
-->
</Style>

When dynamic links are defined in this way, the link effect of the entire page will change. What should I do if I want to define more than two sets of links in a page? In chapter 4, can I use different links between classes and pseudo classes on the same page. Click Create style. In the drop-down box of the selector, enter a. link2: Link (you can select a: Link first and then change it), for example:

In this way, we create a new. link2 class. We set the style for a. link2: Link, red, and underlined:

According to the above method, we continue to define. link2: visited and. link2: hover. We define. link2: visited is highlighted in red,. link2: hover is red with no underline, and the background is white. A custom style named link2 is added to the CSS styles panel. Apply the style to a dynamic link. After saving it, open it in a browser. We can see two completely different link styles. All CSS code is as follows:
<Style type = "text/CSS">
<! --
. Emphases {font-weight: bold; color: # ff0000}
P {font-size: 12px; line-Height: 150%; text-indent: 24px}
A: link {color: # ff9900; text-Decoration: None}
A: visited {color: # FFFF00; text-Decoration: None}
A: hover {color: # ff9900; text-Decoration: underline overline; Background-color: # FFFF00}
A. link2: link {color: # ff0000; text-Decoration: underline}
A. link2: visited {color: # ff0000; text-Decoration: underline}
A. link2: hover {color: # ff0000; text-Decoration: none; Background-color: # ffffff}
-->
</Style>

6. Definitions of other style sheets

You can also enter another CSS selector in use CSS selector:
Id selector defines a style starting with "#", for example, "# ID-style", and then creates an ID style with ID as ID-style, the ID style table must manually add the id = "ID-style" attribute after HTML marking.

Class Selection Characters with HTML tags, for example, "p. "Red" indicates the style that defines a paragraph as the red class. This style only applies to paragraphs with the class = "red" attribute.

The inclusion selector indicates that the previous HTML Tag contains the last HTML Tag. For example, "Div P" indicates the style of the section contained in the div.

7. Edit, modify, and delete a style sheet

Click the button on the CSS styles panel to open the edit style sheet dialog box, for example:

Button Function introduction:
Link: link to an external style sheet. You can link to an external style sheet or import an external style sheet.
New: Create a style.
Edit: select a style and click Edit to edit it.
Duplicate: copy a style. After selecting a style, click the duplicate button. In the displayed dialog box, create a new name for the copied style. OK.
Remover: Remove a style or an external style table. Select the Remove button of the style to be deleted and the style will be deleted.

You can view the style content in the style definition column.

8. External Style Sheets

Creating an external style sheet is similar to creating an internal style sheet. When creating a new style sheet, select (New Style Sheet filelayout, and save it as a style sheet file with the extension name .css.

Now, we export the style sheet from the instance and link it to other pages. Click the export style sheet in the CSS style panel. The system displays the sample table dialog box. Save the sample table file as mystyle.css. Use the notepad to open the mystyle.css file and you can see the following style sheet code:
. Emphases {font-weight: bold; color: # ff0000}
P {font-size: 12px; line-Height: 150%; text-indent: 24px}
A: link {color: # ff9900; text-Decoration: None}
A: visited {color: # FFFF00; text-Decoration: None}
A: hover {color: # ff9900; text-Decoration: underline overline; Background-color: # FFFF00}
A. link2: link {color: # ff0000; text-Decoration: underline}
A. link2: visited {color: # ff0000; text-Decoration: underline}
A. link2: hover {color: # ff0000; text-Decoration: none; Background-color: # ffffff}

Go to other pages, click the link to external style sheet button in the CSS style panel, and then link the sample table file mystyle.css, which has been applied to the new page. The following code is added to the <LINK rel = "stylesheet" href = "mystyle.css" type = "text/CSS">

You can also import an external style sheet as follows:
Click Edit style sheet to open the edit style sheet dialog box. Click link. The "link external style sheet" dialog box is displayed. Enter the path of the external style sheet and select import ), OK.

The code in the <Style type = "text/CSS">
<! --
@ Import "mystyle.css ";
-->
</Style>