Home > Article > Web Front-end > CSS tutorial (5) How to use DW4 to create CSS
1. CSS styles panel
After studying the previous chapters, I believe everyone has a certain understanding of CSS. In this chapter, we will explain how to use Dreamweaver4 to create CSS. First run Dreamweaver4. After starting, select Windows->CSS styles under the menu (or press Shitf+F11). The system pops up the CSS styles management panel, as shown in the figure below:
is displayed in the CSS styles panel All custom CSS styles (that is, the class selectors starting with a dot mentioned above, Dreamweaver4 uses such class selectors starting with a dot as custom styles), you can use the Apply button to apply these CSS styles to the page at will. A text or document area in .
Note: There is a check box in front of the Apply button. When selected, the button will be gray and unavailable, indicating automatic application. As long as the mouse clicks, the customized CSS style will be automatically applied to the current element in the page; if The check box is not selected and the Apply button is available. You need to click the Apply button when applying. 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"-shaped symbol in front of the style, which indicates an internally defined style; if it is a symbol, it indicates that this style is linked to an external style sheet file.
Note: The CSS styles panel only displays custom (class) CSS styles; redefined HTML tags and other CSS selector styles will not appear on the CSS styles panel because they can be automatically applied to those The area controlled by HTML tags. (Redefining HTML tags refers to the CSS style whose selector is a single HTML tag. It is called redefining because it redefines and changes the style of the original HTML tag.)
There are 4 small buttons in the lower right corner , these are the most commonly used commands:
Attach style Sheet: (Link to style sheet) After clicking, a select style sheet dialog box will pop up. Select the previously created external style sheet and click OK to link. Added this external style sheet. When adding external style sheets, be sure to use relative paths whenever possible. New style: (New style) Generally we use this button to create a CSS style sheet.
Edit style sheet: (Edit style sheet) After clicking, the edit style sheet dialog box will pop up, showing all existing internal and external style sheets. You can create, edit, and delete styles in this dialog box.
Delete: (Delete style) First select the custom CSS style to be deleted, then click this button, and the style will be deleted.
Click the small triangle above or click the right button of the mouse to pop up a menu. The functions of the menu are as follows:
Edit: (Edit) Edit the custom CSS style you currently selected. Click Enter the define style dialog box for editing this CSS class style.
Duplicate: (Copy) Duplicate 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) refers to applying the selected CSS class to the current element in the page. Same as Apply button.
New style: (New style) is equivalent to button.
Edit style sheet: (Edit style sheet) is equivalent to the button.
Attach style Sheet: (Link to external style sheet) Equivalent to button.
Export style Sheet: (Export style sheet) Export the internal style sheet in this page to an external style sheet file. Note: In addition to using this method to export style sheets in Dreamweaver4, you can also use File->Export->Export CSS styles under the main menu.
2. Types of creating style sheets. Before creating a style sheet, we first introduce the three style sheet types of Dreamweaver4. Click the button in the CSS styles panel (or New style in the CSS styles panel menu) to pop up the new style. Dialog box, as shown below:
In Define, you can choose whether it is an external style sheet or an internal style sheet:
l Select New style Sheet File (new style sheet file), the system will first let You save this style sheet file and then define this style sheet file. The style of the entire page will follow the style sheet file you created, and then you can link this external style sheet file to other pages, so that one style sheet file can control multiple pages.
l If you select This Document Only (only this document exists), you will create an internal style sheet, and Dreamweaver4 will automatically put the content of the style sheet you created into the
After defining the style, we can now apply this custom style where needed, on the web page Select the text and click the emphases style in the Styles panel. See if it's the effect you want.
Note: If the content we select is a table or a paragraph, then the text in the entire table or paragraph is defined with emphases style. From the original code, we can see that it is in